Kullanıcı PWA'nızı yükledikten sonra:
- Başlatıcıda, ana ekranda, başlat menüsünde veya başlatma alanında bir simgeniz olmalıdır.
- Kullanıcı, cihazında uygulamayı aradığında sonuç olarak görünür.
- İşletim sistemi içinde ayrı bir pencere bulunmalıdır.
- Belirli özellikler için destek alabilirsiniz.
Yükleme ölçütleri
Her tarayıcının, bir web sitesinin veya web uygulamasının progresif web uygulaması (pwa) olduğunu ve bağımsız bir deneyim için yüklenebileceğini işaret eden bir kriteri vardır. PWA'nızın meta verileri, Web App Manifest olarak bilinen JSON tabanlı bir dosya tarafından ayarlanır. Bu konuyu bir sonraki modülde ayrıntılı olarak ele alacağız.
Yüklenebilirlik için minimum gereksinim olarak, uygulamayı destekleyen çoğu tarayıcı, web uygulaması manifest dosyasının yanı sıra uygulamanın adı ve yüklenen deneyimin yapılandırması gibi belirli özellikleri kullanır. Yüklenebilirliği desteklemeyen macOS için Safari bu duruma bir istisnadır.
Yüklemeye izin verme gereksinimleri farklı tarayıcılar arasında farklılık gösterir. Bu makalede, Google Chrome ölçütleri ile ilgili ayrıntılar ve diğer tarayıcılar için gereksinimlerle ilgili bağlantılar yer almaktadır.
PWA'nın yüklenebilirlik gereksinimlerini karşıladığı test birkaç saniye sürebileceğinden, URL yanıtı alınır alınmaz yüklenebilirlik kullanıma sunulmayabilir.
Masaüstü kurulumu
Masaüstü PWA yüklemesi şu anda Linux, Windows, macOS ve Chromebook'larda Google Chrome ve Microsoft Edge tarafından desteklenmektedir. Bu tarayıcılardaki URL çubuğunda, mevcut sitenin yüklenebilir olduğunu belirten bir yükleme rozeti (simge) gösterilir.
Kullanıcı bir siteyle etkileşimde bulunduğunda, kullanıcıları bu siteyi uygulama olarak yüklemeye davet eden aşağıdaki gibi bir pop-up görebilir.
Tarayıcının açılır menüsünde, kullanıcının kullanabileceği bir "Yükle
Masaüstü işletim sistemlerinde yalnızca bağımsız ve minimal kullanıcı arayüzü görüntüleme modları desteklenir.
Masaüstünde yüklü PWA'lar:
- Windows PC'lerde Başlat menüsünde veya Başlat ekranında, Linux GUI'larında yuvada ya da masaüstünde, macOS başlatma alanında veya Chromebook'un uygulama başlatıcısında bir simgeniz olmalıdır.
- Uygulama etkin durumdayken, yakın zamanda kullanılmışsa veya arka planda açıldığında uygulama değiştiricilerde ve yuvalarda bir simge olmalıdır.
- Uygulama aramasında görünün. Örneğin, Windows'da arama yapın veya macOS'te Spotlight'ı kullanın.
- Yeni bildirimleri belirtmek için simgelerinde bir rozet numarası belirleyebilir. Bu işlem Rozet API'si ile yapılır.
- Uygulama Kısayolları ile simge için bir içerik menüsü ayarlayabilir.
- Aynı tarayıcıyla iki kez yüklenemez.
Masaüstüne bir uygulama yükledikten sonra, kullanıcılar başlangıçta about:apps uygulamasına gidip bir PWA'yı sağ tıklayabilir ve ardından "Oturum Açtığımda Uygulamayı Başlat"ı seçebilir.
iOS ve iPadOS yüklemesi
iOS ve iPadOS'te PWA'nızı yüklemek için bir tarayıcı istemi yok. Bu platformlarda PWA'lar, ana ekran web uygulamaları olarak da bilinir. Bu uygulamaların, yalnızca Safari'de kullanılabilen bir menü aracılığıyla ana ekrana manuel olarak eklenmesi gerekir. HTML'nize apple-touch-icon etiketini eklemeniz önerilir.
Simgeyi tanımlamak için, simgenizin HTML <head> bölümünüze giden yolunu şu şekilde ekleyin:
<link rel="apple-touch-icon" href="/icons/ios.png">
Safari, kısayolu oluşturmak için bu bilgileri kullanır ve Apple cihazlar için belirli bir simge sağlamazsanız, kullanıcı tarafından yüklendiğinde ana ekrandaki simge, PWA'nızın ekran görüntüsü olur.
PWA yüklemesinin yalnızca kullanıcı web sitenize Safari'den göz attığında kullanılabildiğini bilmeniz önemlidir. App Store'da sunulan Google Chrome, Firefox, Opera veya Microsoft Edge gibi diğer tarayıcılar ana ekrana PWA yükleyemez.
Uygulamaları ana ekrana eklemek için uygulanacak adımlar şunlardır:
- Tarayıcının alt veya üst kısmındaki Paylaş menüsünü açın.
- Add to Home Screen'i (Ana Ekrana Ekle) tıklayın.
- Kullanıcı tarafından düzenlenebilir olduğundan uygulamanın adını onaylayın.
- Ekle'yi tıklayın. iOS ve iPadOS'te, web sitelerinin ve PWA'ların yer işaretleri ana ekranda aynı görünür.
iOS ve iPadOS'te yalnızca bağımsız görüntüleme modu desteklenir. Bu nedenle, minimal kullanıcı arayüzü modunu kullanırsanız bir tarayıcı kısayoluna döner; tam ekran kullanırsanız bağımsız moda geri döner.
iOS ve iPadOS'e yüklü PWA'lar:
- Ana ekranda, Spotlight'ın aramasında, Siri Önerilerinde ve Uygulama Kitaplığı aramasında görünür.
- Uygulama Galerisi'nin kategori klasörlerinde görünmez.
- Rozet ve uygulama kısayolları gibi özellikler için destek yoktur.
Ne yazık ki Safari, işletim sisteminde PWA simgelerini oluşturmak için Web Klipleri adı verilen yerel bir teknoloji kullanmaktadır. Bunlar, Apple'ın dosya sisteminde depolanan Mülk Listesi biçimindeki XML dosyalarıdır.
Android kurulumu
Android'de, PWA yükleme istemleri cihaza ve tarayıcıya göre farklılık gösterir. Kullanıcılar şunları görebilir:
- Yüklemek için menü öğesinin Yükle veya Ana Ekrana Ekle gibi farklı ifadeleri.
- Ayrıntılı yükleme iletişim kutuları.
Aşağıdaki resimde, basit bir mini bilgi çubuğu (solda) ve bir ayrıntılı yükleme iletişim kutusu (sağda) olmak üzere iki farklı yükleme iletişim kutusu sürümünü görebilirsiniz.
Cihaza ve tarayıcıya bağlı olarak PWA'nız WebAPK'sı, kısayol veya QuickApp olarak yüklenir.
WebAPKs
WebAPK, kullanıcının cihazının güvenilir bir sağlayıcısı tarafından genellikle bulutta bulunan ve bir WebAPK yayınlama sunucusunda oluşturulan bir Android paketidir (APK). Bu yöntem, Google Chrome tarafından Google Mobil Hizmetleri (GMS) yüklü cihazlarda ve Samsung İnternet tarayıcısı tarafından, ancak yalnızca Galaxy telefon veya tablet gibi Samsung tarafından üretilmiş cihazlarda kullanılır. Bu iki hesap türü toplamda Android kullanıcılarının çoğunluğunu oluşturur.
Bir kullanıcı Google Chrome'dan bir PWA yüklediğinde ve bir WebAPK'sı kullanıldığında, madencilik sunucusu "mints" (paketler) olur ve PWA için bir APK imzalar. Bu işlem zaman alır, ancak APK hazır olduğunda tarayıcı bu uygulamayı kullanıcının cihazına sessizce yükler. Güvenilir sağlayıcılar (Play Hizmetleri veya Samsung) APK'yı imzaladığından telefon, APK'yı, mağazadan gelen diğer uygulamalarda olduğu gibi güvenliği devre dışı bırakmadan yükler. Uygulamayı başka cihazdan yüklemeye gerek yoktur.
WebAPK aracılığıyla yüklenen PWA'lar:
- Uygulama başlatıcıda ve ana ekranda bir simge olduğunda.
- Ayarlar, Uygulamalar'da görünür.
- Rozet, uygulama kısayolları ve işletim sisteminde bağlantı yakalama gibi çeşitli özellikler olabilir.
- Simgeyi ve uygulamanın meta verilerini güncelleyebilir.
- İki kez yüklenemez.
Kısayollar
WebAPK'ları Android kullanıcıları için en iyi deneyimi sunsa da her zaman oluşturulamaz. Bunu yapamadıklarında, tarayıcılar web sitesi kısayolu oluşturmaya başlar. Firefox, Microsoft Edge, Opera, Brave ve Samsung Internet'in (Samsung olmayan cihazlarda) güvendikleri madencilik sunucuları olmadığından kısayollar oluştururlar. Basma hizmeti kullanılamıyorsa veya PWA'nız yükleme gereksinimlerini karşılamıyorsa Google Chrome da bunu yapar.
Kısayollarla yüklenen PWA'lar:
- Ana ekranda tarayıcı rozetli bir simge bulundurun (aşağıdaki örneklere bakın).
- Başlatıcı'da veya Ayarlar, Uygulamalar'da simge yok.
- Yükleme gerektiren özellikler kullanılamaz.
- Simgeleri ve uygulama meta verileri güncellenemiyor.
- Aynı tarayıcı kullanılsa bile birçok kez yüklenebilir. Bu durumda tümü aynı örneği işaret eder ve aynı depolama alanını kullanır.
QuickApps
Huawei ve ZTE gibi bazı üreticiler, PWA'lara benzeyen ancak farklı bir teknoloji yığını kullanan basit web uygulamaları oluşturmak için QuickApps olarak bilinen bir platform sunar. Huawei tarayıcı gibi bu cihazlardaki bazı tarayıcılar, QuickApp yığınını kullanmasanız bile QuickApp olarak paketlenen PWA'ları yükleyebilir.
PWA'nız QuickApp olarak yüklendiğinde, kullanıcılar kısayollarda olacaklarına benzer bir deneyim yaşarlar ancak QuickApps simgesiyle rozetli bir simge (şimşek resmi) görüntülenir. Uygulama, QuickApp Center'dan da başlatılabilir.
Yükleme isteniyor
Masaüstü ve Android cihazlardaki Chromium tabanlı tarayıcılarda, tarayıcının yükleme iletişim kutusunu PWA'nızdan tetikleyebilirsiniz. Yükleme İstemi bölümünde, bu işleme ilişkin kalıplar ve bunların nasıl uygulanacağı ele alınmaktadır.
Uygulama katalogları ve mağazaları
Erişimini artırmak ve kullanıcıların diğer uygulamaları buldukları yerde bulabilmelerini sağlamak için PWA'nız uygulama kataloglarında ve mağazalarda da listelenebilir. Çoğu uygulama kataloğu ve mağaza, web uygulamasının tamamını (HTML ve öğeleriniz gibi) içermeyen bir paket yayınlamanıza olanak tanıyan teknolojileri destekler. Bu teknolojiler, uygulamayı yükleyecek ve hizmet çalışanının gerekli öğeleri önbelleğe almasını sağlayacak bağımsız bir web oluşturma motoru için yalnızca bir başlatıcı oluşturmanıza olanak tanır.
PWA yayınlamayı destekleyen uygulama katalogları ve mağazalar şunlardır:
- Güvenilir Web Etkinliği kullanarak Android ve ChromeOS için Google Play Store.
- iOS, macOS ve iPadOS için Apple App Store (WKWebView ve App-Bound Domains kullanılarak).
- Windows 10 ve 11 için Microsoft Store (APPX paketlerini kullanarak)
- Samsung Galaxy Store'u (Samsung Galaxy Store) kullanabilirsiniz.
- HTML uygulamanız için bir QuickApp kapsayıcısı kullanan Huawei AppGallery.
Uygulama kataloglarına ve mağazalarına PWA yayınlama hakkında daha fazla bilgi edinmek istiyorsanız BubbleWrap CLI ve PWA Builder'a göz atın.