Uygulama yükleme işlemi geçmişte yalnızca platforma özel uygulamalar bağlamında mümkündü. Günümüzde modern web uygulamaları, platforma özel uygulamalarla aynı düzeyde entegrasyon ve güvenilirlik sunan yüklenebilir deneyimler sunuyor.
Bunu farklı şekillerde yapabilirsiniz:
- PWA'yı tarayıcıdan yükleme.
- PWA'yı uygulama mağazasından yükleme.
Farklı dağıtım kanallarına sahip olmak çok sayıda kullanıcıya ulaşmanın etkili bir yoludur ancak PWA'nızın yüklemesini tanıtmak için doğru stratejiyi seçmek zor olabilir.
Bu kılavuzda, yükleme oranlarını artırmak, platform rekabetini ve kanibalizasyonu önlemek için farklı yükleme seçeneklerini bir araya getirmeyle ilgili en iyi uygulamalar ele alınmaktadır. Hem tarayıcıdan hem de App Store'dan yüklenen PWA'lar ve platforma özel uygulamalar, kapsanan yükleme teklifleri arasındadır.
Web uygulamanızı neden yüklenebilir hale getirmelisiniz?
Yüklü Progresif Web Uygulamaları, tarayıcı sekmesi yerine bağımsız bir pencerede çalışır. Bu uygulamalar kullanıcının ana ekranından, dock'undan, görev çubuğundan veya rafından başlatılabilir. Uygulamalar, cihazda aranabilir ve uygulama değiştirici ile aralarında geçiş yapılabilir. Böylece, yüklü oldukları cihazın bir parçası gibi hissedilebilirler.
Ancak hem yüklenebilir bir web uygulamasına hem de platforma özel bir uygulamaya sahip olmak kullanıcılar için kafa karıştırıcı olabilir. Platforma özel uygulamalar bazı kullanıcılar için en iyi seçenek olabilir ancak diğer kullanıcılar için bazı dezavantajları olabilir:
- Depolama alanı kısıtlamaları: Yeni bir uygulama yüklemek, diğer uygulamaları silmek veya değerli içerikleri kaldırarak yer açmak anlamına gelebilir. Bu durum özellikle düşük kaliteli cihazlarda bulunan kullanıcılar için dezavantajlıdır.
- Mevcut bant genişliği: Uygulama indirme işlemi, özellikle yavaş bağlantılar ve pahalı veri planları kullanan kullanıcılar için maliyetli ve yavaş bir süreç olabilir.
- Sorun: Bir web sitesinden ayrılıp uygulama indirmek için bir mağazaya geçmek ek sorun oluşturur ve doğrudan web'de gerçekleştirilebilecek bir kullanıcı işlemini geciktirir.
- Güncelleme döngüsü: Platforma özgü uygulamalarda değişiklik yapmak için uygulama inceleme sürecini tamamlamanız gerekebilir. Bu da değişiklikleri ve denemeleri (ör. A/B testleri) yavaşlatabilir.
Bazı durumlarda, platforma özel uygulamanızı indirmeyen kullanıcıların yüzdesi yüksek olabilir. Örneğin, uygulamayı çok sık kullanmayacaklarını düşünen veya birkaç megabayt depolama alanı ya da veri harcamayı haklı bulamayan kullanıcılar bu gruba girer. Bu segmentin boyutunu çeşitli yöntemlerle belirleyebilirsiniz. Örneğin, "yalnızca mobil web" kullanıcılarının yüzdesini izlemek için bir analiz ayarı kullanabilirsiniz.
Bu segmentin boyutu önemliyse deneyimlerinizi yüklemenin alternatif yollarını sağlamanız gerektiğine dair iyi bir göstergedir.
PWA'nızın tarayıcı üzerinden yüklenmesini teşvik etme
Yüksek kaliteli bir PWA'nız varsa platforma özel uygulamanız yerine PWA'nızın yüklenmesini tanıtmak daha iyi olabilir. Örneğin, platforma özel uygulamada PWA'nız tarafından sunulan işlevler eksikse veya uygulama bir süredir güncellenmemişse. Platforma özel uygulama ChromeOS gibi daha büyük ekranlar için optimize edilmemişse PWA'nızın yüklenmesini tanıtmak da yararlı olabilir.
Bazı uygulamalar için platforma özel uygulama yüklemelerini artırmak iş modelinin önemli bir parçasıdır. Bu durumda, platforma özel uygulamanızın yüklenmesini tanıtmak mantıklı bir iş kararıdır. Ancak bazı kullanıcılar web'de kalmayı daha rahat bulabilir. Bu segment tanımlanabiliyorsa PWA istemi yalnızca bu segmente gösterilebilir ("Yedek olarak PWA" olarak adlandırdığımız şey).
Birincil yüklenebilir deneyim olarak PWA
Bir PWA, yüklenebilirlik ölçütlerini karşıladığında çoğu tarayıcı, PWA'nın yüklenebilir olduğunu belirten bir gösterge gösterir. Örneğin, masaüstü Chrome'da adres çubuğunda yüklenebilecek bir simge, mobil cihazlarda ise mini bilgi çubuğu gösterilir:
Bu, bazı deneyimler için yeterli olabilir ancak amacınız PWA'nızın yükleme sayısını artırmaksa BeforeInstallPromptEvent'u dinlemenizi ve PWA'nızın yüklemesini tanıtma kalıplarını uygulamanızı önemle tavsiye ederiz.
PWA'nızın platforma özgü uygulama yükleme oranınızı düşürmesini engelleme
Bazı durumlarda, platforma özel uygulamanızın yüklenmesini PWA'nızdan daha fazla öne çıkarmayı tercih edebilirsiniz. Ancak bu durumda bile, kullanıcıların PWA'nızı yüklemesine olanak tanıyan bir mekanizma sağlamanızı öneririz. Bu yedek seçenek, platforma özel uygulamanızı yükleyemeyen veya yüklemek istemeyen kullanıcıların benzer bir yüklü deneyim yaşamasını sağlar.
Bu stratejiyi uygulamanın ilk adımı, kullanıcıya PWA'nız için yükleme promosyonunu ne zaman göstereceğinize dair bir sezgisel kural tanımlamaktır.
Örneğin: PWA kullanıcısı, platforma özel uygulama yükleme istemini görmüş ve platforma özel uygulamayı yüklememiş olan bir kullanıcıdır. Bu kullanıcı, siteye en az beş kez geri dönmüş veya uygulama banner'ını tıklamış ancak bunun yerine web sitesini kullanmaya devam etmiştir.
Ardından, sezgisel yöntem aşağıdaki şekilde uygulanabilir:
- Platforma özel uygulama yükleme banner'ını gösterin.
- Kullanıcı banner'ı kapatırsa bu bilgileri içeren bir çerez ayarlayın (ör.
document.cookie = "app-install-banner=dismissed"). - Siteye yapılan kullanıcı ziyaretlerinin sayısını izlemek için başka bir çerez kullanın (ör.
document.cookie = "user-visits=1"). - Bir kullanıcının "PWA kullanıcısı" olarak kabul edilip edilmeyeceğini belirlemek için daha önce çerezlerde depolanan bilgileri
getInstalledRelatedApps()API ile birlikte kullananisPWAUser()gibi bir işlev yazın. - Kullanıcı anlamlı bir işlem yaptığında
isPWAUser()işlevini çağırın. İşlev doğru değerini döndürüyorsa ve PWA yükleme istemi daha önce kaydedilmişse PWA yükleme düğmesini gösterebilirsiniz.
PWA'nızın uygulama mağazasından yüklenmesini tanıtma
Uygulama mağazaları için uygulamalar, PWA teknikleri dahil olmak üzere farklı teknolojilerle geliştirilebilir. PWA'yı yerel ortamlara entegre etme başlıklı makalede, bu amaçla kullanılabilecek teknolojilerin bir özetini bulabilirsiniz.
Bu bölümde, mağazadaki uygulamaları iki gruba ayıracağız:
- Platforma özel uygulamalar: Bu uygulamalar çoğunlukla platforma özel kodla geliştirilir. Boyutları platforma bağlıdır ancak genellikle Android'de 10 MB'ın, iOS'te ise 30 MB'ın üzerindedir. PWA'nız yoksa veya platforma özel uygulama daha kapsamlı bir özellik grubu sunuyorsa platforma özel uygulamanızı tanıtmak isteyebilirsiniz.
- Hafif uygulamalar: Bu uygulamalar platforma özel kodla da oluşturulabilir ancak genellikle web teknolojisiyle oluşturulur ve platforma özel bir sarmalayıcıya paketlenir. Mağazalara tam PWA'lar da yüklenebilir. (Bu konu bu makalenin sonraki bölümlerinde ele alınmıştır.) Bazı şirketler bunları "basit" deneyimler olarak sunmayı tercih ederken diğerleri bu yaklaşımı ana (temel) uygulamaları için de kullanmıştır.
Hafif Uygulamaları Tanıtma
Google Play tarafından yapılan bir araştırmaya göre, APK'nın boyutundaki her 6 MB'lık artış, yükleme dönüşüm oranında %1'lik düşüşe neden oluyor. Bu, 10 MB boyutunda bir uygulamanın indirme tamamlanma oranının 100 MB boyutunda bir uygulamadan yaklaşık% 30 daha yüksek olabileceği anlamına gelir.
Bazı şirketler bu sorunu çözmek için Güvenilir Web Etkinlikleri'ni (TWA) kullanarak uygulamalarının Play Store'da hafif bir sürümünü sunmak üzere PWA'larından yararlanıyor. TWA'lar, PWA'nızı web görünümü benzeri bir bileşene sarar ve ortaya çıkan uygulama boyutu genellikle yalnızca birkaç megabayttır.
Hindistan'ın en büyük konaklama şirketlerinden biri olan Oyo, uygulamasının Lite sürümünü oluşturdu ve TWA kullanarak Play Store'da kullanıma sundu. Bu makale yazıldığı sırada Oyo uygulaması yalnızca 850 KB'dı. Yani Android uygulamasının yalnızca% 7'si kadardı. Yüklendikten sonra da Android uygulamasından ayırt edilemez:
Oyo, hem ana hem de "basit" uygulama sürümlerini mağazada tutarak kullanıcılarına seçim imkanı sundu.
Hafif bir web deneyimi sunma
Düşük kaliteli cihazlarda bulunan kullanıcılar, yüksek kaliteli telefonlardaki kullanıcılara kıyasla uygulamaların hafif sürümlerini indirmeye daha eğilimli olabilir. Bu nedenle, kullanıcının cihazını tanımlamak mümkünse hafif uygulama yükleme banner'ına, platforma özel daha ağır uygulama sürümüne göre öncelik verebilirsiniz.
Web'de cihaz sinyalleri elde edilebilir ve bunlar yaklaşık olarak cihaz kategorileriyle eşlenebilir (ör. "yüksek", "orta" veya "düşük"). Bu bilgileri JavaScript API'lerini veya istemci ipuçları kullanarak farklı şekillerde edinebilirsiniz.
JavaScript kullanma
navigator.hardwareConcurrency, navigator.deviceMemory ve navigator.connection gibi JavaScript özelliklerini kullanarak sırasıyla cihazın CPU, bellek ve ağ durumu hakkında bilgi edinebilirsiniz. Örneğin:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
İstemci ipuçlarını kullanma
Cihaz sinyalleri, istemci ipuçları aracılığıyla HTTP istek başlıklarında da çıkarılabilir. Cihaz belleği için önceki kodu istemci ipuçlarıyla nasıl uygulayabileceğiniz aşağıda açıklanmıştır:
Öncelikle tarayıcıya, herhangi bir birinci taraf isteği için HTTP yanıtının üst bilgisinde cihaz belleği ipuçları almak istediğinizi bildirin:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Ardından, HTTP isteklerinin istek üst bilgisinde Device-Memory bilgilerini almaya başlarsınız:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Bu bilgileri, kullanıcının cihazının kategorisini içeren bir çerez depolamak için arka uçlarınızda kullanabilirsiniz:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Son olarak, bu bilgileri cihaz kategorileriyle eşlemek için kendi mantığınızı oluşturun ve her durumda ilgili uygulama yükleme istemini gösterin:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Sonuç
Kullanıcının ana ekranında bir simge bulundurma özelliği, uygulamaların en etkileşimli özelliklerinden biridir. Geçmişte bu yalnızca uygulama mağazalarından yüklenen uygulamalar için mümkün olduğundan, şirketler bir uygulama mağazası yükleme banner'ı göstermenin kullanıcıları deneyimlerini yüklemeye ikna etmek için yeterli olacağını düşünebilir. Şu anda kullanıcıların uygulama yüklemesine izin vermek için daha fazla seçenek mevcuttur. Örneğin, mağazalarda hafif uygulama deneyimleri sunabilir ve kullanıcıları doğrudan web sitesinden uygulama yüklemeye yönlendirerek ana ekrana PWA eklemelerine izin verebilirsiniz.