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

Performans, herhangi bir online deneyimin başarısında önemli bir rol oynar. Çünkü yüksek performanslı siteler, düşük performanslı sitelere kıyasla kullanıcılarla daha iyi etkileşim kurar ve kullanıcıları sitede daha uzun süre tutar. 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 akıcı olmalıdır. Performans, hem uygulamanızın davranışı hem de kullanıcıların uygulamayı algılama şekli açısından deneyiminizin tamamını etkiler.

Tüm uygulamaların farklı ihtiyaçları olsa da Lighthouse'taki performans denetimleri Core Web Vitals'a dayanır. Bu denetimlerde yüksek puan almak, kullanıcılarınızın keyifli bir deneyim yaşama olasılığını artırır. Web uygulamanızın gerçek dünyadaki performans verilerini almak için PageSpeed Insights'ı veya Chrome Kullanıcı Deneyimi Raporu'nu da kullanabilirsiniz.

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 istedikleri tarayıcıyı kullanarak web uygulamanıza erişebilir.

Neden?

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

Resilient Web Design departmanında çalışan 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önderimini 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 kullanılabilir bir deneyim sunmak için özellik algılama özelliğinden yararlanı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ş ve daha ileri düzey konulara bağlantılar sunar.
• 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ı herhangi bir ekran boyutunda kullanabilir ve içeriğinin tamamı herhangi bir görüntü alanı boyutunda kullanılabilir.

Neden?

Cihazlar çeşitli boyutlardadır ve kullanıcılar uygulamanızı aynı cihazda bile çeşitli boyutlarda kullanabilir. 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 istediği içerikler, görüntü alanı boyutuna göre 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, yazılım geliştirme ekiplerinin yalnızca bir uygulamadaki en önemli verilere ve işlemlere odaklanmasını gerektirir. 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, 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ö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, kullanıcının çevrimdışı olduğu durumları göstermek için özel bir çevrimdışı sayfayı önbelleğe alabilirsiniz. Bu özelliği nasıl uygulayacağınızı öğrenmek için Çevrimdışı yedek sayfa oluşturma başlıklı makaleyi inceleyin. Hiçbiri sağlanmazsa Chrome'un temel bir çevrimdışı sayfa göstereceğini unutmayın.

Cihazlarına uygulama yükleyen veya ekleyen kullanıcılar bu uygulamalarla daha fazla etkileşime girer.

Neden?

Yüklediğiniz Progresif Web Uygulaması, diğer tüm yüklü uygulamalar gibi görünebilir, hissedilebilir ve davranabilir. 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 uygulamalar 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şimde bulunan kitlenizdir ve genellikle mobil cihazlardaki uygulama kullanıcılarıyla benzer etkileşim metriklerine sahiptir. Bu metrikler arasında tekrarlanan ziyaret sayısı, sitenizde daha uzun süreler ve normal ziyaretçilere göre daha yüksek dönüşüm oranları bulunmaktadır.

Nasıl?

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

Bağlantıya kesinlikle ihtiyaç duyulmayan durumlarda uygulamanız çevrimdışıyken de internette olduğu gibi ç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ı çevrimdışıyken seyahat ayrıntıları ile boarding pass'lerin hazır olması gerekir. 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. Kullanıcılar çevrimdışıyken de kimlik doğrulamasının devam etmesini bekler. Bu nedenle, çevrimdışı kimlik doğrulamayı göz önünde bulundurarak 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ışırken kullanmasını beklediği özellikleri belirledikten sonra, içeriğinizi çevrimdışı bağlamlara uygun hale getirmeniz ve sunmanız gerekir. Verileri depolamak ve almak için tarayıcı içi bir NoSQL depolama sistemi olan IndexedDB'i, kullanıcıların çevrimdışıyken işlem yapmasına izin vermek ve kullanıcı tekrar kararlı bir bağlantıya sahip olana kadar sunucu iletişimlerini ertelemek için ise arka plan senkronizasyonunu 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 şartlarını karşılamalıdır.

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. Kullanıcıların PWA'nızla etkileşime geçme ve onu anlama becerisi bir spektrumda yer alır. İhtiyaçlar geçici veya 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 çoğu manuel olarak yapılmalıdır. Lighthouse'taki Erişilebilirlik denetimleri, axe ve Erişilebilirlik Analizleri gibi araçlar, bazı erişilebilirlik testlerini otomatikleştirmenize yardımcı olabilir. Bu öğeleri kendiniz yeniden oluşturmak yerine anlamsal olarak doğru öğeleri (ör. a ve button öğeleri) kullanmak da önemlidir. Bu sayede, daha gelişmiş özellikler oluşturmanız gerektiğinde erişilebilirlik beklentilerinin karşılanması (ör. okların sekmelere kıyasla ne zaman kullanılacağı) sağlanır. A11Y Beslenme Kartları, bu konuda yaygın olan bazı bileşenler için mükemmel öneriler sunuyor.

PWA'nız arama yaparak kolayca bulunabilir.

Neden?

Web'in en büyük avantajlarından biri, arama üzerinden site ve uygulama keşfedebilmenizdir. Aslında, 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ı bulabilmesi açısından çok önemlidir. Bu durum, özellikle istemci tarafı oluşturma özelliğini benimsemede geçerlidir.

Nasıl?

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 dokunmatik ekranla 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. Bununla birlikte, giriş yöntemlerinin ekran boyutuna bağlı olmaması da önemlidir. Yani büyük görüntü alanları dokunma özelliğini, küçük görüntü alanları ise klavye ve fareyi desteklemelidir. Uygulamanızın ve tüm özelliklerinin, kullanıcınızın seçebileceği tüm giriş yöntemlerinin 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 semantik öğeleri (bağlantılar, düğmeler, form kontrolleri vb.) kullandığınızdan ve bunları semantik 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 istemi tetikleyen API'ler, etkinleştirme gerektiren güçlü özelliklerle ilgili olma eğiliminde olduklarından kullanıcıyı rahatsız edecek şekilde tasarlanmıştır. Bu istemleri ek bağlam olmadan tetiklemek (ör. sayfa yüklenirken), kullanıcıların bu izinleri kabul etme olasılığını azaltır ve gelecekte onlara güvenme olasılığını artırır. Bunun yerine, bu istemleri yalnızca kullanıcıya söz konusu izne neden ihtiyaç duyduğunuza dair bağlama dayalı bir gerekçe sunduktan sonra tetikleyin.

Nasıl?

İzin Kullanıcı Deneyimi makalesi ve UX Planet'in Kullanıcılardan İzin İstemenin Doğru Yolları makalesi, mobil cihazlara odaklanırken tüm PWA'lar için geçerli olan izin istemlerini nasıl tasarlayacağınızı anlamanıza yardımcı olacak iyi kaynaklardır.

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

Neden?

Modern bir web uygulaması oluşturmak için pek çok şey gerekir. Uygulamanızı güncel tutarak ve kod tabanınızı sağlıklı hale getirerek bu yapılacaklar listesinde belirtilen diğer hedeflere uygun yeni özellikler sunabilirsiniz.

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.
• Analytics veya diğer üçüncü taraf kitaplıkları yüklenemezse PWA'nızın çalışmamasına
• Birden fazla tarayıcıda ve sürüm kanalında statik kod analizi (ör. linting) ve otomatik test yapılmasını zorunlu kılabilirsiniz. Bu teknikler, hataları üretime başlamadan önce yakalamanıza yardımcı olabilir.