Önceden uygulama yükleme işlemi yalnızca platforma özgü uygulamalar bağlamında yapılabiliyordu. Günümüzde modern web uygulamaları, platforma özgü uygulamalarla aynı düzeyde entegrasyon ve güvenilirlik sağlayan yüklenebilir deneyimler sunar.
Bunu farklı şekillerde yapabilirsiniz:
- PWA'yı tarayıcıdan yükleme
- PWA'yı uygulama mağazasından yüklemek.
Farklı dağıtım kanallarına sahip olmak, çok sayıda kullanıcıya ulaşmanın güçlü bir yoludur ancak PWA'nızın yüklenmesini tanıtmak için doğru stratejiyi seçmek zor olabilir.
Bu kılavuzda, yükleme oranlarını artırmak ve platform rekabeti ile kendi gelirini olumsuz etkilemeyi önlemek için farklı yükleme seçeneklerini birleştirmeyle ilgili en iyi uygulamalar incelenmektedir. Ele alınan yükleme fırsatları arasında hem tarayıcıdan hem de App Store'dan yüklenen PWA'ların yanı sıra platforma özel uygulamalar da yer alır.
Web uygulamanızı neden yüklenebilir hale getirmelisiniz?
Yüklenen 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 raftan başlatılabilir. Uygulama değiştiriciyi kullanarak cihazları bir cihazda arayıp aralarında geçiş yapabilirsiniz. Böylece, yüklü oldukları cihazın bir parçası gibi hissederler.
Ancak hem yüklenebilir bir web uygulamasına hem de platforma özel bir uygulamaya sahip olmak kullanıcıların kafasını karıştırabilir. Bazı kullanıcılar için platforma özel uygulamalar en iyi seçenek olsa da bazıları için bazı dezavantajlar sunabilir:
- 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, özellikle düşük segment cihaz kullanıcıları için dezavantajlıdır.
- Mevcut bant genişliği: Bir uygulamanın indirilmesi maliyetli ve yavaş bir işlem olabilir. Bu durum, yavaş bağlantılara ve pahalı veri planlarına sahip kullanıcılar için daha da fazla sorun teşkil edebilir.
- Sorun: Web sitesinden ayrılıp uygulamayı indirmek için mağazaya gitmek daha fazla zorluk yaratır ve kullanıcının doğrudan web'de gerçekleştirebileceği işlemleri geciktirir.
- Güncelleme döngüsü: Platforma özgü uygulamalarda değişiklik yapmak için bir uygulama inceleme sürecinden geçmesi gerekebilir. Bu da değişiklikleri ve denemeleri (örneğin, A/B testlerini) yavaşlatabilir.
Bazı durumlarda, platforma özgü uygulamanızı indirmeyecek kullanıcıların yüzdesi yüksek olabilir. Örneğin, uygulamanızı çok sık kullanmayacağını düşünen veya birkaç megabayt depolama alanı ya da veri harcamaya değmez. Bu segmentin boyutunu birkaç şekilde belirleyebilirsiniz. Örneğin, "yalnızca mobil web" yüzdesini izlemek için bir analiz kurulumu kullanarak bu segmentin boyutunu belirleyebilirsiniz. yardımcı olur.
Bu segmentin boyutunun kayda değer olması, deneyimlerinizi yüklemek için alternatif yollar sağlamanız gerektiğini iyi bir şekilde gösterir.
PWA'nızın tarayıcı üzerinden yüklenmesini teşvik etme
Yüksek kaliteli bir PWA'nız varsa platforma özgü uygulamanızın üzerine yüklenmesini tanıtmak daha iyi olabilir. Örneğin, platforma özgü uygulamada PWA'nızın sunduğu işlevler eksikse veya uygulama bir süredir güncellenmemiş olabilir. 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ı uygulamalar için platforma özgü uygulama yüklemelerini artırmak iş modelinin önemli bir parçasıdır. Bu durumda, platforma özgü 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 ("yedek olarak PWA" adını verdiğimiz) gösterilebilir.
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 cihazda ise bir mini bilgi çubuğu gösterir:
Bu, bazı deneyimler için yeterli olsa da hedefiniz PWA'nızın yüklenmesini sağlamaksa BeforeInstallPromptEvent'yı 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ı olumsuz etkilemesini önleyin
Bazı durumlarda platforma özgü uygulamanızın yüklenmesini PWA'nız yerine tanıtmayı seçebilirsiniz ancak bu durumda yine de kullanıcıların PWA'nızı yüklemesine izin verecek 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 ve yüklü bir deneyim yaşamasını sağlar.
Bu stratejiyi uygulamanın ilk adımı, kullanıcıya PWA'nız için yükleme tanıtımını ne zaman göstereceğinize dair buluşsal bir yöntem tanımlamaktır.
Örnek: PWA kullanıcısı, platforma özel uygulama yükleme istemini gören ancak platforma özel uygulamayı yüklememiş olan kullanıcıdır. Siteye en az beş kez geri gelmiş veya uygulama banner'ını tıklamış ancak bunun yerine web sitesini kullanmaya devam etmişlerdir.
Daha sonra, buluşsal yöntem aşağıdaki şekilde uygulanabilir:
- Platforma özel uygulama yükleme banner'ını göster.
- Kullanıcı banner'ı kapatırsa bu bilgiyi 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"). - Kullanıcının "PWA kullanıcısı" olarak kabul edilip edilmediğini belirlemek için çerezlerde önceden depolanan bilgileri
getInstalledRelatedApps()API ile birlikte kullananisPWAUser()gibi bir işlev yazın. - Kullanıcı anlamlı bir işlem gerçekleştirdiğinde
isPWAUser()işlevini çağırın. İşlev true değerini döndürürse ve PWA yükleme istemi daha önce kaydedilmişse PWA yükleme düğmesini gösterebilirsiniz.
Uygulama mağazası üzerinden PWA'nızın yüklenmesini teşvik etme
Uygulama mağazalarına yönelik uygulamalar, PWA teknikleri gibi farklı teknolojilerle oluşturulabilir. PWA'yı yerel ortamlarla birleştirme bölümünde, bu amaç için 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 oluşturulur. Boyutları platforma göre değişir, ancak Android'de genellikle 10 MB'ın, iOS'te ise 30 MB'ın üzerindedir. PWA'nız yoksa veya platforma özgü uygulama daha kapsamlı bir özellik grubu sunuyorsa platforma özel uygulamanızı tanıtmak isteyebilirsiniz.
- Hafif uygulamalar: Bu uygulamalar, platforma özel kodla da geliştirilebilir. Ancak genellikle web teknolojisiyle derlenir ve platforma özel bir sarmalayıcı içinde paketlenir. Tam PWA'lar da mağazalara yüklenebilir. (Bu konu, bu makalenin ileride ele alınmaktadır.) Bazı şirketler bunları "basit" olarak sağlamayı tercih eder ve diğerleri, en önemli (temel) uygulamalarında da bu yaklaşımı kullandı.
Hafif Uygulamaları Tanıtma
Bir Google Play araştırmasına göre, bir APK'nın boyutuna getirilen her 6 MB'lık artışta yükleme dönüşüm oranı %1 azalıyor. Bu da 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!
Bazı şirketler bu sorunu çözmek için Güvenilir Web Etkinlikleri'ni (TWA) kullanarak Play Store'da uygulamalarının basit bir sürümünü sunmak için PWA'larından yararlanıyor. TWA'lar, PWA'nızı web görünümü gibi bir bileşenle sarmalar. Elde edilen uygulama boyutu genellikle birkaç megabayt olur.
Hindistan'ın en büyük konaklama şirketlerinden biri olan Oyo, uygulamanın basit sürümünü geliştirdi ve TWA aracılığıyla Play Store'da kullanıma sundu. Bu makalenin yazıldığı tarihte Oyo uygulamasının boyutu yalnızca 850 KB (Android uygulamasının boyutunun sadece% 7'si) idi. Uygulama yüklendikten sonra Android uygulamasından ayırt edilemez:
Oyo hem en önemli oyuncuyu hem de "lite"yı korudu mağazadaki uygulama sürümleri ile kullanıcılarına seçenek sağlar.
Hafif bir web deneyimi sunma
Sezgisel olarak, eski teknolojiye sahip cihaz kullanıcıları, ileri teknoloji telefon kullanıcılarına kıyasla uygulamaların hafif sürümlerini indirmeye daha eğilimli olabilir. Bu nedenle, bir kullanıcının cihazını tanımlamak mümkünse ağır platforma özgü uygulama sürümüne göre basit 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'lerini veya istemci ipuçlarını kullanarak farklı yollarla elde edebilirsiniz.
JavaScript'i 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 tahmin edilebilir. Önceki kodu, istemci ipuçlarıyla cihaz belleği için nasıl uygulayabileceğiniz aşağıda açıklanmıştır:
İlk olarak tarayıcıya, herhangi bir birinci taraf isteği için HTTP yanıtının başlığında cihaz bellek ipuçları almak istediğinizi söyleyin:
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ının cihazının kategorisine sahip bir çerezi depolamak için arka uçlarınızda 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şleştirmek için kendi mantığınızı oluşturun ve her destek kaydında 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 simge bulundurma yeteneği, uygulamaların en ilgi çekici özelliklerinden biridir. Önceden bu olanağın yalnızca uygulama mağazalarından yüklenen uygulamalarda mümkün olduğu göz önünde bulundurulduğunda, ş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ılara uygulama yükleme imkanı tanımak için, mağazalarda basit uygulama deneyimleri sunmak ve kullanıcıların doğrudan web sitesinden yapmalarını isteyerek PWA'ları ana ekrana eklemelerini sağlamak gibi daha fazla seçenek mevcuttur.