Son zamanlarda Progresif Web Uygulamaları ile ilgili tartışmalar yoğun ilgi görüyor. Bu uygulamalar nispeten yeni bir model olsa da ilkeleri vanilla JS, React, Polymer, Angular veya başka herhangi bir çerçeveyle oluşturulan uygulamaları eşit ölçüde geliştirebilir. Bu yayında, kendi progresif web uygulamanızı bugün kullanmaya başlamanıza yardımcı olacak bazı seçenekleri özetleyecek ve uygulamalara referans vereceğiz.
Progresif Web Uygulaması nedir?
Progresif Web Uygulamalarının her yerde çalıştığını ancak modern tarayıcılarda güçlendirildiğini unutmayın. Progresif geliştirme bu modelin bel kemiğidir.
Aaron Gustafson, progresif geliştirmeyi M&M gibi bir fıstık müzakeresine benzetti. İçeriğiniz yer fıstığı, çikolata kaplama sunum katmanınız ve JavaScript'iniz 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 kullanılabileceği bir yer olarak düşünün. Bu uygulamalar, web'in en iyi özellikleri ile en iyi uygulamaları birleştiren deneyimlerdir. Tarayıcı sekmesini ilk ziyaretlerinden itibaren kullanıcılar için kullanışlıdır ve yükleme gerektirmez.
Kullanıcı, tekrar eden kullanım yoluyla bu uygulamalarla ilişki kurdukça, şeker kabuğu daha da tatlı oluyor. Yavaş ağ bağlantılarında çok hızlı yükleniyor (Service Worker sayesinde), alakalı Push Bildirimleri gönderiliyor ve kullanıcının ana ekranında, bunları tam ekran uygulama deneyimi olarak yükleyebilen birinci sınıf bir simge bulunuyor. Ayrıca, akıllı web uygulaması yükleme banner'larından da yararlanabilirler.
Progresif Web Uygulamaları (pwa)
- Progresif: Temel kiracı olarak progresif geliştirmeyle oluşturuldukları için tarayıcı seçimi ne olursa olsun her kullanıcı için çalışır.
- Duyarlı: Her form faktörüne, masaüstüne, cep telefonuna, tablete ve ileride ne olursa olsun uyar.
- Bağlantıdan bağımsız: Çevrimdışı veya düşük kaliteli ağlarda çalışmak için Service Worker'larla geliştirildi.
- 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 işlemi sayesinde her zaman günceldir.
- Güvenli: Gözetlemeyi önlemek ve içeriğe müdahale edilmediğinden emin olmak için TLS ile sunulur.
- 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ı derdi olmadan ana ekranlarında en yararlı buldukları uygulamaları "saklamalarına" olanak tanıyın.
- Bağlanabilir: URL aracılığıyla kolayca paylaşın ve karmaşık yükleme gerektirmez.
Ayrıca, Progresif Web Uygulamaları da Android için Chrome'a özgü değildir. Aşağıda, Pokedex Progresif Web Uygulaması'nın Android için Firefox'ta (Beta) önceki ana ekrana ekle ve hizmet çalışanı önbelleğe alma özellikleri sorunsuz bir şekilde çalıştığını görebilirsiniz.
Bu modelin "progresif" doğasının güzel yanlarından biri, tarayıcı satıcıları kendilerine daha iyi destek sağladıkça özelliklerin kademeli olarak kilidinin açılabilmesidir. Pokedex gibi Progresif Web Uygulamaları, uygulamada birkaç önemli farklılık dışında, elbette Android'deki Opera'da da harika performans göstermektedir:
Progresif Web Uygulamaları hakkında daha 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 göz atmaya değer çok yararlı 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, daha önce bahsedilen Başlangıç ekranı ve ana ekran simgesinde kullanılan, boyut ve yoğunluğa göre bir dizi simge tanımlamak için de kullanılır.
Örnek manifest dosyası Web Starter Kit'te (Web Başlangıç Kiti) ve Google Chrome örneklerinde bulunabilir. Bruce Lawson bir Manifest Üreticisi yazdı. Mounir Lamouri de göz atmaya değer bir Web Manifest doğrulayıcısı yazdı.
Kişisel projelerimde, hem web uygulaması manifesti hem de iOS, masaüstü vb. cihazlarda kullanılmak üzere doğru boyutlarda simgeler oluşturmak için realfavicongenerator'dan yararlanıyorum. Site simgeleri Düğüm modülü, derleme işleminizin bir parçası olarak da benzer bir çıkış elde edebilir.
Chromium tabanlı tarayıcılar (Chrome, Opera vb.) destekleyen web uygulaması, şu anda Firefox'un aktif olarak destek geliştirmesiyle ve Edge'in bunları değerlendirme aşamasında olarak listelediğini bildirmektedir. WebKit/Safari, bu özelliği henüz hayata geçirme amaçlarıyla ilgili herkese açık sinyaller yayınlamadı.
Daha ayrıntılı bilgi için Web Fundamentals (Web ile İlgili Temel Bilgiler) sayfasındaki Android için Chrome'da Web Uygulaması Manifest ile Yüklenebilir Web Uygulamaları başlıklı makaleyi okuyun.
"Ana ekrana ekle" banner'ı
Android'deki Chrome, bir süredir sitenizi ana ekrana ekleme desteği sunuyor, ancak son sürümler, yerel Web Uygulaması yükleme banner'ları kullanılarak sitelerin proaktif şekilde eklenmesini önerme özelliğini de desteklemektedir.
Uygulama yükleme istemlerinin uygulamanızı görüntülemesi için:
- Geçerli bir web uygulaması manifest dosyasına 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 olmak üzere iki kez ziyaret edilmiş olmalıdır
Temel banner'ları ve ilgili uygulamaları görüntüleme gibi daha karmaşık kullanım alanlarını kapsayan ç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. Yayınladığı 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 olduğunda uyanır ve yalnızca etkinliği işlemesi gerektiği sürece çalışır. Service Worker, 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 sitenizin veya web uygulamanızın tekrarlı ziyaretleri için anında yükleme biçiminde önemli performans kazanımları sunar. Uygulama kabuğunu önbelleğe alabilir ve çevrimdışı olarak çalışması için içeriğini JavaScript kullanarak doldurabilirsiniz.
Google Chrome örneklerinde, kapsamlı Service Worker örnekleri setine ulaşabilirsiniz. Jake Archibald'ın çevrimdışı tarif kitabını mutlaka okumanız gerekir. Service Worker'da yeniyseniz Paul Kinlan'ın ilk çevrimdışı web uygulamanız için hazırladığı adım adım açıklamalı kılavuzu denemenizi önemle tavsiye ederiz.
Ekibimiz ayrıca bir dizi hizmet çalışanı yardımcı yardımcı programını kullanır ve hizmet çalışanı kurulumunda ek yükü azaltmak için yararlı bulduğumuz araçlar geliştirir. Bunlar, Hizmet Çalışanı Kitaplıkları'nda listelenmiştir. Bunların başlıca ikisi şunlardır:
- sw-precache: Web uygulaması kabuğunu önbelleğe almak için yararlı bir Service Worker komut dosyası oluşturan derleme zamanı aracı
- sw-toolbox: Sık kullanılmayan kaynaklar için çalışma zamanı önbelleğe alma olanağı sağlayan bir kitaplık
Jen Posnick, aynı araç üzerinde faydalı bulabileceğiniz çevrimdışı öncelikli, hızlı, sw-precache modülü ve codelab ile sw önbelleği hakkında kısa bir rehber yazdı.
Chrome, Opera ve Firefox'un tamamı, Edge'in, özelliğe yönelik ilgi hakkında kamuya açık olumlu sinyaller almasını sağlayan hizmet çalışanı desteği uygulamaya koydu. Safari, bir mühendisin önerdiği beş yıllık planı kullanarak bu konuya ilgisinden kısaca bahsetmiş.
Yeniden etkileşim için push bildirimleri
Etkili bir şekilde, kullanıcıların sekme dışında etkileşimde bulunabilecekleri web uygulamaları oluşturabilirsiniz. Tarayıcı kapatılabilir ve deneyiminizle etkileşimde bulunmak için web uygulamanızı etkin bir şekilde kullanması gerekmez. Bu özellik için hem Service Worker hem de web uygulaması manifest dosyası gerekir. Bu bildirimler, daha önce özetlenen bazı özelliklerin üzerine inşa edilmiştir.
Push API'si Chrome'da uygulanmıştır, Firefox'ta geliştirme aşamasında ve Edge'de ise değerlendirme aşamasındadır. Henüz bu özelliği uygulama amaçlarıyla ilgili olarak Safari'den herkese açık bir yanıt bulunmuyor.
Açık Web'de Push Bildirimleri, Matt Gaunt tarafından push bildirimleri almaya yönelik kapsamlı bir giriştir. Web ile İlgili Temel Bilgiler sayfasında bir Push Bildirimleri codelab'i de mevcuttur.
Chrome ekibinden Michael van Ouwerkerk, video izlemeye daha fazla ilginiz varsa Push için 6 dakikalık bir giriş de sunuyor.
Gelişmiş özellikleri bir arada kullanma
Kullanıcı deneyiminizin, web uygulamanızı görüntülemek için kullanılan tarayıcıya bağlı olarak farklı tatlı seviyelerine sahip olabileceğini unutmayın. Sert şeker kabuğunun kontrolü sizdedir.
Web platformunda kullanıma sunulan Arka Plan Senkronizasyonu (web uygulamanız kapalıyken bile sunucuyla veri senkronizasyonu için) ve Web Bluetooth (web uygulamanızdan Bluetooth cihazlarıyla konuşmak için) gibi ek özellikler de Progresif Web Uygulamanıza bu şekilde katman olarak eklenebilir.
Tek seferlik Arka Plan Senkronizasyonu Chrome'da etkinleştirildi. Jake Archibald'ın Çevrimdışı wikipedia uygulamasının videosunu ve nasıl çalıştığını gösteren makaleyi de paylaşıyor. Bu API'yi denemek isteyen Francois Beaufort'un çeşitli Web Bluetooth örnekleri de mevcuttur.
Çerçeve dostu
Geliştirdiğiniz mevcut bir uygulamaya veya çerçeveye yukarıdaki ilkelerden herhangi birini uygulamanızı engelleyen hiçbir şey yoktur. Progresif Web Uygulamanızı oluştururken göz önünde bulundurmanı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ını desteklemek amacıyla organik olarak hazırlanan ortak proje ve kaynak projelerinin sayısında artış göreceğini umuyorum. O zamana kadar, bu özellikleri kendi uygulamalarınıza eklemenin önündeki engel çok yüksek değil ve çok IMHO, bu çabaya değer.
Mimari
Progresif Web Uygulaması modelinde "hepsi bir arada" yaklaşımının farklı düzeyleri olsa da kullanılan yaygın yaklaşımlardan biri, bunların bir Uygulama Kabuğu çevresinde oluşturulmasıdır. Bu zor bir gereklilik olmasa da birçok avantajı vardır.
Uygulama Kabuğu mimarisi, uygulama kabuğunun (Kullanıcı Arayüzü) çevrimdışı olarak çalışması ve içeriğini JavaScript kullanarak doldurması için önbelleğe almayı teşvik eder. Tekrar yapılan ziyaretlerde bu, içeriğiniz sonuçta oradan gelse bile ağ olmadan gerçekten hızlı bir şekilde ekranda anlamlı pikseller elde etmenizi sağlar. Bu durum, önemli performans artışlarını 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ında oluşturmanın bir geliştirme olarak değerlendirilmesi gerektiğini açıkladı. Bu adil bir geri bildirim.
Uygulama Kabuğu modelinde sunucu tarafında oluşturma mümkün olduğunca çok kullanılmalı ve istemci tarafında progresif oluşturma, tıpkı hizmet çalışanı desteklenirken deneyimi "iyileştirmemiz" gibi bir geliştirme olarak kullanılmalıdır. Bu konuda birçok farklı yaklaşım bulunabilir.
Önerim, mimariyle ilgili yazımızı okumanız ve benzer ilkelerin kendi uygulamanıza ve yığınınıza en iyi nasıl uygulanabileceğini değerlendirmeniz olacak.
Standart standartlara başlarken
Uygulama kabuğu
app-shell deposu, Application Shell mimarisinin neredeyse tamamlanmış bir uygulamasını içerir. Express.js dilinde 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ığı ve çok fazla işlem yapıldığından, kod tabanını tanımanız biraz zaman alacaktır. Progresif Web Uygulaması (Progresif Web Uygulaması) şu anda en kapsamlı şekilde başlangıç noktamızdır. Bu projede odaklanacağımız bir sonraki konu Dokümanlar olacak.
Polimer 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 gereklidir)
PSK'nin geçerli sürümü, bazı PWA (Progresif Polymer) web uygulamalarında bulunan bazı daha gelişmiş performans kalıpları (ör.Uygulama Kabuğu modeli, eşzamansız yükleme) için destek sunmamaktadır.
2016'da bu kalıpları PSK'da uygulamayı hedefliyoruz. Ancak bu konuda yapılan ilk denemelere Rob Dodson'ın Polymer Zuperkulblog uygulamasından ve Eric Bidelman'ın mükemmel Polymer PerfPattern konuşmasını gösterebiliriz.
Web Başlangıç Paketi
Yeni vanilla projeleri için özenle hazırlanmış 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ı için önceden önbelleğe alma
Vanilla JS/ES2015 ile çalışmayı tercih ediyorsanız ve Polymer'i kullanamıyorsanız Web Starter Kit'i kullanarak kod snippet'lerini yeniden kullanabilir veya çalabilirsiniz.
Çerçeve içeren ve içermeyen Progresif Web Uygulamaları
Bir dizi açık kaynak Progresif Web Uygulaması, topluluğun üyeleri tarafından JS kitaplıkları ve çerçeveleri ile ve bunlar olmadan geliştirilmiştir. İlham almak istiyorsanız aşağıdaki depolar referans olarak faydalı olabilir. Ayrıca çok iyi uygulamalar.
Vanilya JavaScript
- Paul Lewis'in Sesli Notlar,
app-shellile benzer bir mimari kullanılarak (yazma) oluşturulmuştur - Çevrimdışı Wikipedia, Jake Archibald tarafından (video)
- Air Horner - Paul Kinlan
- Guitar Tuner, Paul Lewis (yazma)
Polymer
- Rob Dodson'dan Zuperkulblog (slaytlar)
Tepki ver
Sanal DOM
- Nolan Lawson'dan Pokedex - progresif oluşturmaya yardımcı olmak için "her şeyi web çalışanı yap" yaklaşımını uygulayan mükemmel progresif web uygulamasıdır. (yazma)
Angular.js
- Kenneth Auchenberg'den Timey.in: Kaynak önbelleğe alma işlemi için
sw-precachekullanıyor
Kapanış notları
Daha önce de belirtildiği gibi, Progresif Web Uygulamaları henüz emekleme aşamasındadır. Ancak bu yaklaşımların ardındaki metodolojileri deneyip kendi web uygulamalarınıza ne kadar iyi uygulayabileceklerini görmek için heyecan verici bir zamandır.
Paul Kinlan şu anda Progresif Web Uygulamaları ile ilgili Web'in Temelleri kılavuzunu planlıyor. Kapsanmasını istediğiniz alanlar varsa lütfen ileti dizisine yorum yapmaktan çekinmeyin.
Daha fazla bilgi
- Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelerden Kaçış
- Neden progresif web uygulamaları web geliştirmenin geleceğidir?
- Progresif Web Uygulamaları: primetime için hazır
- ServiceWorker ile Progresif Uygulama Oluşturma
- Progresif Web Uygulamaları Geleceğin
- Progresif Web Uygulaması: Mobil Deneyimin Yeni Yolu
- Karşınızda Pokémon hayranları için progresif web uygulaması olan Pokedex.org
- Chrome Developer Summit Özeti: Progresif Web Uygulamaları