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

Yüksek performanslı siteler, kötü performans gösterenlere kıyasla kullanıcıların ilgisini daha çok çeker ve kullanıcıları daha uzun süre elde tutar. Bu nedenle performans, online deneyimlerin başarısında önemli bir rol oynar. Kullanıcı odaklı performans metrikleri için optimizasyona odaklanın.

Neden?

Kullanıcıların uygulamanızı kullanmasını sağlamak için hız kritik öneme sahiptir. Hatta sayfa yüklenme süreleri bir saniyeden on saniyeye yükseldikçe kullanıcıların hemen çıkma olasılığı %123 artar. Performans, load etkinliğiyle sınırlı değildir. Kullanıcılar, etkileşimlerinin (ör. bir düğmeyi tıklama) kaydedilip kaydedilmediğini hiçbir zaman merak etmemelidir. Kaydırma ve animasyon sorunsuz olmalıdır. Performans, hem uygulamanızın davranışı hem de kullanıcıların onu algılama biçimi açısından deneyiminizin tamamını etkiler.

Tüm uygulamaların farklı ihtiyaçları olsa da Lighthouse'daki performans denetimleri Core Web Vitals'a göre yapılır ve bu denetimlerde yüksek puan almak kullanıcılarınızın keyifli bir deneyim yaşama ihtimalini artırır. Ayrıca, PageSpeed Insights'ı veya Chrome Kullanıcı Deneyimi Raporu'nu kullanarak web uygulamanızın gerçek dünyadan performans verilerini alabilirsiniz.

Nasıl?

PWA'nızın nasıl hızlı başlamasını ve hızlı kalmasını sağlayacağınızı öğrenmek için hızlı yükleme süreleriyle ilgili kılavuzumuzu izleyin.

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

Neden?

Progresif Web Uygulamaları öncelikli olarak web uygulamalarıdır ve bu nedenle tarayıcılar arasında çalışmaları gerekir.

Resilient Web Design ekibinden Jeremy Keith'e göre, bunu yapmanın etkili bir yolu temel özellikleri tanımlamak, bu özellikleri mümkün olan en basit teknolojiyle kullanıma sunmak ve sonra da mümkün olduğunda deneyimi geliştirmektir. Çoğu durumda bu, temel özellikleri oluşturmak için yalnızca HTML ile başlamak ve daha ilgi çekici bir deneyim oluşturmak için CSS ve JavaScript ile kullanıcı deneyimini geliştirmek anlamına gelir.

Örneğin, form gönderme sürecini 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 ile göndermek için JavaScript ile deneyimi geliştirebilirsiniz. Böylece, formu destekleyebilecek kullanıcılar için deneyimi geliştirebilirsiniz.

Kullanıcılarınız, sitenizi çok çeşitli cihazlarda ve tarayıcılarda deneyimliyor. Yalnızca bu spektrumun en üst kısmını hedefleyemezsiniz. Henüz mevcut olmayan tarayıcı ve cihazlar kullananlar da dahil olmak üzere mümkün olan en geniş potansiyel kullanıcı yelpazesine faydalı bir deneyim sunmak için özellik algılamayı kullanın.

Nasıl?

Jeremy Keith'in Resilient Web Design (Dayanıklı Web Tasarımı) eseri, farklı tarayıcılara sahip, progresif metodolojiyle web tasarımı üzerine nasıl düşünüleceğini açıklayan mükemmel bir kaynaktır.

Ek kaynaklar

• A List Apart'ın Progresif Geliştirmeyi Anlama başlıklı çalışması, konuya iyi bir giriş niteliğindedir.
• Smashing Magazine'in Progresif Geliştirmesi: Nedir ve Nasıl Kullanılır? , pratik bir giriş bölümü ve daha ileri düzey konuların bağlantılarını içerir.
• MDN'nin Özellik algılamayı uygulama makalesinde, bir özelliğin doğrudan sorgulanarak nasıl algılanacağı açıklanmaktadır.

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

Neden?

Cihazlar çeşitli boyutlarda olabilir ve kullanıcılar, uygulamanızı aynı cihazda bile farklı boyutlarda kullanabilirler. Bu nedenle, yalnızca içeriğinizin görüntü alanına sığdığından, sitenize ilişkin tüm özelliklerin ve içeriğin tüm görüntü alanı boyutlarında kullanılabildiğinden emin olmanız çok önemlidir.

Kullanıcıların tamamlamak istediği görevler ve erişmek istedikleri içerik, görüntü alanı boyutuyla değişmez. İçeriğinizi farklı görüntü alanı boyutlarına göre yeniden düzenleyebilirsiniz. Tümü bir şekilde orada olmalıdır. Hatta Luke Wroblewski'nin Mobile First adlı kitabında belirttiği gibi, küçük adımlarla başlayıp büyük ekranlar için tasarımınızı değiştirmek bir sitenin tasarımını iyileştirebilir:

Mobil cihazlar için yazılım geliştirme ekiplerinin bir uygulamadaki yalnızca en önemli verilere ve işlemlere odaklanması gerekir. 320x480 piksellik bir ekranda gereksiz ve fazladan öğeler için yer kalmaz. Öncelik vermeniz gerekir.

Nasıl?

Duyarlı tasarımla ilgili pek çok kaynak vardır. Ethan Marcotte'un orijinal makalesi ve bununla ilgili önemli kavramların yer aldığı bir koleksiyon, kitaplar ve konuşmalar gibi pek çok kaynak mevcuttur. Bu tartışmayı, duyarlı tasarımın içerik yönleriyle daraltmak için içerik öncelikli tasarım ve içerik dışlayan duyarlı düzenler konularına bakın. Son olarak, Josh Clark'ın Seven Deadly Mobile Myths kitabındaki dersler mobil odaklı olsa da duyarlı sitelerin küçük boyutlu görünümleri, genel olarak mobil cihazlarda olduğu kadar küçük boyutlu görünümler için de aynı derecede alakalıdır.

Kullanıcılar çevrimdışıyken onları PWA'nızda tutmak, varsayılan tarayıcının çevrimdışı sayfasına geri dönmekten daha sorunsuz bir deneyim sağlar.

Neden?

Kullanıcılar, bağlantı durumlarından bağımsız olarak yüklü uygulamaların çalışmasını bekler. Platforma özgü bir uygulama çevrimdışıyken hiçbir zaman boş sayfa göstermez ve PWA'lar hiçbir zaman tarayıcının varsayılan çevrimdışı sayfasını 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 çevrimdışı deneyim sağlamak, web deneyiminizin çalıştığı cihazın bir parçası gibi hissetmesine yardımcı olur.

Nasıl?

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

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

Neden?

Progresif Web Uygulaması yüklemek, yüklü diğer tüm uygulamalar gibi görünmesini, tarzını ve davranışını sağlar. Bu uygulama, kullanıcıların diğer uygulamalarını başlattığı yerden kullanıma sunuldu. Tarayıcıdan ayrı olarak kendi uygulama penceresinde çalışır ve diğer uygulamalarda olduğu gibi görev listesinde görünür.

Cihaza özel uygulamalarda olduğu gibi, uygulamalarınızı yükleyen kullanıcılar en fazla etkileşim kuran kitlenizdir ve genellikle mobil cihazlardaki uygulama kullanıcılarıyla benzer etkileşim metriklerine sahiptir. Bu metrikler arasında yinelenen ziyaret sayısının artması, sitenizde daha uzun süre kalma süreleri ve normal ziyaretçilere göre daha yüksek dönüşüm oranları yer alır.

Nasıl?

PWA'nızı nasıl yüklenebilir hale getireceğinizi öğrenmek için yüklenebilir kılavuzumuza başvurun.

Bağlantının kesinlikle gerekli olmadığı yerlerde uygulamanız, internet ortamında olduğu gibi çevrimdışı olarak da çalışır.

Neden?

Kullanıcılar, özel çevrimdışı sayfa sağlamanın yanı sıra PWA'ların çevrimdışı kullanılabilir olmasını da bekler. Örneğin, seyahat ve hava yolu uygulamalarında seyahat bilgileri ve biniş kartları çevrimdışıyken hazır olmalıdır. Müzik, video ve podcast uygulamaları çevrimdışı oynatmaya izin vermelidir. Sosyal medya ve haber uygulamaları, kullanıcıların çevrimdışıyken okuyabilmeleri için son içeriği önbelleğe almalıdır. Ayrıca kullanıcılar çevrimdışıyken de kimliklerinin doğrulanmasını bekler. Bu nedenle, çevrimdışı kimlik doğrulama için tasarım yapın. Çevrimdışı PWA, kullanıcılar için uygulama benzeri gerçek bir deneyim sağlar.

Nasıl?

Kullanıcılarınızın çevrimdışı çalışmayı hangi özellikleri beklediğini belirledikten sonra, içeriğinizi kullanılabilir ve çevrimdışı bağlamlara uyarlanabilir hale getirmeniz gerekir. Verileri depolayıp almak için tarayıcı içi bir NoSQL depolama sistemi olan IndexedDB'yi, kullanıcıların çevrimdışıyken işlem yapmasına izin vermek ve kullanıcı tekrar stabil bir bağlantıya sahip olana kadar sunucu iletişimlerini ertelemek için arka planda senkronizasyonu kullanabilirsiniz. Service Worker'ları resim, video dosyaları ve ses dosyaları gibi diğer içerik türlerini çevrimdışı kullanım için depolamak ve kullanıcıların kimliğinin doğrulanmasını sağlayacak güvenli ve uzun ömürlü oturumlar uygulamak için de kullanabilirsiniz. Kullanıcı deneyimi açısından bakıldığında, kullanıcılara yükleme sırasında hız ve içerik algısı sunan iskelet ekranlar kullanabilirsiniz. Bu ekranlar, gerektiğinde önbelleğe alınan içeriğe veya çevrimdışı göstergeye geri dönebilir.

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

Neden?

Çoğu kullanıcı, hayatının bir noktasında PWA'nızı WCAG 2.0 erişilebilirlik şartları kapsamında değerlendirilecek şekilde kullanmak ister. İnsanların PWA'nızla etkileşim kurma ve bunları anlama kapasitesi geniş bir yelpazededir ve ihtiyaçlar geçici ya da kalıcı olabilir. PWA'nızı erişilebilir hale getirerek herkes için kullanılabilir hale getirebilirsiniz.

Nasıl?

W3C'nin Web Erişilebilirliğine Giriş 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 gibi araçlar, bazı erişilebilirlik testlerini otomatikleştirmenize yardımcı olabilir. Ayrıca, bu öğeleri kendi başınıza yeniden oluşturmak yerine, a ve button öğelerini anlam açısından doğru şekilde kullanmanız da önemlidir. Bu sayede, daha gelişmiş özellikler oluşturmanız gerektiğinde (oklar ve sekmelerin ne zaman kullanılacağı gibi) erişilebilirlikle ilgili beklentilerin karşılanması sağlanır. A11Y Beslenme Kartları, yaygın bazı bileşenler için bu konuda mükemmel tavsiyeler sunuyor.

PWA'nız arama yaparak kolayca bulunabilir.

Neden?

Web'in en büyük avantajlarından biri, siteleri ve uygulamaları arama yoluyla keşfedebilme olanağıdır. Öyle ki, tüm web sitesi trafiğinin yarısından fazlası organik aramadan gelir. İçerik için standart URL'lerin bulunduğundan ve arama motorlarının sitenizi dizine ekleyebildiğinden emin olmak, potansiyel kullanıcıların PWA'nızı bulmasını sağlamak açısından çok önemlidir. Bu durum özellikle istemci taraflı oluşturma kullanılırken geçerlidir.

Nasıl?

Öncelikle her URL'nin benzersiz, açıklayıcı bir başlığı ve meta tanımı olduğundan emin olun. Ardından, PWA'nızla ilgili bulunabilirlik sorunlarını hata ayıklamak ve düzeltmek için Lighthouse'daki Google Search Console'u ve Arama Motoru Optimizasyonu denetimlerini kullanabilirsiniz. Ayrıca Bing veya Yandex'in site sahibi araçlarını kullanabilir ve PWA'nızda Schema.org'daki şemaları kullanarak yapılandırılmış veri ekleyebilirsiniz.

PWA'nız fare, klavye, ekran kalemi veya dokunarak da aynı ş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. Daha da önemlisi, giriş yöntemleri ekran boyutuna bağlı olmamalıdır. Büyük görüntü alanlarının dokunmayı, küçük görüntü alanlarının ise klavye ve fareleri desteklemesi gerekir. Uygulamanızın ve tüm özelliklerinin, kullanıcınızın seçebileceği tüm giriş yönteminin kullanımını desteklediğinden emin olun. Uygun olduğunda deneyimleri, girişe özgü kontrollere de (yenilemek için çekme gibi) izin verecek şekilde geliştirin.

Nasıl?

Pointer Events API çeşitli giriş seçenekleriyle çalışmak için birleştirilmiş bir arayüz sağlar ve özellikle ekran kalemi desteği eklemek için idealdir. Hem dokunma hem de klavyeyi desteklemek için doğru anlamsal öğ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ştirilen etkileşimler dahil edilirken, tıklama veya dokunmayla da etkinleştirilebildiğinden emin olun.

Güçlü API'leri kullanma izni isterken bağlam sağlayın ve yalnızca API'nin gerekli olduğu durumlarda sorun.

Neden?

Bildirimler, coğrafi konum ve kimlik bilgileri gibi izin istemini tetikleyen API'ler, kaydolmayı gerektiren güçlü özelliklerle ilgili oldukları için kasıtlı olarak kullanıcıları rahatsız edecek şekilde tasarlanmıştır. Bu istemlerin ek bağlam olmadan (ör. sayfa yükleme) tetiklenmesi, kullanıcıların bu izinleri kabul etme ihtimalini azaltır ve gelecekte bunlara güvenmeme ihtimalini artırır. Bunun yerine, bu istemleri yalnızca kullanıcıya neden bu izne ihtiyaç duyduğunuza dair bağlam içinde bir mantık sağladıktan sonra tetikleyin.

Nasıl?

Kullanıcı Deneyimi İzni makalesi ve UX Planet'in The Right Ways to Permissions for Users (Kullanıcılardan İzin İstemenin Doğru Yolları) ve mobil kullanıma odaklanılsa da tüm PWA'lar için geçerli olan izin istemlerinin nasıl tasarlanacağını anlamak açısından iyi kaynaklardır.

Kod tabanınızı iyi durumda tutmak, hedeflerinize ulaşmayı ve yeni özellikler sunmayı kolaylaştırır.

Neden?

Modern bir web uygulaması oluşturmak için pek çok şey 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.

Nasıl?

Sağlıklı bir kod tabanı sağlamak için yüksek öncelikli birkaç denetim vardır:

• Bilinen güvenlik açıklarına sahip kitaplıkları kullanmaktan kaçının.
• Desteği sonlandırılan API'leri kullanmadığınızdan emin olun.
• Kod tabanınızdan güvenli olmayan kodlama uygulamalarını (document.write() kullanma veya pasif olmayan kaydırma etkinliği işleyicileri kullanma gibi) kaldırın.
• Analiz veya diğer üçüncü taraf kitaplıkları yüklenmediğinde PWA'nızın bozulmaması için koruma amaçlı kod bile oluşturabilirsiniz.
• Birden çok tarayıcıda ve sürüm kanalında otomatik testlerin yanı sıra kod analizi gibi statik kod analizini gerektirmeyi düşünün. Bu teknikler, hataları üretime başlamadan önce yakalamanıza yardımcı olabilir.