Son zamanlarda progresif web uygulamaları hakkında çok sayıda tartışma yapıldı. Hâlâ nispeten yeni bir model olsa da bu modelin ilkeleri, Vanilla JS, React, Polymer, Angular veya başka bir çerçeveyle oluşturulan uygulamaları eşit derecede iyileştirebilir. Bu yayında, kendi progresif web uygulamanızı hemen kullanmaya başlamak için bazı seçenekleri ve referans uygulamaları özetleyeceğiz.
Progresif web uygulaması nedir?
Progresif Web Uygulamalarının her yerde çalıştığını ancak modern tarayıcılarda çok daha güçlü olduğunu unutmamak gerekir. Progresif geliştirme, bu modelin bel kemiğidir.
Aaron Gustafson, progresif geliştirmeyi yer fıstığı M&M'e benzetti. Fıstık içeriğiniz, çikolata kaplama sunum katmanınız ve JavaScript'iniz sert şeker kabuğunuzdur. Bu katmanın rengi ve deneyimi, kullanan tarayıcının özelliklerine bağlı olarak değişiklik gösterebilir.
Şeker kabuğunu, birçok Progresif Web Uygulaması özelliğinin bulunabileceği yer olarak düşünebilirsiniz. Bunlar, web'in ve uygulamaların en iyi yönlerini bir araya getiren deneyimlerdir. Bu uzantılar, tarayıcı sekmesinde ilk ziyaretten itibaren kullanıcılara fayda sağlar ve yükleme gerektirmez.
Kullanıcı, tekrarlanan kullanımlar sayesinde bu uygulamalarla bir ilişki kurarken uygulamayı daha da cazip hale getirir. Yavaş ağ bağlantılarında çok hızlı yüklenir (hizmet çalışanı sayesinde), alakalı push bildirimleri gönderir ve kullanıcının ana ekranında, uygulamayı tam ekran uygulama deneyimi olarak yükleyebilecek birinci sınıf bir simge bulundurur. Ayrıca akıllı web uygulaması yükleme banner'larından da yararlanabilirler.
Progresif web uygulamaları:
- Progresif: Temel kiracı olarak progresif geliştirme ile oluşturuldukları için tarayıcı seçiminden bağımsız olarak her kullanıcı için çalışır.
- Uyumlu: Masaüstü, mobil, tablet veya gelecekte kullanıma sunulacak her form faktörüne uyar.
- Bağlantıdan bağımsız: Çevrimdışı veya düşük kaliteli ağlarda çalışacak şekilde hizmet işçileriyle geliştirilmiştir.
- Uygulama benzeri: Uygulama tarzı gezinme ve etkileşimler sağlamak için uygulama kabuğu modelini kullanın.
- Taze: Service Worker güncelleme işlemi sayesinde her zaman günceldir.
- Güvenli: İzlemeyi önlemek ve içeriğin bozulmadığından emin olmak için TLS üzerinden yayınlanır.
- Keşfedilebilir: W3C manifestleri ve arama motorlarının bunları bulmasına olanak tanıyan hizmet çalışanı kayıt kapsamı sayesinde "uygulama" olarak tanımlanabilir.
- Yeniden etkileşim kurulabilir: Push bildirimleri gibi özelliklerle yeniden etkileşimi kolaylaştırın.
- Yüklenebilir: Kullanıcıların uygulama mağazasına gitmek zorunda kalmadan en faydalı buldukları uygulamaları ana ekranlarında "saklamasına" olanak tanıyor.
- Bağlanabilir: URL üzerinden kolayca paylaşılabilir ve karmaşık kurulum gerektirmez.
Progresif web uygulamaları, Android için Chrome'a özgü değildir. Aşağıda, Pokedex progresif web uygulamasının Android için Firefox'ta (Beta) çalıştığını ve erken ana ekrana ekleme ve hizmet çalışanı önbelleğe alma özelliklerinin sorunsuz şekilde çalıştığını görebilirsiniz.
Bu modelin "kademeli" yapısının güzel yönlerinden biri, tarayıcı tedarikçileri bu özellikler için daha iyi destek sunarken özelliklerin kademeli olarak kullanıma sunulabilmesidir. Pokedex gibi progresif web uygulamaları, Android'de Opera'da da harika çalışır. Ancak uygulamada birkaç önemli fark vardır:
Progresif Web Uygulamaları hakkında ayrıntılı bilgi edinmek için Alex Russell'ın bu uygulamaları tanıtan orijinal blog yayınını okuyun. Paul Kinlan, Progresif Web Uygulamaları için göz atmaya değer çok faydalı bir Stack Overflow etiketi de başlattı.
İlkeler
Web uygulaması manifesti
Manifest, web uygulamanızın, kullanıcının ana ekranında daha yerel bir varlık göstermesini sağlar. Uygulamanın tam ekran modunda (URL çubuğu olmadan) başlatılmasına olanak tanır, ekran yönü üzerinde kontrol sağlar ve Android'deki Chrome'un son sürümlerinde adres çubuğu için Başlangıç Ekranı ve tema rengi tanımlamayı destekler. Ayrıca, yukarıda belirtilen Başlangıç ekranı ve ana ekran simgesi için kullanılan, boyut ve yoğunluğa göre bir dizi simgenin tanımlanmasında da kullanılır.
Örnek manifest dosyasını Web Başlangıç Paketi'nde ve Google Chrome örnekleri bölümünde bulabilirsiniz. Bruce Lawson bir Manifest Oluşturucu yazdı ve Mounir Lamouri de incelenmesi gereken pratik bir Web Manifest doğrulayıcı hazırladı.
Kişisel projelerimde, hem web uygulaması manifest'i hem de iOS, masaüstü vb. platformlarda kullanılacak doğru boyutta simgeler oluşturmak için realfavicongenerator'ı kullanıyorum. favicons Düğüm modülü de derleme işleminizin bir parçası olarak benzer bir çıkış elde edebilir.
Chromium tabanlı tarayıcılar (Chrome, Opera vb.) web uygulaması manifestlerini şu anda destekliyor. Firefox aktif olarak destek geliştiriyor ve Edge bunları değerlendirme aşamasında olarak listeliyor. WebKit/Safari, bu özelliği uygulama niyetleri hakkında henüz herkese açık sinyaller yayınlamamıştır.
Daha fazla bilgi için Web'in Temelleri'nde Android için Chrome'da Web Uygulama Manifesti ile Yüklenebilir Web Uygulamaları başlıklı makaleyi inceleyin.
"Ana ekrana ekle" banner'ı
Android'deki Chrome, sitenizi ana ekrana eklemeyi bir süredir destekliyor ancak son sürümler, yerel web uygulaması yükleme banner'ları kullanılarak sitelerin proaktif olarak eklenmesi önerisini de destekliyor.
Uygulama yükleme istemlerinin gösterilmesi için uygulamanızın:
- Geçerli bir web uygulaması manifest'ine sahip olun
- HTTPS üzerinden sunulmalıdır (ücretsiz sertifika için letsencrypt'e bakın)
- Geçerli bir hizmet çalışanının kayıtlı olması gerekir.
- Ziyaretler arasında en az 5 dakika olmak üzere, iki kez ziyaret edilmiş olmalıdır
Temel banner'ları kapsayan çeşitli Uygulama Yükleme banner örnekleri mevcuttur. Bu örnekler, ilgili uygulamaları görüntüleme gibi daha karmaşık kullanım alanlarına kadar devam eder.
Çevrimdışı önbelleğe alma için hizmet çalışanı
Service Worker, web sayfanızdan ayrı olarak arka planda çalışan bir komut dosyasıdır. Sunulan sayfalardan yapılan ağ istekleri de dahil olmak üzere etkinliklere yanıt verir. Hizmet çalışanlarının kullanım ömrü kasıtlı olarak kısadır.
Bir etkinlik aldığında uyanır ve yalnızca etkinliği işlemesi gerektiği sürece çalışır. Hizmet çalışanı, kaynakları önbelleğe almak için Cache API'yi kullanmanıza olanak tanır ve kullanıcılara çevrimdışı bir deneyim sunmak için kullanılabilir.
Hizmet çalışanları, çevrimdışı önbelleğe alma için güçlüdür ancak sitenize veya web uygulamanıza yapılan tekrar ziyaretlerde anında yükleme şeklinde önemli performans kazanımları da sunar. Uygulama kabuğunuzu çevrimdışı çalışacak şekilde önbelleğe alabilir ve içeriğini JavaScript kullanarak doldurabilirsiniz.
Google Chrome örnekleri sayfasında kapsamlı bir hizmet çalışanı örneği grubu mevcuttur. Jake Archibald'ın çevrimdışı tarif defteri okunmalı. Bu nedenle, hizmet çalışanı konusunda yeniyse Paul Kinlan'ın ilk çevrimdışı web uygulamanızın adım adım açıklamalı kılavuzunu kesinlikle denemenizi öneririm.
Ekibimiz, çeşitli Service Worker yardımcı yardımcı programlarının bakımını yapar ve hizmet çalışanı kurulumuyla ilgili ek yükü azaltmak için kullanışlı bulduğumuz araçlar geliştirir. Bu kitaplıklar Hizmet Çalışanı Kitaplıkları bölümünde listelenir. Bunlardan ikisi şunlardır:
- sw-precache: Web uygulama kabuğunuzu önbelleğe almak için yararlı bir hizmet çalışanı komut dosyası oluşturan derleme zamanı aracı
- sw-toolbox: Sık kullanılmayan kaynaklar için çalışma zamanında önbelleğe alma sağlayan bir kitaplık
Jeff Posnick, sw-precache ile ilgili sw-precache modülüyle çevrimdışı öncelikli, hızlı başlıklı kısa bir giriş ve aynı araçla ilgili faydalı bulabileceğiniz bir codelab yazdı.
Chrome, Opera ve Firefox, servis çalışanı desteğini kullanıma sundu. Edge ise bu özellikle ilgili ilgiyle ilgili olumlu herkese açık sinyaller aldı. Safari, bir mühendisin önerdiği beş yıllık plan aracılığıyla bu konuyla ilgili ilgiden kısaca bahsetmişti.
Yeniden etkileşim için push bildirimleri
Böylece, kullanıcıların sekme dışında etkileşimde bulunabileceği web uygulamaları oluşturabilirsiniz. Tarayıcı kapalı olabilir ve kullanıcıların deneyiminizle etkileşime geçmek için web uygulamanızı etkin olarak kullanması bile gerekmez. Bu özellik, daha önce özetlenen bazı özelliklerin üzerine inşa etmek için hem Service Worker hem de web uygulaması manifesti gerektirir.
Push API, Chrome'da uygulanmıştır, Firefox'ta geliştirme aşamasındadır ve Edge'de değerlendirme aşamasındadır. Safari'nin bu özelliği uygulama niyeti henüz herkese açık olarak paylaşılmamıştır.
Open Web'de Push Bildirimleri, Matt Gaunt'ın Push ayarlarını yapmaya kapsamlı bir giriştir. Web'in Temelleri sayfasında Push Bildirimleri codelab'i de mevcuttur.
Videoları tercih ediyorsanız Chrome Ekibi'nden Michael van Ouwerkerk'in Push ile ilgili 6 dakikalık bir tanıtım videosu da mevcuttur.
Gelişmiş özellikleri katmanlama
Web uygulamanızı görüntülemek için kullanılan tarayıcıya bağlı olarak kullanıcı deneyiminizin farklı düzeylerde tatlılık içerebileceğini unutmayın. Sert şeker kabuğunun kontrolü sizdedir.
Web platformuna eklenen arka plan senkronizasyonu (web uygulamanız kapalıyken bile bir sunucuyla veri senkronizasyonu için) ve Web Bluetooth (web uygulamanızdan Bluetooth cihazlarla iletişim kurmak için) gibi ek özellikler de bu şekilde Progressive Web Uygulamanıza katman halinde eklenebilir.
Tek seferlik arka plan senkronizasyonu Chrome'da etkinleştirildi. Jake Archibald, Wikipedia'nın çevrimdışı sürümünü içeren videosu ve makalesi ile bu özelliğin nasıl kullanıldığını gösteriyor. François Beaufort'un, bu API'yi denemek isteyenler için çeşitli Web Bluetooth örnekleri de mevcuttur.
Çerçeveye uygun
Yukarıdaki ilkelerden herhangi birini, oluşturduğunuz mevcut bir uygulamaya veya çerçeveye uygulamanızı engelleyen hiçbir şey yoktur. Progresif Web Uygulamanızı oluştururken göz önünde bulundurmanız gereken diğer ilkeler arasında kullanıcı odaklı performans modeli RAIL ve FLIP tabanlı animasyonlar yer alır.
2016'da, temel özellik olarak Progressive Web Apps desteğini organik olarak barındıran şablon ve başlangıç projesi sayısının artacağını umuyorum. O zamana kadar, bu özellikleri kendi uygulamalarınıza eklemenin önündeki engel çok yüksek değildir ve IMHO'dur (çaba sarf etmeye değer).
Mimari
Progresif web uygulaması modelinde "hepsi bir arada" yaklaşımının farklı seviyeleri vardır ancak yaygın olarak kullanılan bir yaklaşım, bunların uygulama kabuğu etrafında tasarlanmasıdır. Bu zorunlu bir şart olmasa da bazı avantajları vardır.
Uygulama Kabuğu mimarisi, uygulama kabuğunun (Kullanıcı Arayüzü) önbelleğe alınmasını teşvik eder. Böylece, çevrimdışı çalışır ve JavaScript kullanarak içeriğini doldurur. Tekrarlanan ziyaretlerde bu kullanım, internet bağlantısı olmadan, hatta içeriğiniz nihayetinde oradan gelse bile ekranda anlamlı pikseller almanıza olanak tanır. Bu, önemli performans kazanımlarını da beraberinde getirir.
Jeremy Keith kısa süre önce bu tür bir modelde sunucu tarafı oluşturmanın yedek olarak değil, istemci tarafı oluşturmanın ise iyileştirme olarak görülmesi gerektiğini yorumladı. Bu geri bildirim doğru.
Uygulama kabuğu modelinde, sunucu tarafı oluşturma mümkün olduğunca kullanılmalı ve istemci tarafı progresif oluşturma, hizmet çalışanı desteklendiğinde deneyimi "geliştirdiğimiz" şekilde bir geliştirme olarak kullanılmalıdır. Bu konuya birçok açıdan yaklaşılabilir.
Mimari hakkındaki makalemizi okumanızı ve benzer ilkeleri kendi uygulamanıza ve paketinize en iyi şekilde nasıl uygulayabileceğinizi değerlendirmenizi öneririm.
Başlangıç ortak metinleri
Uygulama kabuğu
app-shell deposu, Uygulama Kabuğu mimarisinin neredeyse tamamlanmış bir uygulamasını içerir. Express.js ile yazılmış bir arka ucu ve ES2015 ile yazılmış bir ön ucu vardır.
Modelin hem istemci hem de sunucu tarafı bölümlerini kapsadığından bununla ilgili çok fazla şey olduğundan, kod tabanını öğrenmeniz biraz zaman alacaktır. Aksi takdirde, şu anda en kapsamlı Progresif Web Uygulaması başlangıç noktamızdır. Bu projede bir sonraki odak noktamız Dokümanlar olacak.
Polimer başlangıç kiti
Polymer web uygulamalarının resmi başlangıç noktası aşağıdaki progresif web uygulaması özelliklerini destekler:
- Web uygulaması manifesti
- Android için Chrome Başlangıç Ekranı
- Platinum SW öğeleriyle hizmet çalışanı çevrimdışı önbelleğe alma
- Platinum Push öğeleriyle push bildirimleri (manuel kurulum gerekir)
PSK'nın mevcut sürümünde, bazı Progresif Polimer web uygulamalarında bulunan daha gelişmiş performans kalıplarının (ör.uygulama kabuğu modeli, eşzamansız yükleme) desteği yoktur.
Bu kalıpları 2016'da PSK'ye dahil etmeyi planlıyoruz. Ancak bu konudaki ilk denemeleri Rob Dodson'un Polymer Zuperkulblog uygulamasında ve Eric Bidelman'ın mükemmel Polymer Perf Patterns konuşmasında bulabilirsiniz.
Web Başlangıç Kiti
Yeni basit projeler için önerilen başlangıç noktamız aşağıdaki Progresif Web Uygulaması özelliklerini içerir:
- Web uygulaması manifesti
- Android için Chrome açılış ekranı
- sw-precache sayesinde hizmet çalışanı önbelleğe alma
Basit JS/ES2015 ile çalışmayı tercih ediyorsanız ve Polymer'i kullanamıyorsanız Web Başlangıç Kiti, kod snippet'lerini yeniden kullanabileceğiniz veya kopyalayacağınız bir referans noktası olarak yararlı olabilir.
Çerçeve içeren ve içermeyen progresif web uygulamaları
Topluluk üyeleri, hem JS kitaplıkları ve çerçeveleri hem de bunlar olmadan bir dizi açık kaynak Progresif Web Uygulaması oluşturdu. İlham almak istiyorsanız aşağıdaki depoları referans olarak kullanabilirsiniz. Ayrıca bu uygulamalar gerçekten çok iyi.
Vanilla JavaScript
- Paul Lewis'in Sesli Notlar,
app-shell(yazım) ile benzer bir mimari kullanılarak oluşturulmuştur - Jake Archibald tarafından hazırlanan Offline Wikipedia (video)
- Paul Kinlan tarafından Air Horner
- Paul Lewis'un Guitar Tuner (yazım)
Polymer
- Rob Dodson tarafından hazırlanan Zuperkulblog (slaytlar)
React
- Jeff Posnick tarafından geliştirilen iFixit: Uygulama kabuğu önbelleğe alma için
sw-precachekullanır (slaytlar)
Sanal DOM
- Nolan Lawson tarafından geliştirilen Pokedex: Progresif oluşturmaya yardımcı olmak için "her şeyi bir web çalışanında yap" yaklaşımını uygulayan mükemmel bir progresif web uygulaması. (yazım)
Angular.js
- Kenneth Auchenberg tarafından geliştirilen Timey.in; kaynakları önceden önbelleğe almak için de
sw-precachekullanır
Kapanış notları
Daha önce de belirtildiği gibi, progresif web uygulamaları henüz yeni bir teknolojidir ancak bu uygulamaların arkasındaki metodolojileri denemek ve kendi web uygulamalarınıza ne kadar iyi uygulanabileceğini görmek için heyecan verici bir zamandır.
Paul Kinlan şu anda Progresif Web Uygulamaları ile ilgili Web Temel Bilgileri kılavuzunu planlamaktadır. Kapsanan konuların kapsamını genişletmek için lütfen bu ileti dizisinde yorum yapın.
Daha fazla bilgi
- Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelerden Kurtulmak
- Progresif Web Uygulamaları Neden Web Geliştirmenin Geleceğidir?
- Progresif Web Uygulamaları: Primetime için hazır
- ServiceWorker ile Progresif Uygulama Oluşturma
- Gelecek Progresif Web Uygulamalarında
- Progresif Web Uygulaması: Mobil Cihazları Kullanmanın Yeni Bir Yolu
- Pokémon hayranları için progresif web uygulaması: Pokedex.org
- Chrome Developer Summit Özeti: Progresif Web Uygulamaları