Progresif Web Uygulamaları (PWA), tek bir kod tabanı ile herkesin her yerde ve her cihazdan erişebileceği gelişmiş özellikler, güvenilirlik ve yükleme kolaylığı sunmak için modern API'lerle geliştirilir. Mümkün olan en iyi deneyimi sunmanıza yardımcı olması için temel ve optimal yapılacaklar listelerini ve önerileri kullanın.
Temel Progresif Web Uygulaması kontrol listesi
Progresif Web Uygulaması (Progresif Web Uygulaması) listesi, bir uygulamayı yüklenebilir ve boyutu veya giriş türünden bağımsız olarak tüm kullanıcılar tarafından kullanılabilir.
Performans, tüm online platformların başarısında önemli bir rol oynar çünkü yüksek performanslı siteler kullanıcıların ilgisini daha çok çeker ve onları elde tutar daha kötü performans gösterenlere kıyasla daha iyi olabilir. Kullanıcı odaklı performans metrikleri için optimizasyona odaklanın.
Neden?
Hız, kullanıcıların uygulamanızı kullanmasını sağlama açısından son derece önemlidir.
Aslında, sayfa yüklenme süreleri bir saniyeden on saniyeye yükseldikçe, sayfa yüklenme süresi
kullanıcıların hemen çıkma olasılığı %123 artıyor. Performans,
load etkinliğiyle durduruluyor. 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 uygulama açısından hem de uygulama açısından deneyiminizin tamamını etkiler
ve kullanıcıların onu nasıl algıladığını ifade eder.
Tüm uygulamaların farklı ihtiyaçları olsa da Lighthouse, Core Web Vitals'ı temel alır. ve bu denetimlerden yüksek puanlar almak, kullanıcılarınızın ve keyifli bir deneyim sunuyor. Ayrıca şunu da kullanabilirsiniz: PageSpeed Insights veya Chrome Kullanıcı Deneyimi Raporu web uygulamanızın gerçek performans verilerini alın.
Nasıl?
Aşağıdakileri yapmak için hızlı yükleme süreleriyle ilgili kılavuzumuzu izleyin PWA'nızın hızlı başlayıp hızlı kalmasını nasıl sağlayacağınızı öğrenin.
Kullanıcılar, uygulamanız açılmadan önce web uygulamanıza erişmek için istedikleri tarayıcıyı kullanabilir yüklendi.
Neden?
Progresif web uygulamaları öncelikle web uygulamalarıdır. Bu nedenle, tarayıcılarda çalışması gerekir.
Jeremy Keith’e göre bunu yapmanın etkili bir yolu Dayanıklı Web Tasarımı, temel özellikleri belirleyip bu özelliklerin mümkün olan en basit teknolojiyi kullanarak ve ardından deneyim kazanmalısınız. Çoğu durumda bu, işe yalnızca Temel özellikleri oluşturmak ve CSS ve JavaScript kullanarak daha ilgi çekici bir deneyim oluşturabilirsiniz.
Örneğin, form gönderme sürecini ele alalım. Bunu uygulamanın en basit yolu, POST isteği gönderen bir HTML formudur. İnşaattan sonra
oluşturmak için JavaScript ile
deneyiminizi geliştirebilirsiniz.
AJAX üzerinden formu doğrulama ve gönderme, böylece kullanıcı deneyimini
kullanıcıların önemsemesini sağlar.
Kullanıcılarınız sitenizi çok çeşitli cihazlarda deneyimliyor izin verir. 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 (Esnek Web Tasarımı) web tasarımı hakkında nasıl düşünmemiz gerektiğini açıklayan devam eden bir metodolojiye sahip olacaktır.
Ek kaynaklar
- Bir List Apart'ın Progresif İlerlemeyi Anlama konuya iyi bir giriş yapıyor.
- Smashing Magazine'in Kademeli Geliştirme: Nedir ve Nasıl Kullanılır? , pratik giriş bilgileri ve daha ileri düzey konulara bağlantılar içerir.
- MDN'ler Özellik algılamayı uygulama makalesinde bir özelliğin doğrudan sorgulanarak nasıl tespit edileceği ele alınmaktadı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, projenizi planlarken yalnızca içeriğinizin görüntü alanına sığmasını sağlamakla kalmayıp, aynı zamanda özellikleri ve içeriğinin tüm görüntü alanı boyutlarında kullanılabilir.
Kullanıcıların tamamlamak istediği görevler ve erişmek istediği içerik görüntü alanı boyutuna göre değişmez. İçeriğinizi farklı görüntü alanı boyutlarına göre yeniden düzenleyebilirsiniz. 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ı düzenlemek daha iyi tasarımı:
Mobil cihazlar, yazılım geliştirme ekiplerinin Yalnızca bir uygulamadaki en önemli verileri ve işlemleri içerir. Yalnızca 320x480 piksel bir ekranda fazladan, gereksiz öğeler için yer olmadığını öğeler. Ö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, çok sayıda kitap ve konuşma yer alır. Bunu daraltmak için ve duyarlı tasarımın içerik özelliklerine değineceğiz. içerik öncelikli tasarım ve içerik çıkışı duyarlı düzenler 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 sunar.
Neden?
Kullanıcılar, yüklü uygulamaların bağlantılarından bağımsız olarak çalışmasını bekler durumu. Platforma özgü bir uygulama aynı zamanda boş sayfa göstermiyor ayrıca PWA, tarayıcının varsayılan çevrimdışı sayfasını asla 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, önbelleğe alma işlemini yapabilirsiniz.
bir kullanıcı çevrimdışı olduğunda bunu gösterecek özel bir çevrimdışı sayfa. Ödeme yap
Çevrimdışı yedek sayfa oluşturma
nasıl uygulayacağınızı öğrenin. Chrome'un
Sağlanmamışsa temel çevrimdışı sayfa gösterir.
Cihazlarına uygulama yükleyen veya ekleyen kullanıcılar bu uygulamalarla daha fazla etkileşime girer.
Neden?
Progresif Web Uygulaması yüklemek, uygulamanızın yüklü diğer tüm uygulamalar. Kullanıcıların diğer uygulamalarını başlattığı yerden başlatılır. Google Cloud Platform'dan ayrı olarak, ve diğer uygulamalarda olduğu 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.
Optimum Progresif Web Uygulaması kontrol listesi
Sınıfının en iyisi gibi hissettiren, gerçekten mükemmel bir PWA oluşturmak için temel kontrol listesinden daha fazlasını içeriyor. Optimum PWA (progresif web uygulaması) için yapılacaklar listesi sırasında, PWA'nızın çalıştığı cihazın bir parçası ve web'i güçlü kılan unsurlardan bahsedeceğiz.
Bağlantının kesinlikle gerekli olmadığı yerlerde uygulamanız aynı şekilde çalışır çevrimdışı olarak da kullanabilirsiniz.
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 boarding pass'lerin hazır olması gerekir. Müzik, video ve podcast yayınlama uygulamaları çevrimdışı oynatmaya izin vermelidir. Sosyal ve haber uygulamalarının, kullanıcıların çevrimdışı olarak okuyabilmesi için son içeriği önbelleğe alması gerekir. Kullanıcılar çevrimdışıyken de kimlik doğrulamasının devam etmesini bekler. Bu nedenle, çevrimdışı kimlik doğrulamayı destekleyen bir tasarım oluşturun. Çevrimdışı PWA'lar, kullanıcılara gerçek bir uygulama deneyimi sunar.
Nasıl?
Kullanıcılarınızın çevrimdışı çalışmayı beklediği özellikleri belirledikten sonra içeriğinizi çevrimdışı kullanıma hazır ve çevrimdışı bağlamlar. 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 sunucu iletişimlerini kullanıcı tekrar kararlı bir bağlantıya sahip olana kadar ertelemek için ise arka plan senkronizasyonunu kullanabilirsiniz. Ayrıca, görsel, video dosyaları ve mobil reklamlar gibi farklı içerik türlerini ses dosyalarını çevrimdışı kullanmak ve güvenli, uzun ömürlü oturumlar kullanıcıların kimliğini doğru şekilde saklamanız gerekir. 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. İnsanlar onlarla etkileşime geçip geçme PWA'nızın geniş bir yelpazede olduğunu ve ihtiyaçlarının geçici veya kalıcıdır. PWA'nızı erişilebilir hale getirerek herkes için kullanılabilir hale getirirsiniz.
Nasıl?
W3C'nin
Web Erişilebilirliğine Giriş
iyi bir başlangıç noktasıdır. Erişilebilirlik testinin çoğu
manuel olarak yapılır. Erişilebilirlik gibi araçlar
Lighthouse, axe,
ve Erişilebilirlik Analizleri
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ş ve gelişmiş
erişilebilirlikle ilgili beklentilerin karşılanması (ör.
veya sekmeler arasında).
A11Y Beslenme Kartları'nda
mükemmel bir tavsiye almıştım.
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. Hatta, yarısından fazlası %80'i organik aramadan geliyor. Bu nedenle, standart URL'ler bulunduğundan ve arama motorlarının sitenizin PWA'nızı bulmasını sağlamak 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. Daha sonra Google Search Console ve Arama Motoru Optimizasyonu denetimleri PWA'nız ile bulunabilirlik sorunlarını ayıklamak ve düzeltmek için Lighthouse'tan yararlanabilirsiniz. Siz Bing'in veya Yandex'in sitesi sahip araçları ve bunları yapılandırılmış verileri Schema.org'dan şemalar oluşturun.
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. Tıpkı Daha da önemlisi, giriş yöntemleri ekran boyutuna bağlı olmamalıdır. Büyük görüntü alanları dokunmayı desteklemeli ve küçük görüntü alanları desteklemeli kullanıma sunuyoruz. 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, izin vermek için deneyimleri geliştirin girişe özgü kontroller de vardır (yenilemek için çekme gibi).
Nasıl?
Pointer Events API'yi ç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ş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?
İzin istemini tetikleyen bildirimler, coğrafi konum, kullanımı sekteye uğratacak şekilde tasarlanmış e-postalar ve kimlik bilgileri çünkü bunlar, etkinleştirilmeyi gerektiren güçlü özelliklerle alakalıdır. Bu istemlerin ek bağlam olmadan tetiklenmesi (ör. sayfa yükleme, kullanıcıların bu izinleri kabul etme olasılığını azaltır ve ve ona güvenmemeniz gerektiğini unutmayın. 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 makalesini ve UX Planet'in Kullanıcılardan İzin İstemenin Doğru Yöntemleri izin istemlerini nasıl tasarlayacağınızı anlamak için tüm PWA'lara (progresif web uygulaması) uygulayın.
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 müşteri memnuniyeti sağlamaya yönelik codebase:
- 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ı kaldırın (ör.
document.write()veya pasif olmayan kaydırma etkinliği içeriyor dinleyiciler için) - Aşağıdaki durumlarda PWA'nızın bozulmaması için koruma amaçlı kod bile oluşturabilirsiniz. Analytics veya diğer üçüncü taraf kitaplıklarının yüklenmemesi.
- Statik kod analizi gibi statik kod analizinin yanı sıra birden fazla tarayıcıda ve sürüm kanalında otomatik test yapmanıza olanak tanır. Bu teknikler, hataları üretime almadan önce yakalamanıza yardımcı olabilir.