Progressive Web Uygulamalarına Giriş

Çoğu geliştirici en azından etrafta biraz vızıltı duydu. Progressive Web Uygulamaları. Bunlar Google gibi teknoloji şirketleri tarafından yaygın olarak desteklenmektedir ve hızla çok cihazlı web uygulamaları için norm.

Ama tam olarak ne tipik bir fark ve bir ilerici internet uygulaması?

Geliştiriciler için, bütün bir farklılık dünyası. Aşamalı Web Uygulamaları, modern web API'lerini yerel uygulama deneyimleri oluşturun Tarayıcıda Bu, geliştiricilerin hibrid çerçeveler kullanmadan hızlı yüklenen dinamik uygulamalar oluşturabilecekleri anlamına gelir.

Bu rehberde, ben Progressive Web Uygulamalarının Temelleri, Bazı temel özellikler ve kendinizinkini oluşturmaya nasıl başlayabilirsiniz?.

Progressive Web Uygulamaları Nedir??

Aşamalı Web Uygulamaları (veya PWA'lar) web tarayıcı API'lerinden yararlanın herhangi bir cihazda doğrudan tarayıcıda yerel uygulama deneyimleri oluşturmak için.

Sonuçta, Progressive Web Apps, aşağıdakileri içerir: teknolojilerin avuç geliştiricilerin, yerel uygulamalar gibi güçlü uygulamalar oluşturmak için kullanabilecekleri Çoğu gelen Web API'leri benzeri Servis Çalışanları API'si ya da API'ye bas.

Var epeyce gereksinimler bir şeyi PWA olarak adlandırmak için en önemlileri:

Tamamen mobil duyarlı.
Uyuyor ilerici gelişme.
Yapabilme yerel olarak yükle akıllı telefonlarda ve tabletlerde.
Çevrimdışı çalışır İnternet olmadan, servis çalışanlarını kullanarak.
İçeriği işlevsellikten ayırır uygulama kabuğunu kullanarak.
HTTPS Üzerine Kuruyor daha fazla güvenlik için.
keşfedilebilir Google aramada.
Vardır dinamik uygulama benzeri sayfalar ama yine de kendi URL’si var.

Eğer öyleysen küçük bir web uygulaması inşa etmeyi düşünüyorum bunun yerine Progressive Web App oluşturmayı deneyebilirsiniz. Bu biraz öğrenme eğrisi ile birlikte geliyor, ancak çok fazla seçeneğiniz var. kullanıcı deneyimi üzerinde daha fazla kontrol sonuç olarak.

İlerici Web Uygulamalarının temellerine dalalım ve neyin işe yaradığını öğrenelim.

Servis çalışanları

Her Progressive Web Uygulaması servis çalışanlarına ihtiyaç duyuyor. Bunlar trafik memurları gibi trafiğin nereye gittiğini, verilerin nereden geldiğini ve bunun nasıl gerçekleştiğini koordine eden hepsi organize ve önbelleğe alınır.

Basit olarak, hizmet çalışanı JavaScript dosyası olarak çalışır ve web uygulamanızın arka planda çalışır. Ne zaman kullanıcı etkinlik gerçekleştirir, o çağırır servis çalışanı betiği veri çekmek, veri kaydetmek veya her ikisini birden yapmak için!

Kullanmak Servis Çalışanı API'si olduğu gerekli çevrimdışı destekli bir PWA çalıştırmak için. Bu nasıl görünümler arasında veri iletimi ve nasıl yerel bir veritabanından veri isteme. Ancak, bu çoğunlukla bir PWA projesi üzerinde çalışarak öğrendiğiniz gelişmiş şeylerdir..

Bir göz atın Servis çalışanları yemek kitabı için temel pasajlar ve canlı demolar. Bu, başkalarının yaptıklarını çalışarak öğrenmenin harika bir yoludur ve bunu kendi uygulamalarınızda klonlamak.

Progressive Web App oluşturmayı umuyorsanız Service Worker API ile başlayın. Sadece ona göz atın ve yerel olarak basit bir demo kurun. Bu, daha sonra için zemin hazırlayacaktır özel uygulama özellikleri ve sayfaları oluşturma Hepsi hizmet çalışanlarının iştiği.

İçin yeni başlayanlar için rehberler ve ayrıntılı kod parçacıkları, Bu kaynakları özellikle tavsiye ediyorum:

Servis Çalışanlarına Başlarken
Servis Çalışanlarına Başlarken
Hizmet Çalışanı Örneği: Özel Çevrimdışı Sayfa Örneği

Uygulama kabuğu

Çoğu yerel uygulama bir uygulama kabuğu mimarisini izleyin Verilerin ve uygulama kodunun nerede olduğu kullanıcı arayüzünden tamamen ayrı. Uygulama kabuğu olabilir yerel olarak önbelleğe alınmış böylece her sayfa inanılmaz derecede hızlı yükleniyor.

Bu aynı tutar “yerel uygulama” nerede hissediyor arayüz her zaman görünür kalır fakat içerik / işlev farklı yükler Her seferinde Hakkında daha fazla bilgi edinmek için bu sayfayı Google Geliştiriciler sitesinde inceleyin. uygulama kabuğu modeli.

Çoğu uygulama bir çok basit bir uygulama kabuğu ve mimarinizi birlikte tasarlamanız gerekir. akılda sadeliği.

Tipik olarak, uygulama kabuğu bunlara sahiptir: ana unsurlar:

En iyi gezinti çubuğu bağlantıları.
Yenile düğmesi (isteğe bağlı).
Sayfa arka planı kabı.

Burada güzel bir vaka incelemesi bulabilirsiniz Google'ın G / Ç İlerici Web Uygulaması kabuk mimarisi. Ayrıca, kendi kabuk mimarinizi oluşturmak, önbelleklemek ve her sayfa için otomatik olarak çekerek.

Kabuk mimarisini düşünün tüm statik UI öğeleri Her sayfada kullanacaksınız. Bunlar olmalı kodunuzun geri kalanından ayrıldı ve kolay kullanım için önbelleklenir. Ayrıca göz atın Google'ın intro bol miktarda kod olan konuya başlamanıza yardımcı olacak snippet'ler.

Çevrimiçi ve çevrimdışı destek

Çoğu yerel uygulama internet olmadan iyi çalış. Progressive Web Apps bu aynı davranışı takip etmek içindir.

Servis çalışanları aracılığıyla, yerel önbellekleri oluştur Her sayfa için JSON koduyla. Bu yolla kullanıcılar yerel olarak web uygulamanıza göz atın. Ayrıca bir bildiri dosyası ekle simgelerinizi, açılış ekranını ve diğer başlatma ayarlarını tanımlamak için.

Service Worker API'sını kullanıyorsanız, cihazınıza bir göz atın. Önbellek API'si hangisi aynı çerçevenin parçası. Genellikle en iyi yol yerel olarak veri depolamak ve servis çalışanlarından eriş sonra.

Ayrıca herhangi bir web uygulamasını test edin kullanma fener, PWA teknolojileri için özellik uyumluluğunu ve desteğini kontrol etmek için ücretsiz bir araç.

PWA'lar her zaman çevrimdışı destek gerektir Servis Çalışanı API’sı aracılığıyla Düşük bağlantı durumlarında çalışmak. Lighthouse, çevrimdışı destek testinin yanı sıra bir dizi başka özelliği test etmenin en iyi yoludur.

Canlı örnekler

Canlı PWA'ları incelemek ve nasıl çalıştıklarını görmek öğrenmek için harika bir yoldur. Ancak, Progressive Web App pazarı hala ortaya çıkıyor, en iyiler İnternet'in çeşitli köşelerine dağılmış.

Ancak, teşekkürler PWA kaya galeri, PWA'ların gerçekten neler yapabileceğini göstermek için birkaç şaşırtıcı örnek verdim..

1. Döviz Kurları

Bu oldukça basit döviz Çevirici döviz kurları alır ve mevcut hesaplar ton dünya para birimleri arasındaki farklar.

Bu web uygulamasının farkına varacaksınız: tamamen duyarlı, dokunmayı destekler, ve otomatik güncellemeler sayfa yenileme olmadan.

Bunlar, beklediğiniz özelliklerden sadece birkaçı tipik Aşamalı Web Uygulaması. Bu Uygulama ayrıca yerel olarak da kaydedilebilir Telefonunuzda çevrimdışı çalışmak için geçerli döviz kurlarını kontrol etmek için bir JSON dosyasına bağlanmasına rağmen.

2. İngilizce Aksan

Bu web uygulamasına tapıyorum, çünkü hem benzersiz hem de inanılmaz derecede iyi tasarlanmış. İngilizce aksan Haritası videoları online küratörlüğünü insanların ABD ve İngiltere’nin belirli bölgelerinden aksan taşıdığı yerler.

Haritada herhangi bir yeri tıklatarak, insanların dünyanın farklı bölgelerinde belirli kelimeleri nasıl telaffuz ettiğini dinleyebilirsiniz. Uygulamanın hızlı yıldırım ve GitHub'ta açık kaynaklı herkesin kontrol etmesi için.

İnternallar koşuyor Tepki / Redux ile Firebase ve bir Google Haritalar’a API bağlantısı. Kesinlikle yeni başlayanlar için ders çalışmak ve öğrenmek için oldukça basit bir şey örneği.

3. Pokedex.org

Bir başka oldukça basit PWA bu Pokedex uygulaması Nolan Lawson tarafından yaratıldı. Ayrıca bu kodu serbestçe yayınladı. GitHub'da, öyleyse bize bir başka proje daha gözetlemeye ve çalışmaya değer.

Bu veriler statik kalabildiğinden, bu yerel bir motorla taşındı denilen PouchDB. Tüm veriler PokeAPI'den gelir ve daha sonra düz JavaScript olarak kaydedilir. Bu yapabileceğiniz anlamına gelir yerel olarak telefonunuza kaydedin gerçek bir yerel uygulama gibi ve Internet erişimi olsun veya olmasın çalışır. Oldukça havalı, doğru?

Her şey JavaScript tarafından desteklenmektedir, bu yüzden ön kod ile ne kadar yapabileceğin bir kanıtı. Kullanır çok önbellekleme Service Worker API’sı ile hızlı ve kullanımı kolay, çılgınca.

4. Flipkart

Son ve en şaşırtıcı olarak, hadi görelim Flipkart web sitesi. Bu dolu e-ticaret mağazası, aslında, Aşamalı bir Web Uygulamasıdır..

Onun tamamen duyarlı ve sayfaları dinamik olarak yükler. Sayfa URL’leri tarayıcıya eklenir, böylece tipik bir web sitesi gibi kopyalayıp yapıştırabilir ve paylaşabilirsiniz.

Bu kolayca gördüğüm en karmaşık PWA. Geliştiricilerin web’de tüm kullanıcılar için bu kadar kusursuz bir deneyim yaratabildiklerini görünce şaşırdım yerel çevrimdışı depolamayı destekleme, çok.

Ayrıca, tüm Flipkart kaynak kodu için bir depo bulamadım, ancak GitHub'daki Flipkart sayfası ile daha küçük kod parçacıkları geliştirici ekibinden.

Daha fazlasını öğrenmek

Progressive Web Uygulamaları inanılmaz popüler ve kesinlikle buhar kazanacak daha fazla geliştirici yerel / karma uygulamalardan geçiş yaparken.

Olarak adlandırılan yıllık bir zirve var. Progressive Web Uygulama Zirvesi YouTube'da ücretsiz olarak izleyebileceğiniz videolar yayınlarlar. Bu harika bir yol Bir bilet ödemeden bazı profesyonel bilgileri almak.

Ancak, daha ayrıntılı arıyorsanız PWA kodlama rehberleri bu dersleri kesinlikle inceleyin:

Progressive Web Apps için Yeni Başlayanlar Kılavuzu
İlk aşamalı web uygulamanızı React ile oluşturun
Polimer ile İlerici Bir Web Uygulaması Oluşturma