İyi bir progresif web uygulaması olmak için neler gerekir?

Pete LePage
Sam Richard

Progresif Web Uygulamaları (PWA), tek bir kod tabanıyla herkese, her yerde, her cihazdan birine ulaşırken gelişmiş özellikler, güvenilirlik ve yüklenebilirlik sunmak için modern API'lerle geliştirilmiş ve geliştirilmiştir. Mümkün olan en iyi deneyimi oluşturmanıza yardımcı olması için size yol gösterecek temel ve optimum kontrol listeleri ile önerileri kullanın.

Temel Progresif Web Uygulaması kontrol listesi

Progresif Web Uygulaması Kontrol Listesi, bir uygulamayı boyuttan veya giriş türünden bağımsız olarak tüm kullanıcılar tarafından yüklenebilir ve kullanılabilir kılan unsurları açıklar.

Hızlı başlar, hızlı kalır

Performans, tüm çevrimiçi deneyimlerin başarısında önemli bir rol oynar. Çünkü, yüksek performans gösteren siteler, düşük performans gösterenlere göre kullanıcıları daha çok etkileşime geçirir ve korur. Siteler, kullanıcı odaklı performans metrikleri için optimizasyona odaklanmalıdır.

Neden

Hız, kullanıcıların uygulamanızı kullanmalarını sağlamak için çok önemlidir. Hatta sayfa yüklenme süreleri bir saniyeden on saniyeye çıktığında kullanıcıların siteden hemen çıkma olasılığı %123 artıyor. Performans sadece load etkinliği ile sona ermez. Kullanıcılar, etkileşimlerinin (örneğin, düğme tıklama) kaydedilip kaydedilmediğini hiçbir zaman sorgulamamalıdır. Kaydırma ve animasyon yumuşak olmalıdır. Performans, kullanıcıların uygulamanızı algılama biçiminden uygulamanızın performansına kadar tüm deneyiminizi etkiler.

Tüm uygulamaların farklı ihtiyaçları olsa da Lighthouse'daki performans denetimleri Core Web Vitals'ı temel alır ve bu denetimlerdeki yüksek puanlar, kullanıcılarınızın keyifli bir deneyim yaşama ihtimalini artırır. Web uygulamanızın gerçek dünya performans verilerini almak için PageSpeed Insights veya Chrome Kullanıcı Deneyimi Raporu'nu da kullanabilirsiniz.

Yöntem

PWA'nızın hızlı başlamasını ve hızlı kalmasını nasıl sağlayacağınızı öğrenmek için hızlı yükleme süreleri rehberimizi takip edin.

Tüm tarayıcılarda çalışır

Kullanıcılar, yüklenmeden önce web uygulamanıza erişmek için diledikleri tarayıcıyı kullanabilir.

Neden

Progresif Web Uygulamaları öncelikle web uygulamalarıdır ve bu, uygulamaların yalnızca bir tanesinde değil, tüm tarayıcılarda çalışması gerektiği anlamına gelir.

Dayanıklı Web Tasarımı'ndaki Jeremy Keith'in dediği gibi, bunu yapmanın etkili bir yolu, temel işlevi tanımlamak, mümkün olan en basit teknolojiyi kullanarak bu işlevselliği kullanılabilir hale getirmek ve ardından mümkün olduğunda deneyimi geliştirmektir. Çoğu durumda bu, temel işlevi oluşturmak için sadece HTML ile başlamak ve daha ilgi çekici bir deneyim oluşturmak üzere CSS ve JavaScript ile kullanıcı deneyimini geliştirmek anlamına gelir.

Örneğin form gönderme işlemini ele alalım. Bunu uygulamanın en basit yolu, POST isteği gönderen bir HTML formudur. Bunu oluşturduktan sonra, form doğrulaması yapmak ve formu AJAX kullanarak göndermek için JavaScript ile deneyimi geliştirebilir ve destekleyebilecek kullanıcıların deneyimini iyileştirebilirsiniz.

Kullanıcılarınızın sitenizde farklı cihaz ve tarayıcılarda deneyim yaşayacağını unutmayın. Yelpazenin en üst kısmını hedefleyemezsiniz. Özellik algılamayı kullanarak, bugün mevcut olmayabilecek tarayıcıları ve cihazları kullananlar da dahil olmak üzere en geniş potansiyel kullanıcı yelpazesi için kullanılabilir bir deneyim sunabilirsiniz.

Yöntem

Jeremy Keith'in Dayanıklı Web Tasarımı, bu tarayıcılar arası progresif metodolojiyle web tasarımı hakkında nasıl düşünüleceğini açıklayan mükemmel bir kaynak.

Ek kaynaklar

Her ekran boyutuna duyarlı

Kullanıcılar PWA'nızı tüm ekran boyutlarında kullanabilir ve içeriğinizin tamamı her görüntü alanı boyutunda kullanılabilir.

Neden

Cihazlar çeşitli boyutlarda olabilir ve kullanıcılar uygulamanızı aynı cihazda da olsa farklı boyutlarda kullanabilir. Bu nedenle, içeriğinizin yalnızca görüntü alanına sığmasının yanı sıra sitenizdeki tüm özellik ve içeriğin tüm görüntü alanı boyutlarında kullanılabilir olmasını sağlamanız büyük önem taşır.

Görüntü alanı boyutu, kullanıcıların tamamlamak istedikleri görevler ve erişmek istedikleri içerik değişmez. İçerik farklı görüntü alanı boyutlarında yeniden düzenlenebilir ve bir şekilde tüm görüntüler bu boyutlarda olmalıdır. Aslında, Luke Wroblewski'nin Mobile First kitabında belirttiği gibi, küçük adımlarla başlayıp büyük ilerlemek sitenin tasarımını iyileştirebilir:

Mobil cihazlar, yazılım geliştirme ekiplerinin bir uygulamadaki yalnızca en önemli verilere ve işlemlere odaklanmasını gerektirir. 320x480 piksel bir ekranda fazladan gereksiz öğeler için yer yoktur. Öncelik vermelisiniz.

Yöntem

Duyarlı tasarımla ilgili pek çok kaynak vardır. Bunlar arasında Ethan Marcotte'nin orijinal makalesi, bu konuyla ilgili önemli kavramlardan oluşan bir koleksiyon, çok sayıda kitap ve konuşma bulunmaktadır. Bu tartışmayı, duyarlı tasarımın içerik boyutlarına indirgemek için içerik öncelikli tasarım ve içerik hariç tutma duyarlı düzenleri inceleyebilirsiniz. Son olarak, konu mobil ile ilgili olsa da Josh Clark'ın Seven Deadly Mobile Myths adlı kitabında verdiği dersler, duyarlı sitelerin küçük boyutlu görünümleri için mobil cihazlar kadar alakalıdır.

Ö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 bir deneyim sağlar.

Neden

Kullanıcılar, yüklü uygulamaların bağlantı durumlarından bağımsız olarak çalışmasını bekler. Platforma özgü bir uygulama çevrimdışıyken hiçbir zaman boş sayfa göstermemelidir ve progresif web uygulaması ise tarayıcının varsayılan çevrimdışı sayfasını hiçbir zaman göstermemelidir. Hem kullanıcı önbelleğe alınmamış bir URL'ye gittiğinde hem de bağlantı gerektiren bir özelliği kullanmaya çalıştığında özel bir çevrimdışı deneyim sunmak, web deneyiminizin, üzerinde çalıştığı cihazın bir parçası gibi hissetmesine yardımcı olur.

Yöntem

Bir hizmet çalışanının install etkinliği sırasında, daha sonra kullanmak üzere özel bir çevrimdışı sayfayı önbelleğe alabilirsiniz. Bir kullanıcı çevrimdışı olursa önceden önbelleğe alınmış özel çevrimdışı sayfayla yanıt verebilirsiniz. Bunun bir örneğini görmek ve kendi başınıza nasıl uygulayacağınızı öğrenmek için özel çevrimdışı sayfa örneğimizi takip edebilirsiniz.

Yüklenebilir

Cihazlarına uygulama yükleyen veya ekleyen kullanıcılar, bu uygulamalarla daha fazla etkileşimde bulunma eğilimindedir.

Neden

İleri Web Uygulamaları yüklemek, diğer tüm yüklü uygulamalar gibi görünmesini, tarzını yansıtmasını ve davranmasını sağlar. Kullanıcıların diğer uygulamalarını başlattığı yerden başlatılır. Tarayıcıdan ayrı olarak kendi uygulama penceresinde çalışır ve diğer uygulamalarda olduğu gibi görev listesinde görünür.

Kullanıcıların PWA'nızı yüklemesini neden istersiniz? Aynı nedenle, kullanıcıların uygulamanızı bir uygulama mağazasından yüklemesini istemenin nedeni de budur. Uygulamalarınızı yükleyen kullanıcılar en ilgili kitlenizdir ve genelde mobil cihazlardaki uygulama kullanıcılarıyla aynı orandadır. Bu sayı, tipik ziyaretçilerden daha iyi etkileşim metriklerine sahiptir. Bu metrikler arasında yinelenen ziyaretlerin sayısı, sitenizde geçirilen ziyaretlerin daha uzun olması ve dönüşüm oranlarının yükselmesi yer alır.

Yöntem

PWA'nızı yüklenebilir hale getirmeyi, yüklenebilir olup olmadığını test etmeyi ve kendiniz yapmayı öğrenmek için yüklenebilir kılavuzumuzu izleyebilirsiniz.

Progresif Web Uygulaması için optimum yapılacaklar listesi

Sınıfının en iyisi olduğunu hissettiren 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, PWA'nızı üzerinde çalıştığı cihazın bir parçası gibi hissettirmek ve web'i güçlü kılan unsurlardan yararlanmaktır.

Çevrimdışı deneyim sağlar

Bağlantının kesinlikle gerekli olmadığı durumlarda uygulamanız çevrimdışı olarak aynı şekilde çalışır.

Neden

Kullanıcılar, özel bir çevrimdışı sayfa sağlamanın yanı sıra Progresif Web Uygulamalarının çevrimdışı olarak da kullanılabilmesini beklerler. Örneğin, seyahat ve hava yolu uygulamalarında çevrimdışıyken seyahat ayrıntıları ve biniş kartları bulunmalıdır. Müzik, video ve podcast uygulamaları internet bağlantısı olmadan oynatılabilir. Sosyal uygulamalar ve haber uygulamaları, kullanıcıların çevrimdışıyken okuyabilmeleri için son içerikleri önbelleğe almalıdır. Kullanıcılar çevrimdışıyken de kimlik doğrulamasının yapılmış olmasını bekler. Bu nedenle, çevrimdışı kimlik doğrulama için tasarım yapın. Çevrimdışı PWA, kullanıcılara uygulama benzeri gerçek bir deneyim sunar.

Yöntem

Kullanıcılarınızın çevrimdışı olarak çalışması beklenen özellikleri belirledikten sonra içeriğinizi kullanılabilir ve çevrimdışı bağlamlara uyarlanabilir hale getirmeniz gerekir. Ayrıca, verileri depolamak ve almak için tarayıcı içi bir NoSQL depolama sistemi olan IndexedDB'yi ve kullanıcıların çevrimdışıyken işlem yapmasına ve kullanıcı tekrar stabil bir bağlantıya sahip olana kadar sunucu iletişimlerini ertelemesine olanak tanıyan arka plan senkronizasyonunu kullanabilirsiniz. Hizmet çalışanları, internet bağlantısı olmadan kullanım için resim, video dosyaları ve ses dosyaları gibi diğer içerik türlerini depolamak amacıyla da kullanılabilir. Kullanıcı deneyimi açısından bakıldığında, yükleme sırasında kullanıcılara hız ve içerik algısı sağlayan iskelet ekranları kullanabilirsiniz. Bu ekranlar, gerektiğinde önbelleğe alınan içeriğe veya çevrimdışı bir göstergeye geri dönebilir.

Tamamen erişilebilir olmalıdır

Tüm kullanıcı etkileşimleri WCAG 2.0 erişilebilirlik gereksinimlerini karşılar.

Neden

Hayatlarının bir noktasında çoğu kişi PWA'nızdan WCAG 2.0 erişilebilirlik gereksinimleri kapsamına giren bir şekilde yararlanmak ister. İnsanların PWA'nızla etkileşime geçme ve onu anlama becerisi farklı özelliklere sahiptir ve geçici ya da kalıcı olabilir. PWA'nızı erişilebilir hale getirerek herkes için kullanılabilir olmasını sağlarsınız.

Yöntem

W3C'nin Web Erişilebilirliğine Giriş başlıklı makale iyi bir başlangıç noktasıdır. Erişilebilirlik testlerinin büyük çoğunluğu manuel olarak yapılmalıdır. Lighthouse, axe ve Accessibility Insights'taki Erişilebilirlik denetimleri, bazı erişilebilirlik testlerini otomatikleştirmenize yardımcı olabilir. Anlamsal olarak doğru öğeleri (örneğin, a ve button öğeleri) kendiniz yeniden oluşturmak yerine kullanmanız da önemlidir. Bu, daha gelişmiş işlevler oluşturmanız gerektiğinde erişilebilir beklentilerin (ne zaman ok veya ne zaman ok kullanılacağı gibi) karşılanmasını sağlar. A11Y Beslenme Kartları bazı yaygın bileşenler için bu konuda mükemmel tavsiyeler sunar.

PWA'nız arama yoluyla keşfedilebilir.

Neden

Web'in en büyük avantajlarından biri, siteleri ve uygulamaları arama yoluyla keşfedebilmektir. Aslında, tüm web sitesi trafiğinin yarıdan 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ı bulabilmesi açısından çok önemlidir. Bu, özellikle istemci taraflı oluşturma kullanılırken geçerlidir.

Yöntem

Her URL'nin benzersiz, açıklayıcı bir başlığı ve meta açıklaması olduğundan emin olarak başlayın. Ardından, PWA'nızın keşfedilebilirliğiyle ilgili hataları ayıklamanıza ve sorunları gidermenize yardımcı olması için Lighthouse'daki Google Search Console ve Arama Motoru Optimizasyonu denetlemelerini kullanabilirsiniz. Ayrıca Bing veya Yandex web yöneticisi araçlarını kullanabilir ve PWA'nıza Schema.org'daki şemaları kullanarak yapılandırılmış veri eklemeyi düşünebilirsiniz.

Tüm giriş türleriyle çalışır

PWA'nız fare, klavye, ekran kalemi veya dokunmayla eşit şekilde kullanılabilir.

Neden

Cihazlar çeşitli giriş yöntemleri sunar ve kullanıcılar uygulamanızı kullanırken bunlar arasında sorunsuz bir şekilde geçiş yapabilmelidir. Aynı derecede önemli olan giriş yöntemleri de ekran boyutuna bağlı olmamalıdır. Diğer bir deyişle, büyük görüntü alanlarının dokunmayı desteklemesi, küçük görüntü alanlarının ise klavyeleri ve fareleri desteklemesi gerekir. Uygulamanızın ve tüm özelliklerinin, kullanıcınızın kullanmayı tercih edebileceği herhangi bir giriş yönteminin kullanımını desteklediğinden emin olun. Gerektiğinde, deneyimleri girişe özgü kontrollere de (ör. yenilemek için çekme gibi) olanak tanıyacak şekilde geliştirmelisiniz.

Yöntem

İşaretçi Etkinlikleri API, çeşitli giriş seçenekleriyle çalışmak için birleşik bir arayüz sunar ve özellikle ekran kalemi desteği eklemek için idealdir. Hem dokunma hem de klavyeyi desteklemek için doğru semantik öğeleri (sabitler, düğmeler, form kontrolleri vb.) kullandığınızdan ve bunları anlamsal olmayan HTML ile yeniden oluşturmadığınızdan emin olun. Fareyle üzerine gelindiğinde etkinleşen etkileşimleri eklerken, bu etkileşimlerin de tıklama veya dokunmayla etkinleştirilebildiğinden emin olun.

İzin istekleri için bağlam bilgisi sunar.

Güçlü API'leri kullanmak için izin istediğinizde bağlam sağlayın ve yalnızca API'ye ne zaman ihtiyaç duyduğunuzu sorun.

Neden

Bildirimler, coğrafi konum ve kimlik bilgileri gibi bir izin istemini tetikleyen API'ler, etkinleştirme gerektiren güçlü işlevlerle ilgili olma eğiliminde olduklarından kullanıcıları rahatsız edecek şekilde kasıtlı olarak tasarlanmıştır. Bu istemleri, sayfanın yüklenmesi gibi ek bağlam olmadan tetiklemek, kullanıcıların bu izinleri kabul etme ve gelecekte bunlara güvenmeme olasılıklarını artırır. Bunun yerine, bu istemleri yalnızca kullanıcıya neden bu izne ihtiyacınız olduğuna dair bağlamsal bir gerekçe sağladıktan sonra tetikleyin.

Yöntem

İzin Kullanıcı Deneyimi makalesi ve UX Planet'in Kullanıcılardan İzin İstemenin Doğru Yolları mobil ortama odaklansa da tüm PWA'lar için geçerli olan izin istemlerini nasıl tasarlayacağınızı anlamak için iyi kaynaklardır.

Sağlıklı kod için en iyi uygulamaları izler

Kod tabanınızı sağlıklı tutmak, hedeflerinize ulaşmayı ve yeni özellikler sunmayı kolaylaştırır.

Neden

Modern bir web uygulaması oluşturmak için çok fazla çaba sarf etmeniz gerekir. 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.

Yöntem

İyi bir kod tabanı sağlamak için çok sayıda yüksek öncelikli denetim vardır: bilinen güvenlik açıklarına sahip kitaplıkları kullanmaktan kaçınma, kullanımdan kaldırılmış API'leri kullanmadığınızdan emin olma, web anti kalıplarını (document.write() kullanma veya pasif olmayan kaydırma etkinlik işleyicileri kullanma gibi) kod tabanınızdan kaldırma ve hatta analizler veya diğer üçüncü taraf kitaplıkların yüklenmemesi durumunda PWA'nızın bozulmaması için savunma amaçlı kodlama yapma. Birden çok tarayıcı ve sürüm kanalında hata analizi yapmanın yanı sıra otomatik testler yapma gibi statik kod analizini gerekli kılmayı düşünün. Bu teknikler, hataların üretime geçmeden önce yakalanmasına yardımcı olabilir.