İlk adımlar
Progresif Web Uygulamaları hâlâ gelişmiş özellik ve yeteneklere sahip web siteleridir. Belirli bir teknoloji yığınına bağlı değildirler ve yeni bir siteyle sıfırdan başlayabilir veya mevcut web sitenizi tam bir revizyondan güncellemeden güncelleyebilirsiniz. Bu kılavuzda, PWA kalıbının iyi bir uygulamasını nasıl oluşturacağınızı öğreneceksiniz. Başlamanıza yardımcı olacak bazı stratejileri aşağıda bulabilirsiniz:
Yüklenebilir hale getirin
Küçük adımlarla başlayın! Bu yaklaşım temel bir manifest dosyasıyla başlamayı, basit bir çevrimdışı sayfayı ve çevrimdışı sayfayı sunmak ve bazı kritik CSS ve JavaScript'leri önbelleğe almak için bir hizmet çalışanı içerir. Kritik CSS ve JavaScript önbelleğe alma sayesinde, mevcut web uygulamanızın performansını artırırken çevrimdışı çalışmak için hazır hale getirirsiniz.
Bir özelliğe odaklanma
Kullanıcılarınızı veya işletmenizi önemli ölçüde etkileyecek yeni bir özellik (ör. push bildirimleri veya dosya işleme) seçin. Bu sayede, tek seferde çok fazla değişiklik yapmadan PWA havuzuna uygun hareket edebilirsiniz.
Basit bir sürüm oluşturma
Uygulamanızın mevcut bir bölümünü veya video oynatma ya da biniş kartına erişim gibi belirli bir kullanıcı yolculuğunu alın ve bağımsız veya bağlam içinde çevrimdışı öncelikli bir PWA olarak ön sırta çalışmasını sağlayın. Böylece PWA'larla, kullanıcılarınızın deneyimini yeniden tasarlayabileceğiniz, riskli bir deneme yapabilirsiniz.
Baştan başlayın
Web sitenizi yeniden tasarlayacaksanız veya sıfırdan başlayacaksanız bu strateji çok mantıklıdır. Diğer stratejilere kıyasla PWA tasarım kalıplarını daha kolay bir şekilde oluşturmanızı sağlar. Özellikle de Service Worker'ların tüm avantajlarından en başından faydalanmanıza olanak tanır.
Mağazadaki uygulamaları yeni sürüme geçirme
Uygulama mağazalarında PWA yayınlama olanağı sayesinde PWA'nızı bir PWA başlatıcıya sarabilir ve Google Play Store veya Windows Store gibi mağazalara yükleyebilirsiniz. Platforma özel bir uygulamanız varsa bunu mağazada yayınlanan PWA'nızla değiştirebilirsiniz.
Bu yaklaşımla, mevcut kullanıcılarınız deneyimleri PWA'ya (Progresif Web Uygulaması) yükseltilir ve yeni kullanıcılar da tarayıcıdan veya uygulama mağazalarından PWA'yı kullanabilir ya da yükleyebilir. Böylece herkes için tek bir uygulamaya sahip olursunuz. Bu da maliyet tasarrufu sağlar, zamandan tasarruf eder ve kullanıcı deneyimini iyileştirir.
PWA kontrol listesi
Progresif Web Uygulaması ne zaman şu soruyu doğurur bir web sitesidir: Bu uygulama ne zaman progresif web uygulamasına dönüşür? Yanıt o kadar basit değil. PWA kavramı belirli bir teknolojiye veya yığına gönderme yapmadığından, PWA bunun yerine çeşitli teknik bileşenleri içeren bir kalıptır.
Tüm tarayıcılar arasında benzersiz kurallar olmasa da kullanıcıların seveceği bir PWA oluşturmanıza yardımcı olacak Progresif Web Uygulaması Kontrol Listesi adlı bir dizi öneri vardır.
Temel koşullar
PWA'lar mobilden masaüstüne kadar tüm cihazları kapsadığından, temel Progresif Web Uygulaması Kontrol Listesi, ekran boyutundan veya giriş türünden bağımsız olarak uygulamanızı tüm kullanıcılar için yüklenebilir ve güvenilir hale getirmek üzere yapmanız gerekenlerle ilgilidir.
Temel gereksinimler şunlardır:
Hızlı başlar, hızlı kalır
Performans, çevrimiçi deneyimlerin başarısında önemli bir rol oynar. Çünkü yüksek performans gösteren siteler, düşük performanslı sitelere göre kullanıcıların ilgisini daha çok çeker ve onları daha iyi tutar. Siteler, kullanıcı odaklı performans metrikleri için optimizasyona odaklanmalıdır.
Tüm tarayıcılarda çalışır
Progresif Web Uygulamaları öncelikle web uygulamalarıdır, yani bu uygulamalardan yalnızca birinde değil, farklı tarayıcılarda çalışması gerekir. Ancak deneyimin tüm tarayıcılarda aynı olması gerekmez. İyi bir deneyim için bir yedek ile birlikte, bir tarayıcı tarafından desteklenmeyen özellikler olabilir.
Her ekran boyutuna duyarlı
Kullanıcılar PWA'nızı tüm ekran boyutlarında kullanabilir ve tüm içerik her görüntü alanı boyutunda kullanılabilir.
Özel bir çevrimdışı sayfa sağlar
Kullanıcılar çevrimdışıyken onları PWA'nızda tutmak, varsayılan tarayıcı çevrimdışı sayfasına dönmeye kıyasla daha sorunsuz ve yerel bir deneyim sunar.
Yüklenebilir
Ana ekranlarına uygulama yükleyen veya ana ekranlarına uygulama ekleyen kullanıcılar, bu uygulamalarla daha fazla etkileşimde bulunma eğilimindedir ve PWA yüklendiğinde daha iyi bir kullanıcı deneyimi sağlamak üzere daha fazla özellikten yararlanabilir.
Optimum PWA özellikleri
Sınıfının en iyisi olduğunu hissettiren gerçekten harika bir Progresif Web Uygulaması oluşturmak için temel yapılacaklar listesinden daha fazlasına ihtiyacınız vardır. Progresif Web Uygulaması için optimum yapılacaklar listesi, web'i güçlü kılan unsurlardan yararlanırken PWA'nızı yetenekli ve güvenilir hale getirmekle ilgilidir.
Çevrimdışı deneyim sağlar
Kullanıcıların çevrimdışıyken PWA'nızı kullanmalarına izin vererek onlar için uygulama benzeri, özgün bir deneyim oluşturursunuz. Bunu yapmak için, bağlantı gerektirmeyen özellikleri belirleyerek kullanıcıların en azından bazı işlevlere erişmelerini sağlayın.
Tamamen erişilebilir olmalıdır
Uygulamadaki tüm içeriğin ve etkileşimlerin ekran okuyucular tarafından anlaşıldığından, yalnızca klavyeyle kullanılabildiğinden, odağın belirtildiğinden ve renk kontrastının güçlü olduğundan emin olun. PWA'nızı erişilebilir hale getirerek herkes için kullanılabilir olmasını sağlarsınız.
Mevcut olduğu durumlarda güçlü özelliklerden yararlanır
Push mesajlaşma, WASM ve WebGL'den dosya sistemi erişimine, kişi seçicilere ve uygulama mağazalarıyla entegrasyona kadar pek çok özellik mevcuttur. Son derece yetenekli ve kapsamlı bir şekilde entegre edilmiş PWA'lar oluşturmaya yönelik araçları burada bulabilirsiniz. Bu araçlar, daha önce platform uygulamaları için ayrılmış olan ve kullanıcılarınızın istedikleri yere götürebilecekleri tam özellikli bir kullanıcı deneyimi oluşturmanızı sağlar.
Arama yoluyla keşfedilebilir
Tüm web sitesi trafiğinin yarısından fazlası organik aramadan gelmektedir. İçerik için standart URL'lerin bulunduğundan ve arama motorlarının sitenizi dizine ekleyebildiğinden emin olmak, kullanıcıların PWA'nızı bulması açısından çok önemlidir.
Tüm giriş türleriyle çalışır
Kullanıcılar uygulamanızı sorunsuz bir şekilde kullanırken giriş türleri arasında geçiş yapabilmelidir ve giriş yöntemleri ekran boyutuna bağlı olmamalıdır.
İzin istekleri için bağlam bilgisi sunar.
Kullanıcının istemleri kabul etme olasılığını artırmak için bağlam içi gerekçe sağladıktan sonra bildirimler, coğrafi konum ve kimlik bilgileri gibi izin istemlerini yalnızca tetikleyin.
Sağlıklı kod için en iyi uygulamaları izler
Uygulamanızı güncel ve kod tabanınızı iyi durumda tutmak, bu yapılacaklar listesinde belirtilen diğer hedefleri karşılayan yeni özellikler sunmanızı kolaylaştırır.