Son zamanlarda Progresif Web Uygulamaları hakkında çok konuşulan bir konu. Bunlar nispeten yeni bir model olsa da ilkeleri vanilla JS, React, Polymer, Angular veya başka bir çerçeveyle oluşturulan uygulamaları eşit ölçüde geliştirebilir. Bu yayında, kendi progresif web uygulamanızı hemen kullanmaya başlamanıza yardımcı olacak bazı seçenekleri ve referans uygulamaları özetleyeceğim.
Progresif Web Uygulaması (pwa) 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 temelini oluşturuyor.
Aaron Gustafson, progresif geliştirmeyi yer fıstığı M&M'ye benzetti. İçeriğiniz yer alır, çikolata kaplama sunum katmanınız, JavaScript'iniz ise sert şeker kabuğudur. Bu katmanın rengi ve deneyimi, onu kullanan tarayıcının özelliklerine bağlı olarak değişebilir.
Ş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. Bunlar, herhangi bir yükleme gerekmeden, tarayıcı sekmesinde ilk ziyaretten itibaren kullanıcılar için yararlıdır.
Kullanıcı tekrar tekrar kullanım yoluyla bu uygulamalarla bir ilişki kurdukça şeker kabuğu daha da tatlı hale gelir. Yavaş ağ bağlantılarında (Service Worker sayesinde çok hızlı yüklenir, alakalı Push Bildirimleri gönderilir) ve kullanıcının ana ekranında, bunları tam ekran uygulama deneyimleri olarak yükleyebilen birinci sınıf bir simge bulunur. Ayrıca, akıllı web uygulaması yükleme banner'larından da yararlanabilirler.
Progresif Web Uygulamaları,
- Progresif: Temel bir kiracı olarak aşamalı geliştirme ile oluşturulmuştur. Bu nedenle, tarayıcı seçimi ne olursa olsun her kullanıcı için uygundur.
- Duyarlı - Tüm form faktörlerini, masaüstü bilgisayarları, mobil cihazları, tabletleri veya yenilerini sığdırın.
- Bağlantıdan bağımsız: Çevrimdışı veya düşük kaliteli ağlarda çalışmak için servis çalışanlarıyla gelişmiş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: Gözetmeyi önlemek ve içeriğin değiştirilmediğinden emin olmak için TLS ile sunulur.
- Keşfedilebilir: Arama motorlarının bunları bulmasına olanak tanıyan W3C manifestleri ve hizmet çalışanı kayıt kapsamı sayesinde "uygulamalar" olarak tanımlanabilir.
- Yeniden etkileşim kurulabilir: Push bildirimleri gibi özelliklerle yeniden etkileşimi kolaylaştırın.
- Yüklenebilir: Kullanıcıların, bir uygulama mağazasıyla uğraşmadan, en yararlı buldukları uygulamaları ana ekranlarında "saklamalarına" olanak tanır.
- Bağlanabilir: URL aracılığıyla kolayca paylaşın ve karmaşık bir kurulum gerektirmez.
Progresif Web Uygulamaları ayrıca Android için Chrome'a özgü değildir. Aşağıda, Android için Firefox'ta (Beta) çalışan Pokedex Progresif Web Uygulaması'nı (Erken Ana ekrana ekle) ve hizmet çalışanı önbelleğe alma özelliklerinin sorunsuz bir şekilde çalıştığını görebiliriz.
Bu modelin "progresif" doğasının güzel yanlarından biri de, tarayıcı satıcıları kendileri için daha iyi destek sunduklarından, özelliklerin kademeli olarak açılabilmesidir. Pokedex gibi progresif web uygulamaları da elbette Android'deki Opera'da çok iyi performans göstermektedir. Ancak arada göze çarpan birkaç farklılık söz konusudur:
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 ayrıca Progresif Web Uygulamaları için oldukça faydalı bir Stack Overflow etiketi 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 simgeyi tanımlamak üzere de kullanılır.
Örnek manifest dosyası, Web Starter Kit ve üzeri Google Chrome örneklerinde bulunabilir. 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ı manifesti hem de iOS, masaüstü vb. platformlarda kullanım için doğru boyutlu simgelerin oluşturulmasında realfavicongenerator'dan yararlanı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.) şu anda Firefox'un aktif olarak geliştirdiği web uygulaması manifestlerini destekliyor ve Edge bu manifestleri değerlendiriliyor olarak listeliyor. WebKit/Safari, özelliği kullanıma alma amaçlarıyla ilgili henüz herkese açık sinyaller yayınlamadı.
Daha ayrıntılı bilgi için Web'in Temelleri'ndeki Android için Chrome'da Web Uygulaması Manifest ile Yüklenebilir Web Uygulamaları başlıklı makaleyi okuyun.
"Ana ekrana ekle" banner'ı
Android için Chrome, bir süredir sitenizi ana ekrana ekleme özelliğini destekliyor, ancak son sürümler sitelerin yerel Web Uygulaması yükleme banner'ları kullanılarak proaktif bir şekilde eklenmesini de desteklemektedir.
Uygulama yükleme istemlerinin uygulamanızı görüntülemesi için:
- Geçerli bir web uygulaması manifest'ine sahip olma
- HTTPS üzerinden sunulmalıdır (ücretsiz sertifika için letsencrypt konusuna 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. Hizmet verdiği sayfalardan yapılan ağ istekleri de dahil olmak üzere etkinliklere yanıt verir. Bir hizmet çalışanının ömrü kasıtlı olarak kısadır.
Bir etkinlik aldığında uyanır ve yalnızca işlemesi gereken süre boyunca çalışır. Hizmet çalışanı, kaynakları önbelleğe almak için Cache API'yi kullanmanıza olanak tanır ve kullanıcılara çevrimdışı deneyim sunmak için kullanılabilir.
Service Worker'lar çevrimdışı önbelleğe alma için güçlüdür ancak aynı zamanda sitenize veya web uygulamanıza yapılan yinelenen ziyaretler için anında yükleme şeklinde önemli performans kazanımları sunar. Çevrimdışı çalışması için uygulama kabuğunuzu önbelleğe alabilir ve JavaScript kullanarak içeriğini doldurabilirsiniz.
Google Chrome örneklerinde kapsamlı Service Worker örnekleri 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. Bunlar Hizmet Çalışanı Kitaplıkları'nda listelenir. Bunların başlıca ikisi şunlardır:
- sw-precache: Web uygulaması kabuğunuzu önceden önbelleğe almak için yararlı bir hizmet çalışanı komut dosyası oluşturan derleme zamanı aracıdır
- sw-toolbox: Nadiren kullanılan kaynaklar için çalışma zamanı önbelleğe alma sağlayan bir kitaplık
Jeff Posnick, sw-precache hakkında yararlı bulabileceğiniz sw-precache modülü ve codelab adlı kısa bir makale hazırladı.
Chrome, Opera ve Firefox'ta, Edge'in özelliğe olan ilgilerine dair olumlu kamusal işaretler bulunan Service Worker'lar için destek uygulanmaya başlandı. Safari, bir mühendisin önerdiği beş yıllık plan aracılığıyla ürünle ilgilendiğinden kısaca bahsetti.
Yeniden etkileşim için push bildirimleri
Verimli bir şekilde, kullanıcıların bir sekmenin dışında etkileşim kurabileceği web uygulamaları oluşturabilirsiniz. Tarayıcı kapatılabilir ve deneyiminizle etkileşimde bulunmak için web uygulamanızı aktif olarak kullanmaları 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'si Chrome'da uygulanmakta, Firefox'ta geliştirme aşamasında ve Edge'de üzerinde düşünme aşamasında. Safari'den henüz bu özelliği uygulamak istediklerine dair herkese açık bir sinyal yok.
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.
Daha çok video çekmeyi tercih ediyorsanız Chrome ekibinden Michael van Ouwerkerk'ün de Push için 6 dakikalık bir tanıtımı var.
Gelişmiş özellikleri katmanlar halinde kullanma
Web uygulamanızı görüntülemek için kullanılan tarayıcıya bağlı olarak kullanıcı deneyiminizin tatlılık seviyelerinin farklı olabileceğini unutmayın. Sert şeker kabuğunun kontrolü sizdedir.
Web platformuna gelen Arka Plan Senkronizasyonu (web uygulamanız kapalıyken bile bir sunucuyla veri senkronizasyonu için) ve Web Bluetooth (web uygulamanızdan Bluetooth cihazlarla konuşmak için) gibi ek özellikler de Progresif Web Uygulamanıza bu şekilde eklenebilir.
Chrome'da tek seferlik Arka Plan Senkronizasyonu etkinleştirildi ve Jake Archibald'ın çevrimdışı Wikipedia uygulamasını ve bu uygulamayı çalışırken gösteren makalesini gösteren bir video var. Francois Beaufort, API'yi denemek isterseniz çeşitli Web Bluetooth örnekleri de sunuyor.
Çerçeveye uygun
Yukarıdaki ilkelerden herhangi birini, üzerinde çalıştığınız mevcut bir uygulama veya çerçeveye uygulamanızı hiçbir şey durduramaz. Progresif Web Uygulamanızı oluştururken unutmamanız gereken diğer birkaç ilke de RAIL kullanıcı merkezli performans modeli ve FLIP tabanlı animasyonlardır.
2016'da, temel özellik olarak Progresif Web Uygulamaları'na verilen desteğin artarak 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 zor bir şart olmamakla birlikte çeşitli avantajlar sağlar.
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, 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 modelde sunucu tarafı oluşturmanın yedek olarak görülmemesi gerektiğini, ancak istemci taraflı oluşturmanın bir geliştirme olarak görülmesi gerektiğini yorumladı. Bu, makul bir geri bildirimdir.
Uygulama Kabuğu modelinde sunucu tarafı oluşturma mümkün olduğunca fazla kullanılmalı ve istemci taraflı progresif oluşturma, nasıl hizmet çalışanı desteklendiğinde deneyimi "geliştirdiğimiz" şekilde bir geliştirme olarak kullanılmalıdır. Buna nihayetinde yaklaşılmanın birçok yolu vardır.
Mimari yazımızı okumanız ve benzer ilkelerin kendi uygulamanıza ve yığınınıza en iyi şekilde nasıl uygulanabileceğini 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'de yazılmış bir arka ucu ve ES2015'te yazılmış bir kullanıcı arabirimi 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 an için en kapsamlı Progresif Web Uygulaması (PWA) başlangıç noktamız budur. Bu projede bir sonraki odağımız Dokümanlar olacak.
Polimer başlangıç seti
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 öğeleri ile Push Bildirimleri (manuel kurulum gerekir)
PSK'nın mevcut sürümü, bazı Progressive Polymer web uygulamalarında bulunan daha gelişmiş performans kalıplarının (ör.Uygulama Kabuğu modeli, eşzamansız yükleme) bazıları için desteklenmemektedir.
Bu kalıpları 2016'da PSK'da uygulamayı amaçlıyoruz. Ancak bu konuyla ilgili ilk denemelere Rob Dodson'ın Polymer Zuperkulblog uygulamasından ve Eric Bidelman'ın mükemmel Polymer PerfPattern konuşmasından ulaşabilirsiniz.
Web Başlangıç Kiti
Yeni vanilya projeleri için üzerinde düşünülmüş başlangıç noktamız, aşağıdaki Progresif Web Uygulaması özelliklerini içerir:
- Web Uygulaması manifesti
- Android için Chrome Başlangıç Ekranı
- sw-precache sayesinde hizmet çalışanına önceden önbelleğe alma
Vanilla JS/ES2015 ile çalışmayı tercih ediyor ve Polymer'i kullanamıyorsanız Web Starter Kit, kod snippet'lerini yeniden kullanabileceğiniz veya çalabileceğiniz bir referans noktası olarak faydalı olabilir.
Çerçeve içeren ve içermeyen progresif web uygulamaları
Topluluk üyeleri tarafından JS kitaplıkları ve çerçeveleri olan ve olmayan çeşitli açık kaynak Progresif Web Uygulamaları geliştirilmiştir. İlham almak istiyorsanız aşağıdaki depoları referans olarak kullanabilirsiniz. Bunlar da oldukça iyi uygulamalar.
Vanilya JavaScript
- Paul Lewis'in Sesli Notlar,
app-shell(yazım) ile benzer bir mimari kullanılarak oluşturulmuştur - Jake Archibald'dan Çevrimdışı Wikipedia (video)
- Air Horner - Paul Kinlan
- Paul Lewis'ten Gitar Tuner (yazan)
Polymer
- Rob Dodson'dan Zuperkulblog (slaytlar)
Tepki ver
Sanal DOM
- Nolan Lawson'dan Pokedex: Progresif oluşturma konusunda yardımcı olmak için "her şeyi bir web çalışanıyla yap" yaklaşımını uygulayan mükemmel progresif web uygulaması. (yazma)
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 emekleme aşamasındadır, ancak bu metodolojileri deneyip kendi web uygulamalarınıza ne kadar etkili olabildiklerini görmek için heyecan verici bir dönemdeyiz.
Paul Kinlan şu anda Progresif Web Uygulamaları ile ilgili Web'in Temelleri kılavuzunu planlıyor. İncelenmesini istediğiniz alanlar varsa lütfen ileti dizisine yorum yapmaktan çekinmeyin.
Daha fazla bilgi
- Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelere Kaçış
- Neden Progresif Web Uygulamaları, Web Geliştirmenin Geleceğidir?
- Progresif Web Uygulamaları: Primetime için hazır
- ServiceWorker ile Progresif Uygulama Oluşturma
- Geleceğin Progresif Web Uygulamaları (PWA)
- Progresif Web Uygulaması: Mobil Ortamı Deneyimlemenin Yeni Yolu
- Pokémon hayranları için progresif web uygulaması Pokedex.org ile tanışın
- Chrome Developer Summit Özeti: Progresif Web Uygulamaları