Güçlü PWA'lar

Bazı PWA özellikleri (ör. bir web uygulamasının platform bildirimleri almasına ve yayınlamasına olanak tanıyan Bildirimler API'si) yaygın olarak bilinse de uygulamalarınıza güç katmak için web'e gelecek olan yeni ve yakında kullanıma sunulacak birçok özellik var. Project Fugu 🐡 olarak da bilinen Chromium Web Capabilities projesi, web'i benzersiz kılan özellikleri (kullanıcı odaklı güvenlik, düşük sürtünme ve platformlar arası uyumluluk) korurken yeni ve güçlü web standartlarını etkinleştirmeye yönelik bir çalışmadır.

Uygulama açığını kapatma

Bu özelliklerin çoğu, geleneksel masaüstü veya mobil uygulamalar ile web uygulamaları arasındaki boşluğu doldurmak üzere tasarlanmıştır. İlk büyük özellikler, web uygulamalarının platformun kişi seçicilerine ve paylaşım özelliklerine erişmesine, yüklü PWA'ların platform paylaşım hedefi olarak kaydedilmesine ve simge rozetleri göstermesine olanak tanır (birkaç örnek).

Her özellik, API'nin şekillendirilmesine yardımcı olmak ve nihai tasarımın güvenli, gizli ve güvenilir olmasını sağlamak için topluluk geri bildirimlerini almak üzere kapsamlı bir standardizasyon sürecinden geçer. Yeni özellikler açık izleyici ile takip edilir ve beş kategoriden birine ayrılabilir:

GÖNDERİLDİ

Chrome'un en son kararlı sürümünde kullanılabilir. Kullanımı düzgün bir şekilde özellik olarak algılandığı sürece güvenilir bir şekilde kullanılabilir.

IN ORIGIN TRIAL

Chrome kaynak denemesi (OT) olarak kullanılabilir. Bu sayede deneysel özelliklerin ve API'lerin Chrome ekibi tarafından gerçek dünya kullanımında doğrulanmasına ve API'nin kullanılabilirliği ve etkinliği hakkında geri bildirimde bulunmanıza olanak tanır. OT'ler etkinleştirme gerektirir ve kullanıcılarınızın tarayıcılarında herhangi bir özel işareti etkinleştirmelerini gerektirmeden bu işlevi onlarla beta test etmenize olanak tanır. API'ler bir OT'den sonra değişebilir ve OT'lerin kullanıma sunulmadan önce bir süre boyunca kullanılamayacağı garanti edilir. Bu nedenle, yeni API'ler için erken kullanıma sunma mekanizması olarak değerlendirilmemelidir.

GELİŞTİRİCİ DENEME SÜRÜMÜNDE

Chrome'da bir işaretin arkasında kullanılabilir. Bu API'ler deneyseldir ve hâlâ aktif olarak geliştirilmektedir. Hata içerme ve API'lerin değişme ihtimali yüksek olduğundan bu API'ler üretimde kullanıma hazır değildir. Geliştiriciler bu süreyi deneysel özellikleri kendi başlarına denemek için kullanabilir ancak kullanıcılarına, özelliklerini kullanmak için işaretleri etkinleştirmelerini söylememelidir.

BAŞLAMA

Geliştirme başladı ancak şu anda kullanılabilir bir API yok.

DEĞERLENDİRİLİYOR

Kullanıcıların ilgi gösterdiği ancak henüz uygulanmaya başlanmamış API'ler. Henüz başlatılmamış bir API varsa lütfen Chromium Ekibi'nin öncelik vermesine yardımcı olmak için API'yi yıldızlayın veya kullanım alanlarınızı API'nin sorununa ekleyin.

PWA'nızı geliştirme

PWA'nızı oluştururken web uygulamanızın görünümünü büyük ölçüde iyileştirmek için aşağıdaki API'leri ve en iyi uygulamaları kullanmayı düşünebilirsiniz. Genel kullanım alanlarına göre ayrılmış olan uygulamanız, genel kullanıcı deneyiminizi iyileştirmek için bir veya daha fazla API'den yararlanabilir. 🔮 ile işaretlenen API'ler kaynak denemesinde, 🚩 ile işaretlenenler geliştirici denemesinde, 📱 ile işaretlenenler ise şu anda mobil cihazlarda kararlıdır ve masaüstü uygulamaları başlatılmıştır. Bahsedilen diğer tüm API'ler kararlıdır (ancak tüm platformlarda kullanılamayabilir). Yalnızca Chrome'un mevcut kararlı, beta (β ile işaretlenmiş) veya canary (α ile işaretlenmiş) sürümlerinde kullanılabilen API'ler dahil edilir. Bu listenin, yayınlanan API'leri yansıtacak şekilde düzenli olarak güncellenmesi beklenir.

Uygulama yükleme

Web uygulamanızın, görev çubuğu, başlatıcı, masaüstü ve uygulama değiştirici gibi yüklü diğer uygulamaların yanında kullanılabilmesini istiyorsanız PWA'nızın yüklenebilir olması için aşağıdaki API'leri uygulamayı düşünebilirsiniz. İsteğe bağlı olarak bu codelab'i tamamlayın.

  • Web Uygulaması Manifesti: Web uygulamanızla ilgili bilgileri (ör. ad, logo, uygulamayı başlatmak için kullanılacak URL ve web uygulamanızın nasıl görüntüleneceği) tarayıcıya ve işletim sistemine iletin.
  • Service Worker'lar ve Cache Storage API: Web uygulamanızın bir proxy sunucusu oluşturmasına ve tarayıcı önbelleğinin nasıl işleneceğini kontrol etmesine olanak tanır. Tarayıcının fetch etkinliğine tepki veren ve web uygulaması manifest dosyasında belirtilen başlangıç URL'si için çevrimdışı olduğunda içerikle birlikte getirme isteğine yanıt verebilen bir hizmet çalışanı, yüklenebilir olma için gereklidir.
  • Girişte Çalıştır 🚩β: PWA'nızı, kullanıcı giriş yaptığında otomatik olarak başlatılacak şekilde yapılandırmanıza olanak tanır.
  • Uygulama simgesi kısayolları: Desteklenen platformlarda, yüklü uygulama simgenizin bağlam menüsünden (ör. mobil cihazlarda uzun basma, masaüstü bilgisayarlarda sağ tıklama) web uygulamanızla belirli URL'lere (ör. sohbet başlatma, fotoğraf yükleme vb.) kısayollar sağlayın.
  • getInstalledRelatedApps: Web uygulamanızın, PWA'nızın, Android uygulamanızın veya Windows (UWP) uygulamanızın daha önce yüklenip yüklenmediğini kontrol etmesine olanak tanır.

Uyarlanabilir ve erişilebilir

Web uygulamanızın farklı cihazlara ve farklı fiziksel ve/veya zihinsel ihtiyaçlara sahip kullanıcılar tarafından kullanılabilmesini istiyorsanız aşağıdakileri uygulamanız gerekir:

  • Duyarlı tasarım: Web uygulamanızın, küçükten büyüğe ekran boyutlarında kullanılabilir veya en azından bozulmamış bir deneyim sunduğundan emin olun. Böylece farklı cihazları ve pencere yerleşimlerini kullanan kullanıcılar uygulamanızı kullanabilir.
  • WCAG 2.0 Yönergeleri: Web uygulamanızın yalnızca nörotipik ve sağlıklı bireyler tarafından değil, çeşitli fiziksel ve zihinsel yeteneklere sahip kişiler tarafından da kullanılabilir olmasını sağlayın. Birleşik Krallık Hükümeti'nin Erişilebilirlik için tasarım yaparken yapılması ve yapılmaması gerekenler başlıklı makalesini de inceleyin.

Para kazanma ve dağıtım

  • Web Ödemeleri: Herhangi bir tarayıcıda veya cihazda ve herhangi bir ödeme ya da ödeme hizmeti sağlayıcıyla çalışması amaçlanan, esnek ve standart bir çevrimiçi ödeme arayüzü.
  • Digital Goods API 🔮: Tek seferlik satın alma işlemleri, tekrarlanabilir satın alma işlemleri (ör. oyun içi mücevherler/para birimi) ve abonelikler gibi yaygın satın alma türleri için destek de dahil olmak üzere, web uygulamalarından uygulama içi satın alma işlemlerini sorgulamak ve yönetmek için esnek, standart arayüz. Web ödemeleriyle birlikte çalışır.
  • Güvenilen Web Etkinliği: PWA'nız için bir Android uygulaması oluşturarak uyumlu mağazalarda (ör. Google Play) indirilmek üzere listelenmesini sağlayın.

Pano erişimi

  • Async Clipboard: Kullanıcının panosuna metin ve resim okuyup yazın ve kullanıcının kopyalama ve yapıştırma etkinliklerini dinleyin.

Bildirimler

Web uygulamanızın (ör. bir sohbet uygulaması veya üzerinde çalışılan arka plan kodlaması) kullanıcıları bilgilendirmesi gerekiyorsa aşağıdaki API'leri uygulamayı düşünebilirsiniz:

  • Web Push Bildirimleri: Kullanıcılar kabul ettikten sonra web uygulamanızın onlara push bildirimi göndermesine olanak tanır.
  • Badging API: Yüklenen web uygulamanızın, uygulama simgesinde isteğe bağlı olarak bir sayıyla birlikte uygulama genelinde rozet ayarlamasına olanak tanır.
  • Bildirim Tetikleyicileri 🔮: Tetikleyici koşul karşılandığında kullanıcılara bildirim gönderin. Örneğin, zamana veya konuma dayalı tetikleyiciler (takvim etkinliği bildirimleri gibi)

Amaç paylaşımı ve protokol işleme

  • URL protokolü kaydı 🚩α: Web uygulamalarının, yükleme manifestlerini kullanarak kendilerini özel URL protokollerinin/şemalarının işleyicileri olarak kaydetmelerini sağlar.
  • Web Share: URL'leri, metinleri ve dosyaları cihazlarına yüklenen diğer uygulamalarla paylaşmak için desteklenen cihazlarda yerleşik sistem paylaşımı kullanıcı arayüzünü kullanın. Uygulamanızın yüklenmesi gerekmez.
  • Web Share Target: Kullanıcıların diğer uygulamalardan uygulamanıza metin ve dosya paylaşmasına olanak tanımak için, desteklenen cihazlarda yüklü PWA'nızı yerleşik sistem paylaşımı kullanıcı arayüzünde kullanılabilir hale getirin.

Dosyaları açma ve kaydetme

  • File Handling API 🚩: Yüklü web uygulamanızın, belirli MIME türlerine ve/veya dosya uzantılarına sahip dosyaları işleme (okuma/yayınlama/düzenleme) özelliğini işletim sistemine kaydetmesini sağlayın. Örneğin, bu sayede uygulamanız bağlam menüsünün "Uygulama ile aç…" listesinde bir seçenek olarak yer alabilir.
  • File System Access API: Oturum başına kullanıcının dosya sistemine sağlam erişim sağlayarak aşağıdaki etkileşimlere (uygulamanızın ihtiyaç duyduğu şekilde) olanak tanır
    • Yerel dosya sistemindeki dosyaları okuma: Dosya seçiciyi gösterir ve kullanıcının, izin verilen dosya türlerini MIME türü ve uzantıya göre sınırlama da dahil olmak üzere açılacak bir veya isteğe bağlı olarak birden fazla dosya seçmesine olanak tanır.
    • Açık dosyada yapılan değişiklikleri kaydetme: Kullanıcıdan dosyayı nereye kaydedeceğini seçmesini veya bir kopya indirmesini istemeden, FSA ile açılan bir dosyada yapılan değişiklikleri doğrudan kaydeder.
    • Yerel dosya sisteminde yeni bir dosya oluşturma: Kullanıcının yerel dosya sisteminde yeni bir dosya oluşturmasına (isteğe bağlı olarak varsayılan dosya uzantısıyla) izin verin. Uygulamanız daha sonra bu dosyayı kaydedebilir.
    • Yakın zamanda açılan dosyalar: FSA ile oluşturulan dosya işleyiciler IndexedDB'de depolanabilir. Bu sayede, kullanıcı oturumları arasında yakın zamanda kullanılan dosyaların listesini gösterebilirsiniz (düzenleme izinleri oturumlar arasında kalıcı olmasa da).
    • Dizin okuma, yazma ve dizinle oynama: Kullanıcının, yerel dosya sisteminde bir dizin seçmesine izin verin. Uygulamanız daha sonra bu dizinin içeriğini okuyabilir, dizinde dosya ve alt dizin oluşturabilir, okuyabilir ve silebilir ve göreli dosya yolunu belirleyebilir.
  • Sıkıştırma Akışları: gzip ve deflate sıkıştırma algoritmalarını kullanarak sıkıştırın veya sıkıştırmayı açın.

Pencere Yönetimi

  • Tam ekran API'si: Kullanıcının web uygulamanızdaki bir öğeyi (ör. video) tam ekran yapmasına izin verin.
  • Cross-Screen Window Placement API 🔮: Web uygulamanızın, bağlı ekranlar hakkında bilgi almasına ve pencereleri bu ekranlara göre konumlandırmasına olanak tanıyarak çok pencereli, çok ekranlı web uygulamaları oluşturulmasını sağlar.
  • Sekmeli Uygulama Görüntüleme Modu 🚩: Yüklü web uygulamanızın tek bir pencerede değil, bir veya daha fazla sekmede görüntülenmesine izin verin.

Daha derin işletim sistemi entegrasyonu

  • Local Fonts API 🔮: Web uygulamanızın, yerel olarak yüklenen yazı tiplerini listelemesine ve tam yazı tipi verilerini içeren düşük düzeyli (bayt yönlü) SFNT kapsayıcı erişimi istemesine olanak tanır. Böylece uygulamanız, yerel olarak yüklenen yazı tiplerini özel olarak oluşturabilir.
  • Wake Lock: Web uygulamanızın ekranın uyku moduna geçmesini engellemesine olanak tanır. Böylece web uygulamanız, kesintiye uğrama korkusu olmadan uzun süren görevleri (ör. dosya dönüştürme veya yemek pişirirken tarifi açık tutma) gerçekleştirebilir.
  • Boşta Kalma Algılama 🔮: Web uygulamanızın, kullanıcının cihazını aktif olarak kullanmadığı zamanları algılamasına olanak tanır.

Genişletilmiş çevrimdışı destek

Web uygulamanızın çevrimdışı olarak daha iyi çalışmasını istiyorsanız aşağıdaki API'leri uygulamayı düşünebilirsiniz:

  • Arka Planda Senkronizasyon: Çevrimdışı olduğunuzda bağlantı gerektiren istekleri sıraya alın ve ağ kullanılabilir olduğunda web uygulamanızın verilerini arka planda senkronize edin. Böylece istekler çevrimdışı olarak hiç işlenmez. Örneğin, internete tekrar bağlandığınızda iletilerin gönderilmesine veya bir dokümanda yapılan küçük değişikliklerin senkronize edilmesine izin verilir.
  • Periyodik Arka Plan Senkronizasyonu: Yüklenen ve sık kullanılan web uygulamanızın, belirli bir süre geçtikten sonra hizmet çalışanının periyodik olarak uyandırılmasına ve çalışmasına (ör. önbelleği güncellemek için) izin verin. Böylece, kullanıcı uygulamayı açtığında içerik güncel olur.
  • Content Indexing API: Web uygulamanızın, tarayıcıya çevrimdışı olarak hangi içeriğin kullanılabildiğini bildirmesine izin vererek tarayıcının bu içeriği kullanıcılara göstermesini sağlayın.
  • Arka planda getirme: Hizmet çalışanının sonlandırılması riskini almadan filmleri indirme veya video ve resimleri yükleme gibi uzun süren arka plan getirme işlemlerine izin verin.

Medya akışı, kodlama ve kod çözme

Web uygulamanız video veya ses dosyaları gibi medya dosyalarını oynatıyorsa aşağıdaki API'leri uygulamayı düşünebilirsiniz:

  • Uyarlanabilir akış: Video akışlarının ağ performansına göre bit hızları arasında geçiş yapmasına izin verin.
  • Pencere içinde pencere: Kullanıcının, web uygulamanızdaki videoyu her zaman en üstte olan bir pencereye taşımasına izin verin. Bu pencere daha sonra bağımsız olarak taşınabilir ve yeniden boyutlandırılabilir.
  • Media Session API: Kullanıcının, web uygulamanızda medya oynatmayı donanım ve işletim sistemi düzeyindeki yazılım işlevlerini (ör. klavyelerdeki veya kilit ekranlarındaki oynatma/duraklatma/durdurma düğmeleri) kullanarak kontrol etmesine ve işletim sistemi düzeyindeki medya bildirimlerini (ör. başlık, sanatçı, albüm ve albüm kapağı) kontrol etmesine olanak tanır.
  • Chromecast API'si: Kullanıcının, kullanılabilir bir Chromecast alıcısına medya yayınlamasına (ör. web uygulamanızdaki bir videoyu TV'sinde oynatmasına) olanak tanır.
  • Web Codecs 🔮: Hem düşük gecikmeli canlı yayın ve kodlama gibi gerçek zamanlı kullanım alanları hem de dosyaların kodlanması, kod çözme ve dönüştürülmesi için yararlı olan yerleşik donanım ve yazılım medya kodlayıcılarına ve kod çözücülerine erişim.

Genişletilmiş giriş desteği

  • Pointer Events: Tek bir API kullanarak dokunma, kalem ve fare etkinliklerine yanıt verin. Böylece kullanıcılarınız için daha fazla giriş seçeneği sunabilirsiniz. Dokunmaya uygun kullanıcı arayüzleri ve kullanıcı girişi ve kontrolleri ile ilgili en iyi uygulamalara da göz atın.
  • Gamepad API: Web uygulamanızın, yaygın gamepad'lerden gelen girişlere yanıt vermesine olanak tanır.
  • Web HID 🚩: Web uygulamanızın standart olmayan insan arayüzü cihazlarına (ör. özel kontrol cihazları) erişmesine olanak tanır.

Gelişmiş çevre birimi desteği

  • Web USB: Web uygulamanızın, uygulamanızdan standart olmayan (ör.klavye ve fare) USB cihazlara erişmesine olanak tanır.
  • Serial API 🔮: Fiziksel veya sanal bir seri bağlantı noktası üzerinden donanım cihazlarıyla iletişim kurmak için bir API ekler.

PWA kontrol listeniz

PWA'nızı bu yeni ve güçlü API'lerle geliştirmeye hazır mısınız? Kullanılacak önerilen API'leri görmek için aşağıdaki kullanım alanlarından birini seçin veya kendi kontrol listenizi oluşturup tamamlamaya çalışın.