İ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?

Hız, kullanıcıların uygulamanızı kullanması için çok önemlidir. Aslında, sayfa yüklenme süreleri bir saniyeden on saniyeye çıkarken kullanıcıların siteden hemen çıkma olasılığı %123 oranında artar. Performans, load etkinliğiyle de bitmez. 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 uygulamanızı nasıl algıladığı 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 hızlı bir şekilde başlatılmasını ve hızını korumasını sağlamak için hızlı yükleme süreleri ile ilgili kılavuzumuzu inceleyin.

Kullanıcılar, web uygulamanıza yüklenmeden önce istedikleri tarayıcıdan erişebilir.

Neden?

Progresif web uygulamaları öncelikle web uygulamalarıdır. Bu nedenle, tarayıcılarda çalışması gerekir.

Bunu yapmanın etkili bir yolu, Resilient Web Design adlı makalede Jeremy Keith'in belirttiği gibi, temel özellikleri belirlemek, bu özellikleri mümkün olan en basit teknolojiyi kullanarak kullanıma sunmak ve ardından mümkün olduğunda deneyimi iyileştirmektir. Bu, çoğu durumda temel özellikleri oluşturmak için yalnızca HTML'den başlamak ve daha ilgi çekici bir deneyim oluşturmak için CSS ve JavaScript ile kullanıcı deneyimini iyileş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 üzerinden göndermek için JavaScript ile deneyimi iyileştirebilir, böylece bunu destekleyebilecek kullanıcılar için deneyimi iyileştirebilirsiniz.

Kullanıcılarınız sitenizi çeşitli cihaz ve tarayıcılarda deneyimliyor. Bu spektrumun üst kısmını hedeflemeniz yeterli değildir. 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 (Esnek Web Tasarımı) adlı kitabı, tarayıcılar arası bu progresif metodolojide web tasarımı hakkında nasıl düşünmeniz gerektiğini açıklayan mükemmel bir kaynaktır.

Ek kaynaklar

• A List Apart'ın Kademeli Geliştirme'yi Anlama makalesi konuyla ilgili iyi bir giriş niteliğindedir.
• Smashing Magazine'in Kademeli Geliştirme: 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ği doğrudan sorgulayarak nasıl algılayacağınız 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ığmasını sağlamakla kalmayıp sitenizin tüm özelliklerinin ve içeriğinin tüm görüntü alanı boyutlarında kullanılabilir olmasını sağlamak da ç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. Aslında, Luke Wroblewski'nin Mobil Öncelikli adlı kitabında da belirtildiği gibi, küçük bir başlangıç yapıp tasarımınızı daha büyük ekranlar için ayarlayarak site tasarımını iyileştirebilirsiniz:

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 öğelere yer yoktur. Öncelik vermeniz gerekir.

Nasıl?

Duyarlı tasarımla ilgili birçok kaynak vardır. Bunlar arasında Ethan Marcotte tarafından yazılan orijinal makale, konuyla ilgili önemli kavramların bir koleksiyonu ve çok sayıda kitap ve konuşma yer alır. Bu tartışmayı, duyarlı tasarımın içerik yönlerine odaklamak için içerik odaklı tasarım ve içerik odaklı duyarlı düzenler hakkındaki makalelere göz atın. Son olarak, mobil cihazlara odaklanmış olsa da Josh Clark'ın Seven Deadly Mobile Myths (Yedi Ölümcül Mobil Efsane) adlı makalesinde yer alan bilgiler, duyarlı sitelerin küçük boyutlu görünümleri için olduğu kadar genel olarak mobil cihazlar için de geçerlidir.

Kullanıcılar çevrimdışıyken onları PWA'nızda tutmak, varsayılan tarayıcı çevrimdışı sayfasına yönlendirmekten 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ının ö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 çalıştığı cihazın bir parçası gibi hissetmenize yardımcı olur.

Nasıl?

Bir hizmet çalışanının install etkinliği sırasında, kullanıcı çevrimdışı olduğunda gösterilecek özel bir çevrimdışı sayfayı önceden ö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. 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 uygulamalar gibi görev listesinde görünür.

Cihazlara özel uygulamalarda olduğu gibi, uygulamalarınızı yükleyen kullanıcılar en çok etkileşime giren kitlenizdir ve genellikle mobil cihazlardaki uygulama kullanıcılarıyla aynı etkileşim metriklerini gösterir. Bu metrikler arasında daha fazla tekrar ziyaret, sitenizde daha uzun süre kalma ve tipik ziyaretçilere kıyasla 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ılavuzumuzu inceleyin.

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ışı olarak da kullanılabilmesini bekler. Örneğin, seyahat ve hava yolu uygulamaları çevrimdışıyken seyahat ayrıntıları ile biniş kartlarının 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 okuyabilmesi için son içerikleri önbelleğe almalıdır. Kullanıcılar çevrimdışıyken de kimliklerinin doğru kalmasını bekler. Bu nedenle, çevrimdışı kimlik doğrulama için tasarım yapın. Çevrimdışı PWA'lar, kullanıcılara gerçek bir uygulama deneyimi sunar.

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. Hizmet işçilerini, resim, video dosyası ve ses dosyası gibi diğer içerik türlerini çevrimdışı kullanım için depolamak ve kullanıcıların kimlik doğrulamasını korumak amacıyla güvenli, uzun süreli oturumlar uygulamak için de kullanabilirsiniz. Kullanıcı deneyimi açısından, kullanıcılara yükleme sırasında hız ve içerik algısı veren ve gerektiğinde önbelleğe alınmış içeriğe veya çevrimdışı göstergeye geri dönebilen iskelet ekranlar kullanabilirsiniz.

Tüm kullanıcı etkileşimleri WCAG 2.0 erişilebilirlik şartlarını karşılamalıdır.

Neden?

Çoğu kullanıcı, hayatlarının bir noktasında PWA'nızı WCAG 2.0 erişilebilirlik koşullarına uygun bir ş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 getirirsiniz.

Nasıl?

W3C'nin Web Erişilebilirliği'ne Giriş makalesini inceleyebilirsiniz. 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ı'nda, bazı yaygın bileşenler için bu konuda mükemmel tavsiyeler verilmektedir.

PWA'nız arama üzerinden kolayca keşfedilebilir.

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. Potansiyel kullanıcıların PWA'nızı bulabilmesi için içerik için standart URL'lerin bulunduğundan ve arama motorlarının sitenizi dizine ekleyebildiğinden emin olmanız ö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ı gidermek ve düzeltmek için Google Search Console'u ve Lighthouse'taki Arama Motoru Optimizasyonu denetimlerini kullanabilirsiniz. Bing'in veya Yandex'in site sahibi araçlarını da kullanabilir ve PWA'nıza Schema.org'daki şemalardan yararlanarak yapılandırılmış veriler 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 durumlarda, girişe özel denetimlere (ör. kaydırarak yenileme) de izin verecek şekilde deneyimleri iyileştirin.

Nasıl?

İşaretçi Etkinlikleri API'si, çeşitli giriş seçenekleriyle çalışmak için birleşik 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şen etkileşimleri dahil ederken bu etkileşimlerin tıklama veya dokunma ile de etkinleştirilebildiğinden emin olun.

Güçlü API'leri kullanma izni isterken bağlamı belirtin ve yalnızca API'ye ihtiyaç duyulduğunda isteyin.

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 çok fazla ş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ılmış API'leri kullanmadığınızdan emin olun.
• Kod tabanınızdan güvenli olmayan kodlama uygulamalarını kaldırın (ör. document.write() kullanma veya etkin olmayan kaydırma etkinliği dinleyicileri kullanma),
• Analytics veya diğer üçüncü taraf kitaplıklar yüklenemezse PWA'nızın çalışmasını engellememek için savunma amaçlı kod da yazabilirsiniz.
• Birden fazla tarayıcıda ve sürüm kanalında statik kod analizi (ör. linting) ve otomatik test yapılmasını zorunlu kılın. Bu teknikler, hataları üretime geçmeden önce yakalamanıza yardımcı olabilir.