Yayınlanma tarihi: 12 Mayıs 2020
Geçmişte uygulama yükleme 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 sağlayan 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ı, geniş bir kullanıcı tabanına ulaşmanın harika bir yoludur. Ancak PWA'nızın yüklenmesini teşvik etmek için doğru stratejiyi seçmek zor olabilir.
Bu kılavuzda, yükleme oranlarını artırmak ve platform rekabeti ile kanibalizasyonu önlemek için farklı yükleme seçeneklerini birleştirme ile ilgili en iyi uygulamalar ele alınmaktadır. Kapsanan yükleme teklifleri arasında hem tarayıcıdan hem de App Store'dan yüklenen PWA'lar ve platforma özel uygulamalar 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. Kullanıcının ana ekranından, dock'undan, görev çubuğundan veya rafından başlatılabilir. Bu uygulamaları cihazda arayabilir ve uygulama değiştiriciyle aralarında geçiş yapabilirsiniz. Böylece, yüklendikleri cihazın bir parçası gibi görünürler.
Ancak hem yüklenebilir bir web uygulamasının hem de platforma özgü bir uygulamanın olması 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 için diğer uygulamaları silmeniz veya değerli içerikleri kaldırarak yer açmanız gerekebilir. Bu durum, özellikle düşük seviyeli cihazlardaki kullanıcılar için dezavantajlıdır.
- Kullanılabilir bant genişliği: Bir uygulamayı indirmek, yavaş bağlantı kullanan ve pahalı veri planlarına sahip kullanıcılar için daha da maliyetli ve yavaş bir süreç olabilir.
- Sorun: Bir web sitesinden ayrılıp uygulama indirmek için mağazaya gitmek ek sorunlara yol açar ve doğrudan web'de gerçekleştirilebilecek bir kullanıcı işlemini geciktirir.
- Güncelleme döngüsü: Platforma özel uygulamalarda değişiklik yapmak için uygulama inceleme sürecinden geçmek gerekebilir. 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 kullanmayacağını düşünen veya birkaç megabayt depolama alanı ya da veri harcamayı haklı bulmayan kullanıcılar. Bu segmentin boyutunu çeşitli şekillerde 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üklemek için alternatif yöntemler sunmanız gerektiği anlaşılır.
Tarayıcıda PWA'nızın 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ın sunduğu işlevler eksikse veya uygulama bir süredir güncellenmemişse. Platforma özgü uygulama, ChromeOS gibi daha büyük ekranlar için optimize edilmediyse PWA'nızın yüklenmesini teşvik etmek de faydalı 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ı olacaktır. Ancak bazı kullanıcılar web'de kalmayı tercih edebilir. Bu segment tanımlanabiliyorsa PWA istemi yalnızca bu kullanıcılara gösterilebilir. Buna yedek olarak PWA diyoruz.
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 gösterir. Örneğin, masaüstü Chrome, adres çubuğunda yüklenebilir bir simge gösterir. Mobil cihazlarda ise mini bilgi çubuğu gösterir:
Bu, bazı deneyimler için yeterli olsa da hedefiniz PWA'nızın yüklenmesini sağlamaksa BeforeInstallPromptEvent dinlemenizi ve PWA'nızın yüklenmesini teşvik etme kalıplarını uygulamanızı önemle tavsiye ederiz.
PWA'nızın platforma özel uygulama yükleme oranınızı olumsuz etkilemesini önleme
Bazı durumlarda, platforma özel uygulamanızın yüklenmesini PWA'nızın yüklenmesine tercih edebilirsiniz. Ancak, 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 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ı göstereceğiniz zamanla ilgili bir sezgisel yöntem tanımlamaktır.
Örneğin, PWA kullanıcısı, platforma özel uygulamanızın yükleme istemini görmüş ancak uygulamayı yüklememiş bir kullanıcı olabilir. Kullanıcılar sitenize beş veya daha fazla kez geri dönebilir, uygulama banner'ını tıklayabilir ancak web sitesini kullanmaya devam edebilir.
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"). - Kullanıcının PWA kullanıcısı olarak kabul edilip edilmediğini belirlemek için
getInstalledRelatedApps()API'nin yanı sıra daha önce çerezlerde depolanan bilgileri kullananisPWAUser()gibi bir işlev yazın. - Kullanıcı anlamlı bir işlem gerçekleştirdiğinde
isPWAUser()işlevini çağırın. İşlev doğru değerini döndürürse ve PWA yükleme istemi daha önce kaydedilmişse PWA yükleme düğmesini gösterebilirsiniz.
PWA'nızın uygulama mağazasında yüklenmesini sağlama
Uygulama mağazası uygulamaları, PWA teknikleri de dahil olmak üzere çeşitli teknolojilerle oluşturulabilir. Blending PWA into native environments (PWA'yı yerel ortamlara entegre etme) başlıklı makalede bu amaçla kullanılabilecek teknolojilerin bir özetini bulabilirsiniz.
Mağazadaki uygulamalar iki grupta sınıflandırılabilir:
- Platforma özel uygulamalar: Bu uygulamalar genellikle platforma özel kodlarla geliştirilir. Uygulama boyutu platforma bağlı olarak değişir ancak genellikle Android'de 10 MB'tan, iOS'te ise 30 MB'tan büyüktür. PWA'nız yoksa veya platforma özgü uygulama daha eksiksiz bir özellik seti sunuyorsa platforma özgü uygulamanızı tanıtmak isteyebilirsiniz.
- Hafif uygulamalar: Bu uygulamalar platforma özel kodlarla da oluşturulabilir ancak genellikle web teknolojisiyle oluşturulur ve platforma özel bir sarmalayıcı içinde paketlenir. Tam PWA'lar da mağazaya yüklenebilir. Bazı şirketler bunları "lite" deneyimler olarak sunmayı tercih ederken bazıları da bu yaklaşımı amiral gemisi (temel) uygulamaları için kullanmıştır.
Küçük boyutlu uygulamaları tanıtma
Bir Google Play çalışmasına göre, bir APK'nın boyutundaki her 6 MB'lık artış, yükleme dönüşüm oranında %1'lik düşüşe neden oluyor. Bu nedenle, 10 MB'lık bir uygulamanın indirme tamamlanma oranı, 100 MB'lık bir uygulamadan yaklaşık % 30 daha yüksek olabilir.
Bu sorunu çözmek için bazı şirketler, Güvenilir Web Etkinlikleri'ni (TWA) kullanarak Play Store'da uygulamalarının 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 sonuçta ortaya çıkan uygulama boyutu genellikle yalnızca birkaç megabayt olur.
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. Mayıs 2020 itibarıyla Oyo uygulaması yalnızca 850 KB boyutundaydı. Bu, Android uygulamasının boyutunun yalnızca% 7'siydi. Yüklendikten sonra ise Android uygulamasından ayırt edilemiyordu:
Oyo, hem ana hem de "lite" uygulama sürümlerini mağazada tutarak kullanıcılarına seçenek sundu.
Hafif bir web deneyimi sunma
Düşük seviye cihazlardaki kullanıcılar, yüksek seviye telefonlardaki kullanıcılara kıyasla uygulamaların hafif sürümlerini indirmeye daha yatkın olabilir. Bu nedenle, kullanıcının cihazı tanımlanabiliyorsa platforma özel daha ağır uygulama sürümü yerine hafif uygulama yükleme banner'ına öncelik verebilirsiniz.
Web'de cihaz sinyalleri elde etmek ve bunları yaklaşık olarak cihaz kategorileriyle ("yüksek", "orta" veya "düşük" gibi) eşlemek mümkündür. Bu bilgileri JavaScript API'lerini veya istemci ipuçlarını kullanarak farklı şekillerde edinebilirsiniz.
JavaScript kullanma
navigator.hardwareConcurrency, navigator.deviceMemory ve navigator.connection gibi JavaScript özellikleri sayesinde 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ından da çıkarılabilir. İstemci ipuçlarıyla cihaz belleği için önceki kodu nasıl uygulayabileceğinizi aşağıda bulabilirsiniz.
Tarayıcıya, birinci taraf isteği için HTTP yanıtının üstbilgisinde cihaz belleği ipuçları almak istediğinizi söyleyin:
HTTP/1.1 200 OK Content-Type: text/html Accept-CH: Device-MemoryHTTP isteklerinin istek başlığında
Device-Memorybilgilerini almaya başlarsınız:GET /main.js HTTP/1.1 Device-Memory: 0.5Kullanıcının cihazının kategorisini içeren bir çerez depolamak için bu bilgileri arka uçlarınızda kullanın:
app.get('/route', (req, res) => { // Determine device category const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full'; // Set cookie res.setCookie('Device-Category', deviceCategory); … });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 }
Kullanıcıların platformdan bağımsız olarak uygulamanızı yüklemesine izin verme
Kullanıcının ana ekranında simge bulundurma özelliği, uygulamaların en ilgi çekici özelliklerinden biridir. Geçmişte bu yalnızca uygulama mağazalarından yüklenen uygulamalar için mümkündü. Bu nedenle şirketler, kullanıcıları deneyimlerini yüklemeye ikna etmek için uygulama mağazası yükleme banner'ı göstermenin yeterli olacağını düşünebilir.
Kullanıcılara uygulamaları yükleme olanağı sunmak için daha fazla seçenek vardır. Örneğin, mağazalarda hafif uygulama deneyimleri sunabilir ve kullanıcıların doğrudan web sitesinden yapmalarını isteyerek PWA'ları ana ekrana eklemelerine izin verebilirsiniz.