Son zamanlarda Progresif Web Uygulamaları hakkında çok sayıda olumlu tartışma yapılıyor. Nispeten yeni bir model olmalarına rağmen, ilkeleri vanilla JS, React, Polymer, Angular veya başka bir çerçeveyle oluşturulmuş uygulamaları eşit şekilde geliştirebilir. Bu yayında, kendi progresif web uygulamanızı kullanmaya başlamanız için bazı seçenekleri ve referans uygulamaları özetleyeceğim.
Progresif web uygulaması (PWA) nedir?
Progresif Web Uygulamaları her yerde çalışır ancak modern tarayıcılarda daha güçlüdür. Progresif geliştirme, modelin temelini oluşturur.
Aaron Gustafson, progresif geliştirmeyi fıstıklı M&M'e benzetmiştir. Fıstık içeriğiniz, çikolata kaplaması sunum katmanınız ve JavaScript'iniz sert şeker kabuğudur. Bu katmanın rengi ve deneyim, tarayıcının özelliklerine bağlı olarak değişebilir.
Şeker kaplamayı, birçok Progresif Web Uygulaması özelliğinin barındırılabileceği bir yer olarak düşünebilirsiniz. Web'in ve uygulamaların en iyi özelliklerini bir araya getiren deneyimlerdir. Kullanıcılar için tarayıcı sekmesindeki ilk ziyaretten itibaren faydalıdır ve yükleme gerektirmez.
Kullanıcı bu uygulamalarla tekrar tekrar kullanarak ilişki kurdukça şeker kabuğunu daha da tatlı 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 tam ekran uygulama deneyimleri olarak yüklenebilen birinci sınıf bir simgeye sahip olur. Ayrıca akıllı web uygulaması yükleme banner'larından da yararlanabilirler.
Progresif web uygulamaları,
- Progresif: Temel bir 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.
- Duyarlı: Masaüstü, mobil, tablet veya gelecekte çıkacak her türlü form faktörüne uyum sağlar.
- Bağlantıdan bağımsız: Çevrimdışı veya düşük kaliteli ağlarda çalışmak için hizmet çalışanlarıyla geliştirilmiştir.
- Uygulama benzeri: Uygulama tarzı gezinme ve etkileşimler sağlamak için uygulama kabuğu modelini kullanın.
- Güncel: Hizmet çalışanı güncelleme süreci sayesinde her zaman günceldir.
- Güvenli: Gözetlemeyi önlemek ve içeriğin değiştirilmediğinden emin olmak için TLS üzerinden sunulur.
- Keşfedilebilir: W3C manifestleri ve arama motorlarının 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şim kurmayı kolaylaştırın.
- Yüklenebilir: Kullanıcıların en yararlı buldukları uygulamaları, uygulama mağazasıyla uğraşmadan ana ekranlarında "tutmalarına" izin verin.
- Bağlantı oluşturulabilir: URL aracılığıyla kolayca paylaşılabilir ve karmaşık bir yükleme işlemi gerektirmez.
Progresif Web Uygulamaları, Android için Chrome'a özgü de değildir. Aşağıda, Pokedex Progresif Web Uygulaması'nın Android için Firefox'ta (Beta) çalıştığını ve ana ekrana ekleme ile hizmet çalışanı önbelleğe alma özelliklerinin sorunsuz çalıştığını görebilirsiniz.
Bu modelin "progresif" yapısının güzel yönlerinden biri, tarayıcı tedarikçileri daha iyi destek sundukça özelliklerin kademeli olarak etkinleştirilebilmesidir. Pokedex gibi progresif web uygulamaları, Android'deki Opera'da da elbette mükemmel çalışır ancak uygulamada birkaç önemli fark vardır:
Progresif Web Uygulamaları hakkında daha fazla bilgi edinmek için Alex Russell'ın bu uygulamaları tanıttığı 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 görünüme sahip olmasını 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 son Chrome sürümlerinde adres çubuğu için başlangıç ekranı ve tema rengi tanımlamayı destekler. Ayrıca, yukarıda bahsedilen başlangıç ekranı ve ana ekran simgesi için kullanılan simge grubunu boyut ve yoğunluğa göre tanımlamak amacıyla da kullanılır.
Örnek bir manifest dosyasını Web Starter Kit'te ve Google Chrome örneklerinde bulabilirsiniz. Bruce Lawson bir Manifest Oluşturucu yazdı ve Mounir Lamouri de göz atmaya değer kullanışlı bir Web Manifest doğrulayıcısı yazdı.
Kişisel projelerimde, hem web uygulaması manifesti hem de iOS, masaüstü vb. platformlarda kullanılmak üzere doğru boyutta simgeler oluşturmak için realfavicongenerator'ı kullanıyorum. favicons Node modülü de derleme sürecinizin bir parçası olarak benzer bir çıkış elde edebilir.
Chromium tabanlı tarayıcılar (Chrome, Opera vb.) şu anda web uygulaması manifestlerini desteklemektedir. Firefox bu desteği aktif olarak geliştirmekte ve Edge, bu desteği değerlendirme aşamasında olarak listelemektedir. WebKit/Safari, özelliği uygulama niyetleriyle ilgili henüz herkese açık sinyaller yayınlamadı.
Daha fazla bilgi için Web'in Temelleri'ndeki Android için Chrome'da Web Uygulaması Manifesti ile Yüklenebilir Web Uygulamaları başlıklı makaleyi okuyun.
"Ana ekrana ekle" banner'ı
Android'de Chrome, bir süredir sitenizi ana ekrana eklemeyi destekliyor. Ancak son sürümler, yerel web uygulaması yükleme banner'larını kullanarak sitelerin eklenmesini proaktif olarak önermeyi de destekliyor.
Uygulama yükleme istemlerinin gösterilmesi için uygulamanızın şu koşulları karşılaması gerekir:
- Geçerli bir web uygulaması manifestine sahip olma
- HTTPS üzerinden sunulmalıdır (ücretsiz sertifika için letsencrypt sayfasına bakın).
- Geçerli bir hizmet çalışanı kayıtlı olmalıdır.
- Ziyaretler arasında en az 5 dakika olacak şekilde iki kez ziyaret edilmelidir.
Temel banner'lardan ilgili uygulamaları gösterme gibi daha karmaşık kullanım alanlarına kadar çeşitli uygulama yükleme banner'ı örnekleri mevcuttur.
Çevrimdışı önbelleğe alma için hizmet çalışanı
Hizmet çalışanı, web sayfanızdan ayrı olarak arka planda çalışan bir komut dosyasıdır. Sunduğu sayfalardan yapılan ağ istekleri de dahil olmak üzere etkinliklere yanıt verir. Hizmet çalışanının kullanım ömrü kasıtlı olarak kısa tutulur.
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ışı deneyim sunmak için kullanılabilir.
Hizmet çalışanları, çevrimdışı önbelleğe alma için güçlü bir araçtı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 örneklerinde kapsamlı bir hizmet çalışanı örnekleri seti mevcuttur. Jake Archibald'ın çevrimdışı yemek kitabı mutlaka okunmalıdır. Hizmet çalışanı konusunda yeniyseniz Paul Kinlan'ın ilk çevrimdışı web uygulamanız adım adım açıklamasını denemenizi önemle tavsiye ederim.
Ekibimiz ayrıca, hizmet çalışanı kurulumuyla ilgili ek yükü azaltmak için yararlı bulduğumuz bir dizi hizmet çalışanı yardımcı araçları ve derleme araçları da sunar. Bunlar Hizmet Çalışanı Kitaplıkları'nda listelenir. En önemli iki neden şunlardır:
- sw-precache: Web uygulaması kabuğunuzu önbelleğe almak için yararlı bir hizmet çalışanı komut dosyası oluşturan, derleme zamanı aracı
- sw-toolbox: seyrek kullanılan kaynaklar için çalışma zamanı önbelleğe alma özelliği sağlayan bir kitaplık
Jeff Posnick, sw-precache hakkında Önce çevrimdışı, sw-precache modülüyle hızlı adlı kısa bir kılavuz ve aynı araçla ilgili faydalı bulabileceğiniz bir codelab yazdı.
Chrome, Opera ve Firefox, hizmet çalışanları için destek sunmaya başladı. Edge de bu özelliğe ilgi duyduğuna dair olumlu sinyaller verdi. Safari, bir mühendisin önerdiği beş yıllık plan aracılığıyla bu konuya ilgi duyduğunu kısaca belirtti.
Yeniden etkileşim için push bildirimleri
Kullanıcıların sekme dışında etkileşim kurabileceği web uygulamaları oluşturabilirsiniz. Tarayıcı kapatılabilir ve kullanıcıların deneyiminizle etkileşim kurmak için web uygulamanızı aktif olarak kullanması bile gerekmez. Bu özellik, daha önce özetlenen bazı özelliklerden yararlanarak hem hizmet çalışanını hem de web uygulaması manifestini gerektirir.
Push API, Chrome'da uygulanır, Firefox'ta geliştirme aşamasındadır ve Edge'de değerlendirme aşamasındadır. Safari'nin bu özelliği uygulama niyetinde olduğuna dair henüz herkese açık bir sinyal yok.
Açık Web'de Push Bildirimleri, Matt Gaunt tarafından hazırlanan ve Push kurulumu hakkında kapsamlı bir giriş niteliğinde olan bir kaynaktır. Ayrıca Web'in Temelleri'nde bir Push Bildirimleri codelab'i de mevcuttur.
Chrome ekibinden Michael van Ouwerkerk'in de Push ile ilgili 6 dakikalık bir giriş videosu var.
İleri seviye özellikleri ekleme
Kullanıcı deneyiminizin tatlılık seviyesi, web uygulamanızı görüntülemek için kullanılan tarayıcıya göre değişebilir. Şeker kaplamanın kontrolü sizde.
Web platformuna gelecek olan Arka Planda Senkronizasyon (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 Progresif Web Uygulamanıza bu şekilde katmanlar halinde eklenebilir.
Tek seferlik Arka Plan Senkronizasyonu Chrome'da etkinleştirildi. Jake Archibald'ın çevrimdışı Wikipedia uygulamasını ve bu özelliği gösteren makalesini içeren bir videosu var. François Beaufort'un, bu API'yi denemek isteyenler için hazırladığı çeşitli Web Bluetooth örnekleri de vardır.
Framework-friendly
Yukarıdaki ilkelerden herhangi birini mevcut bir uygulamaya veya kullandığınız çerçeveye uygulamanızın önünde hiçbir engel yoktur. Progressive Web App'inizi oluştururken göz önünde bulundurmanız gereken diğer birkaç ilke, RAIL kullanıcı odaklı performans modeli ve FLIP tabanlı animasyonlardır.
2016'da, Progressive Web Uygulamaları'nı temel bir özellik olarak destekleyen şablonların ve başlangıç projelerinin sayısının organik olarak artacağını umuyorum. O zamana kadar bu özellikleri kendi uygulamalarınıza eklemenin önünde çok büyük bir engel yok ve bence bu çabaya kesinlikle değer.
Mimari
Progresif Web Uygulaması modelinin ne kadar "derinine" inileceği konusunda farklı düzeyler vardır ancak yaygın yaklaşımlardan biri, bunları bir uygulama kabuğu etrafında tasarlamaktır. Bu zorunlu bir şart olmasa da çeşitli avantajlar sağlar.
Uygulama kabuğu mimarisi, uygulama kabuğunuzun (kullanıcı arayüzü) önbelleğe alınmasını teşvik eder. Böylece uygulama kabuğu çevrimdışı çalışır ve içeriğini JavaScript kullanarak doldurur. Tekrar ziyaretlerde bu, içeriğiniz nihayetinde ağdan gelse bile ağ olmadan ekranda anlamlı pikselleri çok hızlı bir şekilde almanızı sağlar. Bu sayede performansta önemli artışlar elde edilir.
Jeremy Keith kısa süre önce bu tür bir modelde sunucu tarafı oluşturmanın bir yedek olarak görülmemesi, istemci taraflı oluşturmanın ise bir geliştirme olarak görülmesi gerektiği yönünde yorumda bulundu. Bu geri bildirim adil.
Uygulama kabuğu modelinde, sunucu tarafı oluşturma mümkün olduğunca kullanılmalı ve istemci tarafı progresif oluşturma, hizmet çalışanının desteklendiği durumlarda deneyimi "geliştirdiğimiz" şekilde bir iyileştirme olarak kullanılmalıdır. Bu konuya birçok farklı şekilde yaklaşılabilir.
Mimariyle ilgili 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ıç şablonları
Uygulama kabuğu
app-shell deposu, uygulama kabuğu mimarisinin neredeyse eksiksiz bir uygulamasını içerir. Arka ucu Express.js, ön ucu ise ES2015 ile yazılmıştır.
Modelin hem istemci hem de sunucu tarafı bölümlerini kapsadığı ve bu bölümlerde çok fazla işlem yapıldığı için 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.
Polymer başlangıç kiti
Polymer web uygulamaları için resmi başlangıç noktası, aşağıdaki Progresif Web Uygulaması özelliklerini destekler:
- Web uygulaması manifesti
- Android için Chrome Başlangıç Ekranı
- Platinum SW öğeleri ile 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ından bazılarını (ör.uygulama kabuğu modeli, eşzamansız yükleme) desteklemez.
Bu kalıpları 2016'da PSK'ya dahil etmeyi planlıyoruz. Ancak bu konudaki ilk denemeleri Rob Dodson'ın Polymer Zuperkulblog uygulamasında ve Eric Bidelman'ın mükemmel Polymer Perf Patterns konuşmasında bulabilirsiniz.
Web Starter Kit
Yeni vanilla projeleri için önerdiğimiz başlangıç noktası, 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ı önceden önbelleğe alma
Vanilla JS/ES2015 ile çalışmayı tercih ediyorsanız ve Polymer'i kullanamıyorsanız Web Starter Kit, yeniden kullanabileceğiniz veya kod snippet'lerini alabileceğiniz bir referans noktası olarak yararlı olabilir.
Çerçeve içeren ve içermeyen progresif web uygulamaları
Topluluk üyeleri tarafından JS kitaplıkları ve çerçeveleri kullanılarak veya kullanılmadan oluşturulmuş çok sayıda açık kaynaklı Progresif Web Uygulaması vardır. İlham almak isterseniz aşağıdaki depoları referans olarak kullanabilirsiniz. Ayrıca, bunlar gerçekten çok iyi uygulamalar.
Vanilla JavaScript
- Paul Lewis'in Sesli Notlar uygulaması,
app-shellile benzer bir mimari kullanılarak oluşturulmuştur (makale). - Jake Archibald'dan Çevrimdışı Wikipedia (video)
- Paul Kinlan'dan Air Horner
- Paul Lewis'ten Guitar Tuner (makale)
Polymer
- Rob Dodson'dan Zuperkulblog (slaytlar)
React
Sanal DOM
- Nolan Lawson'ın Pokedex uygulaması: Progresif oluşturmaya yardımcı olmak için "her şeyi bir web çalışanında yapma" yaklaşımını uygulayan mükemmel bir progresif web uygulaması. (write-up)
Angular.js
- Kenneth Auchenberg'in Timey.in uygulaması da kaynak önbelleğe alma için
sw-precachekullanır.
Kapanış notları
Daha önce de belirtildiği gibi, Progresif Web Uygulamaları henüz başlangıç aşamasındadır. Ancak bu uygulamaların arkasındaki metodolojileri denemek ve kendi web uygulamalarınıza ne kadar iyi uygulanabileceklerini görmek için heyecan verici bir zamandayız.
Paul Kinlan şu anda Progressive Web Uygulamaları ile ilgili Web'in Temelleri kılavuzunu planlıyor. Kapsanmasını istediğiniz alanlarla ilgili görüşleriniz varsa lütfen ileti dizisine yorum yapın.
Daha fazla bilgi
- Progresif Web Uygulamaları: Özümüzü Kaybetmeden Sekmelerden Kurtulma
- Why Progressive Web Apps Are The Future Of Web Development (Progresif Web Uygulamaları Neden Web Geliştirmenin Geleceğidir?)
- Progresif Web Uygulamaları: Kullanıma hazır
- ServiceWorker ile Progresif Uygulama Oluşturma
- Progresif Web Uygulamaları Geleceğin Teknolojisidir
- Progresif Web Uygulaması: Mobil Deneyimi Yaşamanın Yeni Bir Yolu
- Pokedex.org ile tanışın: Pokémon hayranları için progresif web uygulaması
- Chrome Developer Summit Özeti: Progresif Web Uygulamaları