Geçmişte, yalnızca platforma özgü uygulamalar söz konusu olduğunda uygulama yüklenebiliyordu. Günümüzde modern web uygulamaları, platforma özgü uygulamalarla aynı düzeyde entegrasyon ve güvenilirlik sağlayan yüklenebilir deneyimler sunuyor.
Bunu farklı yollarla 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 güçlü bir yoludur, ancak PWA yüklemenizi tanıtmak için doğru stratejiyi seçmek zor olabilir.
Bu kılavuzda, yükleme oranlarını artırmak ve platform rekabeti ile zarar görmesini önlemek için farklı yükleme seçeneklerini birleştirmeyle ilgili en iyi uygulamalar incelenmektedir. Ele alınan yükleme teklifleri, hem tarayıcıdan hem de App Store'dan yüklenen PWA'ların yanı sıra platforma özel uygulamaları içerir.
Web uygulamanızı neden yüklenebilir hale getirmelisiniz?
Yüklü Progresif Web Uygulamaları, tarayıcı sekmesi yerine bağımsız bir pencerede çalışır. Bunlar kullanıcının ana ekranından, yuvadan, görev çubuğundan veya rafından başlatılabilir. Bu uygulamaları bir cihazda arayabilir ve uygulama değiştiriciyi kullanarak aralarında geçiş yapabilirsiniz. Bu sayede, yüklü oldukları cihazın bir parçası gibi hissedebilirsiniz.
Ancak hem yüklenebilir bir web uygulaması hem de platforma özel bir uygulamaya sahip olmak kullanıcılar için kafa karıştırıcı olabilir. Bazı kullanıcılar için platforma özel uygulamalar en iyi seçenek olsa da bazıları için bazı dezavantajlar söz konusu olabilir:
- Depolama alanı kısıtlamaları: Yeni bir uygulama yüklemek, diğer kullanıcıları silmek veya değerli içerikleri kaldırarak yer açmak anlamına gelebilir. Bu durum özellikle eski teknolojiye sahip cihazların kullanıcıları için dezavantajlı bir durumdur.
- Kullanılabilir bant genişliği: Bir uygulamanın indirilmesi maliyetli ve yavaş bir işlem olabilir. Bu, yavaş bağlantıya ve pahalı veri paketine sahip kullanıcılar için daha da zordur.
- Sorun: Web sitesinden ayrılıp uygulama indirmek için mağazaya gitmek, daha fazla soruna neden olur ve doğrudan web'de gerçekleştirilebilecek kullanıcı işlemini geciktirir.
- Güncelleme döngüsü: Platforma özgü uygulamalarda değişiklik yapmak, uygulama inceleme sürecinden geçmeyi gerektirebilir. Bu da değişiklikleri ve denemeleri (ör. A/B testleri) yavaşlatabilir.
Bazı durumlarda, platforma özel uygulamanızı indirmeyecek kullanıcıların yüzdesi yüksek olabilir. Örneğin, uygulamayı çok sık kullanmayacaklarını düşünen veya birkaç megabaytlık depolama alanı ya da veri harcamaya değmez kullanıcılar gibi. Bu segmentin boyutunu birkaç şekilde belirleyebilirsiniz. Örneğin, "yalnızca mobil web" kullanıcılarının yüzdesini izlemek için bir Analytics kurulumu kullanabilirsiniz.
Bu segmentin boyutu çok büyükse, deneyimlerinizi yüklemek için alternatif yollar sağlamanız gerektiğinin iyi bir göstergesidir.
Tarayıcı üzerinden PWA'nızın yüklenmesini teşvik etme
Yüksek kaliteli bir PWA'nız varsa, platforma özel uygulamanız yerine bu uygulamanın yüklenmesini tanıtmak daha iyi olabilir. Örneğin, platforma özgü uygulamada PWA'nız tarafından sunulan işlevler yoksa veya bir süredir güncellenmemişse. Platforma özgü uygulama, ChromeOS gibi daha büyük ekranlar için optimize edilmemişse PWA'nızın yüklenmesini teşvik etmeniz de yararlı olabilir.
Bazı uygulamalarda, platforma özgü uygulama yüklemelerini artırmak iş modelinin önemli bir parçasıdır. Bu durumda, platforma özel uygulamanızın yüklenmesini teşvik etmek iş açısından mantıklıdır. Ancak bazı kullanıcılar web'de kalmak konusunda daha rahat olabilir. Bu segment tanımlanabiliyorsa PWA istemi yalnızca onlara gösterilebilir ("PWA yedek olarak").
Yüklenebilir birincil deneyim olarak PWA
PWA yüklenebilirlik ölçütlerini karşıladığında çoğu tarayıcı, PWA'nın yüklenebilir olduğuna dair bir gösterge gösterir. Örneğin, masaüstü Chrome'un adres çubuğunda yüklenebilir bir simge, mobil cihazlarda ise mini bilgi çubuğu görüntülenir:
Bu bazı deneyimler için yeterli olsa da hedefiniz PWA'nızın daha fazla yüklenmesini sağlamaksa BeforeInstallPromptEvent önerilerini dinlemenizi ve PWA'nızın yüklemesini tanıtma kalıplarını takip etmenizi önemle tavsiye ederiz.
PWA'nızın platforma özel uygulama yükleme oranınızı olumsuz etkilemesini önleyin
Bazı durumlarda, PWA'nız yerine platforma özel uygulamanızın yüklenmesini teşvik etmeyi seçebilirsiniz. Ancak bu durumda, kullanıcıların PWA'nızı yüklemesine izin vermek için bir mekanizma sağlamanızı öneririz. Bu yedek seçenek, platforma özgü uygulamanızı yükleyemeyen veya yüklemek istemeyen kullanıcıların benzer bir yüklü deneyim yaşamasına olanak tanır.
Bu stratejiyi uygulamanın ilk adımı, kullanıcıya PWA'nız için ne zaman yükleme promosyonu göstereceğinize ilişkin buluşsal bir yöntem tanımlamaktır.
Örnek: PWA kullanıcısı, platforma özgü uygulama yükleme istemini görüp platforma özgü uygulamayı yüklememiş olan bir kullanıcıdır. En az beş kez siteye geri gelmiş veya uygulama banner'ını tıklamış ancak bunun yerine web sitesini kullanmaya devam etmişlerdir.
Ardından, buluşsal yöntem aşağıdaki şekilde uygulanabilir:
- Platforma özel uygulama yükleme banner'ını göster.
- Kullanıcı banner'ı kapatırsa bu bilgileri içeren bir çerez ayarlayın (ör.
document.cookie = "app-install-banner=dismissed"). - Kullanıcıların siteye yaptığı ziyaretlerin 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 edilmediğini belirlemek için
getInstalledRelatedApps()API'siyle birlikte çerezlerde önceden depolanan bilgileri kullananisPWAUser()gibi bir işlev yazın. - Kullanıcı anlamlı bir işlem gerçekleştirdiğinde
isPWAUser()adlı kullanıcıyı çağırın. İşlev true döndürürse ve PWA yükleme istemi daha önce kaydedilmişse PWA yükleme düğmesini gösterebilirsiniz.
PWA'nızın yüklenmesini bir uygulama mağazası üzerinden tanıtma
Uygulama mağazaları için uygulamalar, PWA teknikleri dahil olmak üzere farklı teknolojilerle oluşturulabilir. PWA'yı yerel ortamlarla harmanlama bölümünde, bu amaçla kullanılabilecek teknolojilerin özetini bulabilirsiniz.
Bu bölümde, mağazadaki uygulamaları iki grup halinde sınıflandıracağız:
- Platforma özel uygulamalar: Bu uygulamalar çoğunlukla platforma özel kodla oluşturulur. Boyutları platforma bağlıdır, ancak genelde Android'de 10 MB'tan, iOS'ta ise 30 MB'tan büyüktür. PWA'nız yoksa veya platforma özgü uygulama daha kapsamlı bir özellik grubu sunuyorsa platforma özgü uygulamanızı tanıtmak isteyebilirsiniz.
- Hafif uygulamalar: Bu uygulamalar da platforma özel kodla oluşturulabilir, ancak genellikle web teknolojisi ile oluşturulur ve platforma özel bir sarmalayıcı içine yerleştirilir. Tam PWA'lar da mağazalara yüklenebilir. (Bu, bu makalenin ilerleyen bölümlerinde ele alınmaktadır.) Bazı şirketler bunları "basit" deneyimler olarak sunmayı tercih ederken diğerleri amiral (temel) uygulamalarında da bu yaklaşımı kullanıyor.
Hafif Uygulamaları Tanıtma
Bir Google Play çalışmasına göre, APK'nın boyutunda her 6 MB'lık artış için yükleme dönüşüm oranı %1 azalıyor. Bu, 10 MB'lık bir uygulamanın indirme tamamlanma oranının 100 MB'lık bir uygulamadan yaklaşık% 30 daha yüksek olabileceği anlamına gelir!
Bu sorunu çözmek için bazı şirketler, Güvenilir Web Etkinlikleri'ni (TWA) kullanarak Play Store'da uygulamalarının basit bir sürümünü sunmak için PWA'dan (TWA) faydalanıyor. TWA'lar, PWA'nızı web görünümü benzeri bir bileşenle sarmalar ve sonuçta elde edilen uygulama boyutu genellikle yalnızca birkaç megabayt olur.
Hindistan'ın en büyük konaklama şirketlerinden biri olan Oyo, uygulamasının basit bir sürümünü oluşturdu ve TWA kullanarak Play Store'da kullanıma sundu. Bu makalenin yazıldığı sırada Oyo uygulaması yalnızca 850 KB boyutundaydı ve Android uygulamasının yalnızca% 7'si boyutundaydı. Ayrıca, yüklendikten sonra, Android uygulamasından ayırt edemiyorlar:
Oyo, kullanıcılara hem amiral gemisi hem de "lite" uygulama sürümlerini sunmaya devam etti.
Basit bir web deneyimi sunma
Sezgisel olarak, düşük teknolojiye sahip cihazlardaki kullanıcılar, ileri teknoloji telefonlara kıyasla uygulamaların hafif sürümlerini indirmeye daha meyilli olabilir. Bu nedenle, bir kullanıcının cihazını tanımlamak mümkünse platforma özel daha ağır uygulama sürümüne kıyasla hafif uygulama yükleme banner'ına öncelik verebilirsiniz.
Web'de cihaz sinyalleri almak ve bunları cihaz kategorileriyle (ör. "yüksek", "orta" veya "düşük") yaklaşık olarak eşlemek mümkündür. Bu bilgileri, JavaScript API'larını veya istemci ipuçlarını kullanarak farklı yöntemlerle edinebilirsiniz.
JavaScript'i kullanma
navigator.hardwareConcurrency, navigator.deviceMemory ve navigator.connection gibi JavaScript özelliklerini kullanarak cihazın CPU, bellek ve ağ durumu hakkında bilgi alabilirsiniz. Ö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 tahmin edilebilir. Önceki kodu, istemci ipuçlarıyla cihaz belleği için nasıl uygulayabileceğiniz aşağıda açıklanmıştır:
Öncelikle, herhangi bir birinci taraf isteği için HTTP yanıtının başlığında cihaz bellek ipuçlarını almak istediğinizi tarayıcıya bildirin:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Ardından, HTTP isteklerinin istek başlığında Device-Memory bilgilerini almaya başlarsınız:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Kullanıcı cihazının kategorisine sahip bir çerez depolamak için arka uçlarınızdaki bu bilgileri 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 örnekte 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 simgenin bulunması, uygulamaların en ilgi çekici özelliklerinden biridir. Geçmişte bu işlem yalnızca uygulama mağazalarından yüklenen uygulamalarda mümkün olduğu için şirketler, 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 bulunmaktadır. Örneğin, mağazalarda hafif uygulama deneyimleri sunmak ve kullanıcıların doğrudan web sitesinden yapmasını isteyerek PWA'ları ana ekrana eklemelerini sağlamak.