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
- Coğrafi konum, kullanıcının konumunu Geolocation API aracılığıyla uydu veya kablosuz bağlantı gibi farklı sağlayıcılar üzerinden elde eder.
- Kamera ve mikrofon, Medya cihazları arayüzünü kullanarak kameralardan ve mikrofonlardan gelen medya akışlarını alır.
- Sensörler; Sensors API'sini veya DeviceMotionEvent ve DeviceOrientationEvent gibi eski arayüzleri kullanarak ivme ölçer, jiroskop, manyetometre ve diğer kaynaklardan gerçek zamanlı bilgiler toplar. Safari'de bunları kullanmak için standart olmayan izin iletişim kutusu isteği kullanmanız gerekir.
- İşaretçi etkinlikleri ve Dokunma etkinlikleri sayesinde parmağınızla, fare, dokunmatik yüzey veya kalemle yaptığınız tüm dokunma ve işaretçiye dayalı tıklamalar hakkında bilgiye dokunma ve işaretçi erişimiyle erişebilirsiniz.
- 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
- Konuşma sentezi ve ses tanıma, Web Speech API sayesinde kullanıcıyla konuşmak ve söylediklerini tanımak için platformun yüklü seslerini kullanır.
- OS entegrasyonu bölümünde de göreceğimiz gibi, PWA'nızdaki diğer uygulama ve yerlerle Web Paylaşımı API'si üzerinden içerik paylaşabilirsiniz.
- OS entegrasyonu bölümünde gösterdiğim gibi Clipboard API sayesinde panodaki içeriği farklı biçimlerde kaydedip almak için panoya erişebilirsiniz.
- Kimlik Bilgileri Yönetimi API'sını kullanarak kullanıcının kimlik bilgilerini ve şifrelerini yönetin.
- Pencere içinde pencere API'sini kullanarak işletim sisteminde pencere içinde pencere modunda video oynatmayı etkinleştirin.
- Windows bölümünde gösterdiğim gibi Tam Ekran API'sı sayesinde tam ekranda içerik oluşturabilirsiniz.
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
- Medya API'lerinin yanı sıra kaydırma, yatırma ve yakınlaştırma kontrollerine erişmek için gelişmiş kamera kontrolleri.
- Web Bluetooth API'yi kullanarak kullanıcının yakınındaki Bluetooth düşük enerjili cihazlarla iletişim kurmak için Bluetooth LE. Daha fazla bilgi için JavaScript üzerinden Bluetooth cihazlarıyla iletişim konusuna bakın.
- NFC etiketi veya WebNFC API'yi kullanan kart gibi hafif NFC veri değişimi biçimi (NDEF) mesajları üzerinden NFC üzerinden veri alışverişi yapmak için yakın alan iletişimi. Daha fazla ayrıntı için Android için Chrome'da NFC cihazlarla etkileşimde bulunma başlıklı makaleyi de okuyabilirsiniz.
Cihaza Web Seri WPI'sını kullanarak Bluetooth üzerinden seri bağlantı noktası, USB veya seri aracılığıyla bağlı cihazlara alt düzey erişim için seri çevre birimi. Aşağıdaki bağlantıdan bir seri bağlantı noktasından okuma ve bu bağlantı noktasına yazma hakkında bilgi edinebilirsiniz.
USB WebUSB API üzerinden bağlanan cihazlarla iletişim kurmak için USB cihaz erişimi. Daha fazla bilgi için web'deki USB cihazlarına erişim konusuna bakın.
Gerçek kullanıcı arayüzlü cihazlar, PWA'nızın WebHID API kullanılarak yaygın olmayan insan etkileşimi için hazırlanmış her tür cihazla etkileşim kurmasını sağlar. Yaygın olmayan HID cihazlarına bağlanma ile ilgili bu kılavuza göz atın.
- 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
- OS Entegrasyonu bölümünde de gösterildiği gibi, File System Access API sayesinde cihazda dosya okuma ve yazma.
- OS entegrasyonu bölümünde gösterdiğim gibi Web Paylaşımı Hedefi sayesinde diğer uygulamalardan içerik alın.
- OS entegrasyonu bölümünde gösterildiği gibi, Contact Picker API'yi kullanarak kişi verilerini alın.
- Arka Plan Senkronizasyonu API'si sayesinde PWA kullanılmadan arka planda senkronizasyon yapabilirsiniz.
- Web Periodic Arka Plan Senkronizasyonu API'si sayesinde PWA kullanılmadığında görev planlama.
- Web Push ve Web Bildirimleri API'lerini kullanarak bildirim gönderin.
- Arka Planda Getirme API'si sayesinde kullanıcı PWA'nızı kullanmıyorken dosyaları arka planda aktarabilirsiniz.
- Medya Oturumu API'sini kullanarak oynatılan medyanızı işletim sistemiyle entegre edin.
- Payment Request API'si sayesinde PWA'nızda ödemeleri yönetin. Apple, Payment Request API'sine ek olarak bir Apple Pay JS kitaplığı sunar.
- Bağlantı türü (4G, kablosuz) ve Network Information API'yi kullanarak Veri Kaydet işareti gibi ağ durumunu sorgulayın.
- Ekran video kaydı veya ekran paylaşımı için Screen Capture API'yi kullanarak kullanıcının ekranını yakalayın.
- Şekil Algılama API'sini kullanarak barkodlar (insan yüzleri ve metin OCR'si halen geliştirilme aşamasındadır) dahil olmak üzere cihaz üzerinde donanım hızlandırmalı dedektörleri kullanarak şekilleri algılayın.
- Cihaz Belleği arayüzünü kullanarak bir cihazın belleğini sorgulama.
- SMS üzerinden tek kullanımlık şifreler, WebOTP API kullanılarak sunucunuzdan gönderilen SMS ile otomatik olarak bir kod almanızı sağlar. Safari,
<input>öğesine göre bir çözüm alt kümesi uygular. WebKit'in blogunda bu konuyla ilgili daha fazla bilgi edinebilirsiniz. - Virtual Klavye API'sini kullanarak mobil cihaz ekranlarında görünen sanal klavyeyi yönetin.