İçerik
- PWA'ların yükselişi
- PWA'lar bugün iş başında
- Kurulum
- Çevrimdışı ve anında başlatma
- Birinci sınıf deneyim
- Uygulama mağazaları
- Platform entegrasyonu
- Tasarım ve kullanıcı deneyimi zorlukları
- PWA yılı
Duyarlı web tasarımının birkaç yıl önce masaüstü ve mobil siteler arasındaki boşluğu kapatması gibi, ilerici web uygulama teknikleri de şu anda web ile uygulama dünyası arasındaki boşluğu kapatıyor. Masaüstünden mobil uygulamalara hızlı bir şekilde yaklaşan kullanıcı deneyimleriyle, çok daha şık, daha verimli bir internet gelişiyor gibi görünüyor - ancak kaçınılmaz olarak temeldeki genetik kodunda bazı önemli değişiklikler olmadan değil.
- Progresif Web Uygulaması nasıl oluşturulur?
Açıktır ki, buna neden olan bazı önemli seçici baskılar var. Her şeyden önce, her niş için yerel uygulamalar oluşturmak, kaynakların verimli bir şekilde kullanılması anlamına gelmez: kullanıcılar, bant genişliğini ve değerli disk alanını boşa harcayan yüzlerce büyük uygulama ile sonuçlanır ve şirketler, yalnızca terk edilmeleri için uygulamalar oluşturmak için çok para harcar. ilk versiyonlarından sonra. Ve bu uygulamaların çoğu sadece web içeriği tarafından yönlendirilir: web hizmetlerinden veya bir içerik yönetim sisteminden gelen bilgiler.
Progresif bir web uygulamasının tanımı somut değildir. Bir PWA, her platformda aynı kod tabanına sahip uygulama benzeri bir deneyim sunmak için aşamalı geliştirmeyi kullanan web platformunda birkaç yeni API ve yetenek kullanan bir web uygulamasıdır. Daha çok, kullanıcılarınız için mükemmel bir uygulama benzeri deneyim oluşturan bir dizi en iyi uygulama ve API kullanımıdır, bu nedenle bir PWA'nız veya PWA'nız olmadığı gibi değildir; daha çok siteniz aşağı yukarı PWA gibi.
Yeni bir site oluşturmaya mı başlamak üzeresiniz? Bir web sitesi oluşturucu kullanmayı deneyin. Ve ihtiyacınız olan desteği iyi bir web barındırma hizmetinden de aldığınızdan emin olun. Veya biraz farklı bir şey için, en iyi bulut depolama kılavuzumuza bakın.
PWA'ların yükselişi
PWA adı 2015 yılında Google'da Chrome ekibi için çalışan Alex Russell'ın Escaping Tabs Without Our Soul adlı makalesinde türetilmişken, yolculukları aslında oradan başlamadı. 1999'da Microsoft tarafından oluşturulan HTML Uygulamalarına (HTA'lar) ve Nokia, BlackBerry ve diğer şirketlerin diğer birçok web uygulama platformuna sahiptik. Daha sonra, 2007'de Steve Jobs, o zamanlar orijinal iPhone için uygulama oluşturmanın tek yolunun ne olduğunu sundu: Farklı bir adla da olsa PWA'lar. Chrome oradan başladı, birkaç yıl sonra API'leri geliştirdi ve PWA adını icat etti.
Web içeriğini uygulamalar dünyasına getirmeye çalışan çok sayıda başarısız deneyim varken, neden şimdi işe yarayacağını düşünüyoruz? Öncelikle, Microsoft, Google, Apple ve Mozilla gibi PWA'ların arkasındaki teknolojileri şu anda çalışan ve destekleyen şirketlere kalmış, bunlardan sadece birkaçı. Ayrıca, web platformunun performansı, iyi tasarlanmış bir PWA'yı yerel bir uygulama ile karşılaştırdığınızda algılanan bir farkın olmadığı bir noktaya ulaştı. Bu koşullar daha önce hiç var olmamıştı ve web topluluğunun PWA zamanının geldiğine karar vermesinin bir nedeni de budur.
PWA'lar bugün iş başında
Bugün PWA'lar tamamen işlevseldir ve şunlara yüklenebilir:
- Çoğu tarayıcıya sahip Android, en iyi deneyimi sunan Chrome ile
- Safari ile iOS
- Chromebook'lar
- Microsoft Store'dan Windows 10
- Firefox OS'den bir çatal olan KaiOS özellikli telefonlar şu anda çoğunlukla Hindistan'da milyonlarca kullanıcı tarafından kullanılabilir
Bu yılın ilerleyen günlerinde Chrome aracılığıyla macOS, Windows ve Linux'a da destek geliyor. Şimdi denemek isterseniz, bugün deneysel bir işaret olarak "Masaüstü PWA" olarak mevcuttur. Belirli bir zaman çerçevesi tanımlanmamasına rağmen, mağazayı kullanmadan Windows üzerinde Edge kurulumu da daha sonra gelecek.
Listeyi tekrar okursanız, her platformun önümüzdeki aylarda tam olarak kurulabilir PWA desteği olduğunu veya almak üzere olduğunu görebilirsiniz. Ve bir PWA, yalnızca uyumlu tarayıcılarda etkinleştirilecek özelliklerin bulunduğu bir web sitesi olduğundan, temel işlevlerinden tüm tarayıcılarla uyumlu olduğunu bile söyleyebiliriz.
Ayrıca, PWA'lar şu anda Angular 6+ CLI, React Create Uygulaması, Polymer'den PWA Başlangıç Kiti ve Preact CLI dahil olmak üzere farklı çerçeveler için çoğu CLI'den üretilmektedir. Son olarak, Ionic Framework ekibi, her uygulama mağazasında yerel PWA'ları mümkün kılan açık kaynaklı bir Cordova alternatifi olan Capacitor fikrini ortaya attı.
Kurulum
Bir PWA'nın kritik yönlerinden biri, uygulamanın yüklenmesi. Bu işlem, isteğe bağlı iki adımda gerçekleştirilir: uygulama dosyalarının indirilmesi ve çevrimdışı depolanması ve işletim sisteminde simge kurulumu. Her iki adım da isteğe bağlı olduğundan, tarayıcıda çevrimdışı bir deneyim sunabilir veya çevrimdışı kurulum olmadan bir simge sunabilirsiniz. Ancak gerçek bir PWA her ikisini de içermelidir: HTTPS altında TLS ile sunulmalıdır ve kullanıcı bunu tarayıcıda mı yoksa kendi kurulu simgesi içinde mi kullanacağına karar verecektir.
Çevrimdışı ve anında başlatma
Bir PWA'nın beyni, uygulamanın dosyalarının indirilmesinden, bir önbelleğe depolanmasından ve daha sonra gerektiğinde sunulmasından sorumlu olan, kullanıcının cihazına yüklenen bir JavaScript dosyası olan hizmet çalışanıdır. Hizmet çalışanı yüklendikten sonra, web uygulamasının ihtiyaç duyduğu her kaynak için bir ağ proxy'si gibi davranır: onu ağdan almaya veya yerel önbellekten teslim etmeye karar verebilir, bu da uygulamayı çevrimdışı ve aynı zamanda yalnızca birkaç milisaniye, kullanıcının bağlantısı olsa bile, yerel bir uygulama başlatmayı taklit eder.
Bir servis çalışanı kurmak için, HTML belgenizin aşağıdaki gibi bir şey içermesi gerekir:
if (navigator'da ’serviceWorker’) navigator.serviceWorker.register ("sw.js");
Bu, kapsam olarak bilinen bir kavram olan mevcut alandaki geçerli klasör için "sw.js" dosyasını kullanıcıların cihazlarına yükleyecektir. Yüklendikten sonra, kapsamındaki herhangi bir URL'ye yapılacak sonraki ziyaretler bu hizmet çalışanı tarafından yönetilecektir.
Diyelim ki dört dosyaya sahip bir PWA'mız var: index.html, app.js, app.css ve logo.png. İlk şey, bu dosyaları sw.js dosyasındaki önbelleğe yüklemektir.
const kaynakları = ["index.html", "app.js", "app.css", "logo.png"]; öz. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (kaynaklar)));});
Ardından, PWA'nın her zaman önbellekten sunulması için, hizmet çalışanı içindeki getirme olayını dinlememiz ve ilk önce aşağıdaki kod parçacığı ile önbellek gibi kullanılacak önbellek politikasına karar vermemiz gerekir.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
Bu durumda, kullanıcı PWA'ya her eriştiğinde (hem tarayıcıdan hem de kurulu bir simgeden), motor dosyaları önbellekten alacaktır. Yerel uygulamalara kıyasla PWA'ların bir avantajı, cihazların bir değişiklik olduğunda tüm dosyaları tekrar indirmesinin gerekmemesi, yalnızca şeffaf bir işlemle değişen dosyayı indirmesidir. Ayrıca, uygulamanın bazı bölümlerini talep üzerine indirmeye devam edebiliriz.
Ancak asıl zorluk, sunucuda hangi dosyaların güncellendiğini nasıl bileceğinizdir, böylece bunları önbellekte değiştirebilirsiniz? Bunu yönetmek için alt düzey bir hizmet çalışanı yazmak istemiyorsanız, hizmet çalışanının oluşturulması ve yüklenen paketi güncellemeniz için kaynaklar bildiriminde size yardımcı olacak açık kaynak kitaplık Çalışma Kutusu'nu kullanabilirsiniz.
Eğer mevcutsa Kalıcı Depolama talebinde bulunmadığınız sürece, cihazda depolama baskısı varsa PWA'nızın dosyalarının silineceğini unutmayın:
if (navigator'da 'depolama' && navigator.storage'da 'kalıcı') navigator.storage.persist ();
Chrome'da ve çoğu Android tarayıcıda, uygulamanız mevcut alanın yüzde beşinden fazlasını kullanamaz; iOS'ta yalnızca ana bilgisayar başına 50MiB (yaklaşık 50MB); Edge'de toplam bellek boyutuna göre değişkendir ve Windows Mağazası'nda sınırsızdır.
Birinci sınıf deneyim
Beyne sahibiz ve şimdi kalbin zamanı: web uygulaması manifestosu. Bir web sitesini bir PWA'ya dönüştürmenin amacı, yalnızca hızlı veya çevrimdışı olarak kullanılabilir olmasını sağlamak değil, aynı zamanda işletim sisteminde kendi simgesine sahip olmasını sağlamak ve diğer yüklü uygulamalar gibi tamamen bağımsız bir deneyim sunmaktır.
Bildirim, yükleme davranışını tanımlamak için bir tarayıcı veya uygulama mağazası tarafından kullanılan PWA için meta verileri tanımlayan bir JSON dosyasıdır.
Dosya, PWA'nız için meta veri olarak çeşitli özellikleri tanımlar. Her işletim sistemi bu özellikleri okuyacak ve tercih ettiğiniz deneyime uyması için elinden gelenin en iyisini yapacaktır. Örneğin, Android "display: standalone" ifadesini okuyacak ve normal bir uygulama deneyimi oluşturacaktır. "Display: minimal-ui" ile, görünür bir URL ve TLS sertifikası ile bir deneyim yaratacaktır - güvenliğe duyarlı uygulamalar için yararlıdır. "Ekran: tam ekran" ile, durum çubuğu veya görünür geri düğmesi olmadan tamamen sürükleyici uygulamalar oluşturur. Bir dizi simge ve renk, açılış ekranlarının veya başlık çubuklarının uygulamanızın penceresi için nasıl görüneceğini tanımlar.
Web App Manifest Generator veya PWA Builder gibi, yüksek çözünürlüklü bir (minimum 512 piksel) sağlarsanız simgeyi sizin için farklı çözünürlüklerde yeniden boyutlandıracak bazı manifest oluşturucular vardır.
HTML belgenize bağlı manifest dosyasına sahip olduğunuzda, kullanıcılar tarayıcıya bağlı olarak, genellikle Ana Ekrana Ekle, Yükle veya sadece Ekle olarak adlandırılan farklı teknikler kullanarak uygulamayı yükleyebilirler. PWA'nız Bing tarafından taranabiliyorsa, Microsoft bunu otomatik olarak Microsoft Store'a ekleyecektir, böylece Windows 10 kullanıcıları buradan yükleyebilir.
Bazı işletim sistemlerinde, PWA'nız bağlantıları yakalama yeteneğine sahip olacaktır. Bu, kullanıcı uygulamayı yükledikten sonra, bildiriminiz kapsamındaki herhangi bir URL'nin, tarayıcıda veya WhatsApp, Facebook gibi diğer uygulamalarda görünüp görünmediğine bakılmaksızın, uygulamanızın sınırları içinde açılacağı anlamına gelir. veya bir e-posta.
Burada tanımladığımız PWA gereksinimlerini geçerseniz, bazı platformlar ortam rozeti (genellikle URL çubuğunda web'in kurulabilir olduğunu belirten küçük bir simge) veya bir web uygulaması başlığı sunacaktır. Tercih ederseniz, aşağıdaki parçacığı kullanarak kendi özel Yükle düğmenizi de ekleyebilirsiniz:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // kurulum yerel istemini gösterecek})
PWA kurulursa, "appinstalled" olayı pencere nesnesinde tetiklenir, böylece onu dinleyen istatistikleri takip edebilirsiniz.
Uygulama mağazaları
Bir tarayıcıdan yüklemenin en büyük avantajlarından biri, uygulama mağazası onay sürecinden kaçınabilmektir veya bir yayıncı olmak için ödeme yapmak zorunda kalabilmektir. Bu, anında yayınlama, mağazalarda kabul edilmemesi gereken şirketler veya uygulamalar için özel uygulamalar oluşturma gibi bariz avantajlarla birlikte gelir.
Ancak bazı şirketler mağazada olmak istiyor. Bugün itibariyle, PWA'ları resmi olarak kabul eden tek mağazalar Windows Mağazası ve kaiOS Mağazasıdır. Neyse ki, Capacitor (şu anda Alfa sürümünde) veya PWA Builder gibi araçlarla, diğer platformlar için de yerel paketler oluşturabilir ve imzalayabiliriz.
Google Play Store'da halihazırda özel uygulamalar altında Twitter Lite ve Google Maps Go gibi yayınlanmış bazı PWA'lar bulunmaktadır. Chrome, güvenilir web etkinlikleri aracılığıyla Chrome 68'den bir çözüm sunacaktır. Bu noktadan itibaren, PWA'mıza başlatıcılı bir Android paketi (APK) oluşturup mağazaya yükleyebileceğiz. Windows 10'daki Microsoft Mağazası için, PWA Builder sitesi şu anda bir APPX Windows 10 paketinin oluşturulmasına yardımcı oluyor. Bir web görünümü kullanarak, App Store için manuel olarak bir iOS uygulaması oluşturabilirsiniz, ancak mağazanın kuralları konusunda son derece dikkatli olabilirsiniz.
Platform entegrasyonu
Aşamalı geliştirme tekniklerini uygulayarak, anlık bildirimler, kamera ve mikrofon erişimi, coğrafi konum, sensörler, ödemeler, paylaşım diyalogları ve çevrimdışı depolama gibi birçok özelliği kullanabileceksiniz. Tüm bu özellikler, izin iletişim kutuları dahil olmak üzere doğrudan tarayıcının güvenlik modeli içinde çalışır.
Twitter, YouTube veya WhatsApp'ı URL'leri veya whatsapp: // gibi özel URI'lar aracılığıyla açmak gibi URI şemaları aracılığıyla diğer uygulamalarla da iletişim kurabiliriz.
Son olarak, Capacitor kullanılarak mağazada veya Microsoft Store'da yayınlanan yerel PWA'lar oluştururken, neredeyse tüm yerel kodları yürütmemizi sağlayacak yerel API'lere köprü oluşturabileceğiz. Windows 10 ile bu entegrasyon, donanım erişimini içerir, aynı zamanda işletim sistemi ile entegrasyonu da içerir ve Başlangıç için Pin gibi seçenekler sunar. Örneğin, Twitter PWA herhangi bir kullanıcıyı başlangıç ekranınıza sabitlemenize izin verir.
Tasarım ve kullanıcı deneyimi zorlukları
PWA'ları tasarlamanın kendine özgü zorlukları vardır, bu nedenle araştırma yapmak, mümkün olduğunca test etmek ve aşağıdakileri göz önünde bulundurmak için biraz zaman harcamak önemlidir:
- Kullanıcılar, uygulama benzeri deneyimler bekleyecek.
- Yükleme süreci hala yenidir, bu nedenle uygulamanın nasıl yükleneceğini açıklamak için fazladan çaba göstermemiz gerekir.
- Uygulamayı kullanıcı etkileşimi olmadan arka planda güncellemek harika ama aynı zamanda UX için bazı zorluklar da getiriyor.
- Masaüstünde duyarlı web tasarımı, PWA pencereleri küçük, bir mobil görüntü alanından çok daha küçük olabileceğinden yeni bir sınır alır. Bu, bugün Chrome OS'de görüldüğü gibi, bu biçim için belirli görünümler veya küçük widget'lar oluşturmamız gerektiği anlamına gelir.
- Push bildirimleri yalnızca kullanıcıya değer katmalıdır, bu nedenle doğru zamanda sormayı öğrenin ve yararlı veya ilginç olmayan mesajlar göndererek fırsatı boşa harcamayın.
- Web performansı ve çevrimdışı erişim için tasarım yapmamız gerekiyor.
PWA yılı
Bu yıl iOS ve masaüstünün eklenmesiyle, PWA'lar bugün her yerde. Ancak, yolculuklarının daha yeni başladığını hatırlamamız gerekiyor, bu nedenle sık sık değişiklikler bekleyin ve platform gelişirken mükemmel bir kullanıcı deneyimi sunmak için en son teknikler ve fikirlerle kendinizi güncel tuttuğunuzdan emin olun.
Bu makale ilk olarak 308. sayısında yayınlanmıştır. ağ, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. 308 numaralı sorunu buradan satın alın veya abone olun.
