Özellikler

Progresif Web Uygulamaları sadece ekranda içerik oluşturmaktan veya web hizmetlerine bağlanmaktan daha fazlasını yapabilir. PWA'lar dosya sistemindeki dosyalarla çalışabilir, sistemin panosuyla etkileşimde bulunabilir, cihaza bağlı donanımlara erişebilir ve daha pek çok şey yapabilir. Tüm Web API'leri PWA'nız için kullanılabilir ve uygulamanız yüklendiğinde bazı ekstra API'ler kullanabilirsiniz.

Her bir platformda nelerin mümkün olduğunu öğrenmek için Web'in Bugün Neler Yapabilir? raporunu kullanabilirsiniz. Bağımsız API'ler veya özellikler için Can I Use (Kullanabilir miyim?) veya MDN'deki tarayıcı uyumluluğu tablolarını kullanabilirsiniz.

Özellik desteğini her zaman kontrol etme

PWA'daki ilk harf progresif (progresif) anlamına gelir ve bu sözcük progresif geliştirme ve özellik algılama kavramından gelir. Uygulamanızın her cihazda aynı şekilde çalışmasını beklememelisiniz. Farklı ülkelerde milyarlarca cihazda kullanılan bağlam ve özelliklerin çeşitliliği, gelişimleri sayesinde PWA'ları mükemmel bir platform haline getirir.

Bu nedenle, uygulamanızı her cihazda bulunmayabilecek katmanlar halinde geliştirmeniz ve kullanımdan önce kullanılabilirliğini kontrol etmeniz gerekir.

Kullanmadan önce JavaScript'le bir API'nin var olup olmadığını kontrol etmeniz veya API'ye, söz konusu cihazda kullanılabilir bir hizmet olup olmadığını sormanız gerekir.

Güçlü web

Web günümüzde aşırı güçlü. Örneğin:

  • WebRTC, coğrafi konum ve push mesajları ile yerel mesafe görüntülü sohbet uygulaması oluşturabilirsiniz.
  • Bir uygulamayı yüklenebilir yapabilirsiniz.
  • WebAssembly ile video efektleri ekleyebilirsiniz.
  • Hatta WebGL ve WebXR ile sanal gerçekliğe bile getirebilirsiniz.

PWA'nızı güçlendirme

PWA özellikleri API'lerini dört gruba ayıralım:

  • Yeşil: Teknik açıdan mümkün olduğunda, her platformdaki tüm tarayıcılarda kullanılabilen API'ler. Çoğu yıllardır gönderilmiş olan bu cihazları güvenle kullanabilirsiniz. Bu gruptan örnek bir API, coğrafi konum API'sidir.
  • Açık yeşil: API'ler yalnızca bazı tarayıcılarda kullanılabilir. Bazı platformlarda destek eksikliği göz önüne alındığında, bu özelliği güvenle kullanabilmeniz için, desteklenen tarayıcı alt grubu içinde olgunlaşmıştır. Bu gruptan örnek bir API, WebUSB'dir.
  • Sarı: Deneysel API'lar. Bu API'ler henüz yetişkinlere uygun değildir; yalnızca bazı tarayıcılarda ve testlerde veya denemeler kapsamında kullanılabilirler. Deneysel bölümünde bu özelliklerden biraz bahsettik.
  • Kırmızı: PWA'da kullanamayacağınız API'ler grubu ve bunları ekleme planları hâlâ uzun vadelidır. Bu gruptaki örnek API'lerden biri coğrafi sınır çizmedir.

Çevreye duyarlı özellikler

PWA'nızda kullanabileceğiniz en önemli özelliklerin listesi aşağıda verilmiştir.

Temel seviye

  • Önbelleğe alma bölümünde gösterildiği şekilde Önbellek API'sini kullanarak dosyaları yerel olarak önbelleğe alma.
  • Karmaşıklık yönetimi bölümünde gördüğümüz gibi, web çalışanlarını kullanarak iş parçacıkları halinde görev yürütme.
  • Service Works bölümünde gösterildiği şekilde, Service Worker'da farklı stratejilerle ağ isteklerini yönetme.
  • Canvas API'yi kullanarak ekranda 2D grafikler oluşturmak için 2D Tuval.
  • 3D grafikler oluşturmak için 2D ve 3D yüksek performanslı Tuval veya WebGL.
  • WebAssembly veya WASM: Performans sağlamak üzere düşük düzeyde derlenmiş kod yürütmek için kullanılır.
  • WebRTC API'sini kullanarak gerçek zamanlı iletişim.
  • Daha iyi bir deneyimin ölçülmesi ve sağlanmasına yardımcı olmak için Web Performance API'leri. Daha fazla bilgi için Performance API kılavuzuna bakın.
  • Çevrimdışı veriler bölümünde gösterildiği gibi, kota sorgulamak ve kalıcı depolama alanı talep etmek için IndexedDB ve depolama yönetimi ile verileri yerel olarak depolayın.
  • Web Audio API sayesinde düşük ses seviyesi.
  • Sayfa Görünürlüğü API'sini kullanarak ön plan algılama.
  • Fetch API ve WebSocket API'yi kullanarak ağ iletişimi.

Donanım ve sensörler

  • Gamepad API kullanılarak cihaza bağlı standart oyun kumandalarından ve oyun çubuklarından gelen bilgileri okumak için oyun kumandaları.
  • Web Authentication veya WebAuthn kullanarak biyometrik kimlik doğrulama (yüz veya parmak izi tanıma gibi).

İşletim sistemi entegrasyonu

Açık yeşil özellikler

PWA'nızda kullanabileceğiniz en önemli özelliklerin bir listesini burada bulabilirsiniz. Bu özelliklerin her tarayıcıda kullanılamayabileceğini de göz önünde bulundurun.

Temel bilgiler

  • WebGL 2.0, OpenGL 3.0 ile eşleşen WebGL spesifikasyonunun yeni sürümü.
  • Codecs, video akışının bağımsız karelerine ve ses parçalarına düşük düzeyli erişim; medyanın Web Codecs API üzerinden işlenme şekli üzerinde tam kontrol gerektiren web uygulamaları için kullanışlıdır.

Donanım ve sensörler

  • Ortam Işığı, Sensors API'sine ek olarak cihazın etrafındaki ortam ışığının mevcut ışık düzeyini veya parlaklığını okur.
  • Bir şey olduğunda Titreşim, cihaz tarafından destekleniyorsa Titreşim API'si aracılığıyla kullanıcıya dokunsal geri bildirim verir.
  • Medya kaydı, MediaRecorder API sayesinde analiz, işleme veya diske kaydetmek üzere bir MediaStream veya HTMLMediaElement nesnesi (<video> etiketi gibi) tarafından oluşturulan verileri yakalar.
  • PWA'nızın çalışmaya devam etmesi gerektiğinde Ekrana Uyandırma Kilidi uygulamak, Screen Wake Lock API'yi kullanarak cihazın kararmasını veya ekranı kilitlemesini engeller.
  • WebXR Device API sayesinde sanal gerçeklik, PWA'nızda başlık ve başka cihazlar kullanmanıza olanak tanır.
  • PWA'nızda artırılmış gerçeklik birçok şekilde elde edilebilir. Örneğin, WebXR Device API veya AR içeriği için Safari Quick Look uygulamasını kullanabilirsiniz.
  • Idle Detection API ile etkin olmayan kullanıcıları tespit edin.
  • Yön kilidi, PWA ekrandayken yönü dikey veya yatay olarak kilitler. Bunun için Screen Orientation API veya yüklü uygulamalar için Web App Manifest'in orientation özelliği kullanılır.
  • Sunum API'si sayesinde projektörlerde ve ikincil ekranlarda içerik sunun.
  • Pointer Lock API sayesinde konum değerleri yerine işaretçilerden (fare, dokunmatik yüzey ve işaretçiler) delta hareket bilgileri almak için işaretçi kilitleyin.

İşletim sistemi entegrasyonu

Kaynaklar