Progresif Web Uygulamaları (PWA), tek bir kod tabanıyla herkese, her yerde ve her cihazda ulaşırken gelişmiş özellikler, güvenilirlik ve yüklenebilirlik sunmak için modern API'lerle oluşturulur ve geliştirilir. Mümkün olan en iyi deneyimi oluşturmanıza yardımcı olmak için temel ve ideal kontrol listelerini ve önerileri kullanın.
Temel Progresif Web Uygulaması kontrol listesi
Progresif Web Uygulaması Kontrol Listesi, uygulamanın boyutu veya giriş türü ne olursa olsun tüm kullanıcılar tarafından yüklenebilir ve kullanılabilir olmasını sağlayan özellikleri açıklar.
Hızlıca başlar ve hızını korur
Yüksek performanslı siteler, düşük performanslı sitelere kıyasla kullanıcılarla daha iyi etkileşim kurup onları daha uzun süre elde tuttuğu için performans, tüm online deneyimlerin başarısında önemli bir rol oynar. Kullanıcı merkezli performans metrikleri için optimizasyon yapmaya odaklanın.
Neden?
Kullanıcıların uygulamanızı kullanmasını sağlamak için hız çok önemlidir. Hatta sayfa yüklenme süresi bir saniyeden on saniyeye çıktığında kullanıcının hemen çıkma olasılığı %123 artar. Performans, load etkinliğiyle de durmaz. Kullanıcılar, bir düğmeyi tıklama gibi etkileşimlerinin kaydedilip kaydedilmediğini asla merak etmemelidir. Kaydırma ve animasyon sorunsuz olmalıdır. Performans, hem uygulamanızın davranışını hem de kullanıcıların uygulamayı algılayışını etkileyerek tüm deneyiminizi etkiler.
Tüm uygulamaların farklı ihtiyaçları olsa da Lighthouse'taki performans denetimleri Önemli Web Verileri'ne dayanır ve 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 için gerçek dünyadan performans verileri almak üzere PageSpeed Insights'ı veya Chrome Kullanıcı Deneyimi Raporu'nu da kullanabilirsiniz.
Nasıl?
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üreleriyle ilgili kılavuzumuzu inceleyin.
Tüm tarayıcılarda çalışır
Kullanıcılar, web uygulamanız yüklenmeden önce erişmek için istedikleri tarayıcıyı kullanabilir.
Neden?
Progresif web uygulamaları öncelikle web uygulamalarıdır. Bu nedenle, tarayıcılarda çalışması gerekir.
Jeremy Keith'in Resilient Web Design adlı kitabında belirttiği gibi, bunu yapmanın etkili bir yolu temel özellikleri belirlemek, bu özellikleri mümkün olan en basit teknolojiyi kullanarak kullanılabilir hale getirmek ve ardından 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 kullanıcı deneyimini CSS ve JavaScript ile 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 üzerinden göndermek için JavaScript ile deneyimi geliştirebilir, böylece bu özelliği destekleyen kullanıcıların deneyimini iyileştirebilirsiniz.
Kullanıcılarınız sitenizi çeşitli cihazlar ve tarayıcılarda deneyimler. Bu spektrumun yalnızca üst ucunu hedefleyemezsiniz. Henüz var olmayan tarayıcıları ve cihazları kullananlar da dahil olmak üzere, olası kullanıcıların en geniş aralığına kullanılabilir bir deneyim sunmak için özellik algılamayı kullanın.
Nasıl?
Jeremy Keith'in Resilient Web Design (Esnek Web Tasarımı), 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 Understanding Progressive Enhancement (Aşamalı İyileştirmeyi Anlama) başlıklı makalesi, bu konuyla ilgili iyi bir giriş niteliğindedir.
- Smashing Magazine'in Progressive Enhancement: What It Is, And How To Use It? (Aşamalı Geliştirme: Nedir ve Nasıl Kullanılır?) başlıklı makalesi, pratik bir giriş sunuyor ve daha ileri düzey konulara bağlantılar veriyor.
- MDN'nin Implementing feature detection (Özellik algılamayı uygulama) makalesinde, bir özelliği doğrudan sorgulayarak nasıl algılayacağınız açıklanmaktadır.
Her ekran boyutuna duyarlı
Kullanıcılar PWA'nızı herhangi bir ekran boyutunda kullanabilir ve tüm içeriğine herhangi bir görünüm alanı boyutunda erişebilir.
Neden?
Cihazlar farklı boyutlarda olabilir ve kullanıcılar uygulamanızı aynı cihazda bile farklı boyutlarda kullanabilir. Bu nedenle, içeriğinizin görüntü alanına sığdığından ve sitenizin tüm özelliklerinin ve içeriğinin tüm görüntü alanı boyutlarında kullanılabilir olduğundan emin olmanız çok önemlidir.
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. İçeriğinizin tamamı bir şekilde gösterilir. Aslında, Luke Wroblewski'nin Mobile First adlı kitabında belirttiği gibi, küçük adımlarla başlamak ve tasarımınızı daha büyük ekranlara göre ayarlamak sitenin tasarımını iyileştirebilir:
"Mobil cihazlar, yazılım geliştirme ekiplerinin bir uygulamadaki yalnızca en önemli veriler ve işlemler üzerinde odaklanmasını gerektirir. 320 x 480 piksellik bir ekranda gereksiz öğeler için yer yoktur. Öncelik vermen gerekiyor."
Nasıl?
Duyarlı tasarımla ilgili birçok kaynak vardır. Örneğin: Ethan Marcotte'un orijinal makalesi ve bununla ilgili önemli kavramların derlemesi, ayrıca çok sayıda kitap ve konuşma.
Bu tartışmayı duyarlı tasarımın içerik yönleriyle sınırlandırmak için şu kaynaklara bakın:
- İçeriği öncelikli tasarım
- İçeriğe göre duyarlı düzenler.
- Yedi Ölümcül Mobil Efsane, duyarlı sitelerin küçük boyutlu görünümleri için de mobil cihazlar için olduğu kadar önemlidir.
Özel bir çevrimdışı sayfa sağlar.
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 özel bir uygulama, çevrimdışı olduğunda hiçbir zaman boş sayfa göstermez. PWA ise 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 bir çevrimdışı deneyim sunmak, web deneyiminizin üzerinde çalıştığı cihazın bir parçası gibi görünmesine 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ı önbelleğe alabilirsiniz. Bu özelliği kendiniz nasıl uygulayacağınızı öğrenmek için Çevrimdışı yedek sayfa oluşturma başlıklı makaleyi okuyun. Hiçbiri sağlanmazsa Chrome temel bir çevrimdışı sayfa göstermeye devam eder.
Yüklenebilir
Cihazlarına uygulama yükleyen veya ekleyen kullanıcılar bu uygulamaları daha fazla kullanır.
Neden?
Progresif web uygulamaları yüklendiğinde diğer yüklü uygulamalar gibi görünür, hissedilir ve davranır. Kullanıcılar diğer uygulamalarını nasıl başlatıyorsa bu uygulamayı da aynı şekilde başlatır. 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 çok etkileşim kuran kitlenizdir ve genellikle mobil cihazlardaki uygulama kullanıcılarıyla aynı düzeyde etkileşim metriklerine sahiptir. Bu metrikler, normal ziyaretçilere kıyasla daha fazla tekrar ziyaret, sitenizde daha uzun süre kalma ve daha yüksek dönüşüm oranlarını içerir.
Nasıl?
Yüklenebilir kılavuzumuzu uygulayın.
En iyi progresif web uygulaması için yapılacaklar listesi
Sınıfının en iyisi bir uygulama gibi hissettiren, gerçekten harika bir PWA oluşturmak için temel kontrol listesinden daha fazlasına ihtiyacınız var. En iyi PWA kontrol listesi, PWA'nızın üzerinde çalıştığı cihazın bir parçası gibi görünmesini sağlamanın yanı sıra web'i güçlü kılan özelliklerden yararlanmakla ilgilidir.
Çevrimdışı deneyim sunar
Bağlantının kesin olarak gerekli olmadığı durumlarda uygulamanız çevrimdışı olarak da çevrimiçi olarak da aynı şekilde çalışır.
Neden?
Kullanıcılar, özel bir çevrimdışı sayfa sunmanın yanı sıra PWA'ların çevrimdışı olarak da kullanılabilmesini bekler. Örneğin, seyahat ve hava yolu uygulamalarında çevrimdışı olduğunuzda seyahat ayrıntıları ve biniş kartları kolayca erişilebilir olmalıdır. Müzik, video ve podcast uygulamaları, içeriklerin çevrimdışı oynatılmasına izin vermelidir. Sosyal medya ve haber uygulamaları, kullanıcıların çevrimdışı okuyabilmesi için son içerikleri önbelleğe almalıdır. Kullanıcılar, çevrimdışı olduklarında da kimliklerinin doğrulanmış kalmasını bekler. Bu nedenle, çevrimdışı kimlik doğrulama için tasarım yapın.
Çevrimdışı PWA, kullanıcılara gerçek bir uygulama deneyimi sunar.
Nasıl?
Kullanıcılarınızın çevrimdışı olarak çalışmasını beklediği özellikleri belirledikten sonra içeriğinizi çevrimdışı bağlamlarda kullanılabilir ve uyarlanabilir hale getirmeniz gerekir. Verileri depolamak ve almak için tarayıcı içi bir NoSQL depolama sistemi olan IndexedDB'yi, kullanıcıların çevrimdışı durumdayken işlem yapmasına ve sunucu iletişimlerini kullanıcı tekrar sabit bir bağlantıya sahip olana kadar ertelemesine olanak tanımak için arka plan senkronizasyonunu kullanabilirsiniz. Hizmet çalışanlarını kullanarak resim, video dosyası ve ses dosyası gibi diğer içerik türlerini çevrimdışı kullanım için depolayabilir ve kullanıcıların kimliğini doğrulanmış olarak tutmak için güvenli, uzun süreli oturumlar uygulayabilirsiniz.
Kullanıcı deneyimi açısından, yükleme sırasında kullanıcılara hız ve içerik algısı veren iskelet ekranlar kullanabilirsiniz. Bu ekranlar, gerektiğinde önbelleğe alınmış içeriğe veya çevrimdışı göstergesine geri dönebilir.
Tamamen erişilebilir
Tüm kullanıcı etkileşimleri, en son Web İçeriği Erişilebilirlik Yönergeleri (WCAG) uluslararası standardını karşılar.
Neden?
Çoğu kullanıcı, hayatının bir noktasında PWA'nızı WCAG kapsamındaki bir şekilde kullanmak ister. Kullanıcıların PWA'nızla etkileşim kurma ve onu anlama becerisi bir spektrumda yer alır ve ihtiyaçlar geçici veya kalıcı olabilir. PWA'nızı erişilebilir hale getirerek herkesin kullanabilmesini sağlarsınız.
Nasıl?
W3C'nin Introduction to Web Accessibility (Web Erişilebilirliğine Giriş) adlı makalesi iyi bir başlangıç noktasıdır. Erişilebilirlik testlerinin çoğu manuel olarak yapılmalıdır. Lighthouse'taki erişilebilirlik denetimi, axe ve Accessibility Insights, bazı erişilebilirlik testlerini otomatikleştirmenize yardımcı olabilir. Ayrıca, bu öğeleri kendiniz yeniden oluşturmak yerine anlamsal olarak doğru öğeler (ör. <a> ve <button> öğeleri) kullanmak da önemlidir. Bu sayede, daha gelişmiş özellikler oluşturmanız gerektiğinde erişilebilirlik beklentilerinin karşılanması sağlanır (ör. okların mı yoksa sekmelerin mi kullanılacağı).
A11Y Nutrition Cards, bazı yaygın bileşenler için bu konuda mükemmel tavsiyeler sunar.
Aramada bulunabilir
PWA'nız arama yoluyla kolayca bulunabilir.
Neden?
Web'in en büyük avantajlarından biri, arama yoluyla siteleri ve uygulamaları keşfedebilme olanağıdır. Hatta tüm web sitesi trafiğinin yarısından fazlası organik aramadan gelir. İçerik için kanonik URL'lerin bulunduğundan ve arama motorlarının sitenizi dizine ekleyebildiğinden emin olmak, potansiyel kullanıcıların PWA'nızı bulabilmesi için çok önemlidir. Bu durum, özellikle istemci taraflı oluşturma kullanılırken geçerlidir.
Nasıl?
Her URL'nin benzersiz ve açıklayıcı bir başlığa ve meta açıklamasına sahip olduğundan emin olarak başlayın. Ardından, PWA'nızdaki bulunabilirlik sorunlarını ayıklamak ve düzeltmek için Lighthouse'taki Google Search Console ve arama motoru optimizasyonu denetimlerini kullanabilirsiniz.
Bing veya Yandex'in site sahibi araçlarını da kullanabilir ve PWA'nıza Schema.org'daki şemaları kullanarak yapılandırılmış veriler ekleyebilirsiniz.
Tüm giriş türleriyle çalışır
PWA'nız fare, klavye, ekran kalemi veya dokunarak eşit derecede kullanılabilir.
Neden?
Cihazlar çeşitli giriş yöntemleri sunar ve kullanıcılar uygulamanızı kullanırken bu yöntemler arasında sorunsuz bir şekilde geçiş yapabilmelidir. Ayrıca, giriş yöntemleri ekran boyutuna bağlı olmamalıdır. Bu nedenle, büyük görüntü alanları dokunmayı, 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 herhangi bir giriş yönteminin kullanımını desteklediğinden emin olun. Gerekli durumlarda, girişle ilgili kontrollerin (ör. yenilemek için çekme) kullanılmasına izin vermek üzere deneyimleri iyileştirin.
Nasıl?
Pointer Events API, çeşitli giriş seçenekleriyle çalışmak için birleşik bir arayüz sağlar ve özellikle kalem desteği eklemek için uygundur. Hem dokunma hem de klavye desteği 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 tıklama veya dokunma ile de etkinleşebildiklerinden emin olun.
İzin istekleri için bağlam bilgisi sağlar
Güçlü API'leri kullanmak için izin isterken bağlam bilgisi verin ve yalnızca API'ye ihtiyaç duyulduğunda izin isteyin.
Neden?
Bildirimler, coğrafi konum ve kimlik bilgileri gibi izin istemini tetikleyen API'ler, etkinleştirme gerektiren güçlü özelliklerle ilgili oldukları için kullanıcı deneyimini kesintiye uğratacak şekilde tasarlanır. Bu istemleri sayfa yükleme gibi ek bağlam olmadan tetiklemek, kullanıcıların bu izinleri kabul etme olasılığını azaltır ve gelecekte bu izinlere güvenmeme olasılığını artırır.
Bunun yerine, bu istemleri yalnızca kullanıcıya söz konusu izne neden ihtiyacınız olduğuna dair bağlam içinde bir gerekçe sunduktan sonra tetikleyin.
Nasıl?
İzin kullanıcı deneyimi makalesi ve UX Planet'in Kullanıcılardan İzin İstemek İçin Doğru Yollar başlıklı makalesi, izin istemlerini nasıl tasarlayacağınızı anlamak için iyi kaynaklardır. Bu kaynaklar, mobil cihazlara odaklanmış olsa da tüm PWA'lar için geçerlidir.
Sağlıklı kod için en iyi uygulamaları takip eder.
Kod tabanınızın sağlıklı olması, hedeflerinize ulaşmanızı ve yeni özellikler sunmanızı kolaylaştırır.
Neden?
Modern bir web uygulaması oluşturmak çok çaba gerektirir. Uygulamanızı güncel tutmak ve kod tabanınızın sağlıklı olmasını sağlamak, bu kontrol 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 öncelikli olarak yapılması gereken bir dizi kontrol vardır:
- Bilinen güvenlik açıkları olan kitaplıkları kullanmaktan kaçının.
- Kullanımdan kaldırılmış API'leri kullanmadığınızdan emin olun.
- Kod tabanınızdaki güvenli olmayan kodlama uygulamalarını (ör.
document.write()) veya pasif olmayan kaydırma etkinliği işleyicilerini kaldırın. - Analizler veya diğer üçüncü taraf kitaplıkları yüklenemezse PWA'nızın bozulmaması için savunma amaçlı kodlama bile yapabilirsiniz.
- Birden fazla tarayıcıda ve yayın kanalında otomatik testlerin yanı sıra linting gibi statik kod analizinin de zorunlu tutulmasını öneririz. Bu teknikler, hataların üretim aşamasına geçmeden önce tespit edilmesine yardımcı olabilir.