Uygulamanızı servis çalışanları ile çevrimdışı yapın

Servis çalışanları, siteleriniz ve web uygulamalarınız için yükleme sürelerini ve çevrimdışı desteğini geliştirmek için kullanılabilir. Bu eğitimde size bir servis işçisi ile bir Web uygulamasını aşamalı olarak nasıl geliştireceğinizi göstereceğiz. Öncelikle bir servis işçisinin ne olduğunu ve yaşam döngüsü nasıl çalıştığını karşılayacağız, sonra sitenizi (bu sayfa) hızlandırmak için nasıl kullanılacağını (bu sayfa) ve çevrimdışı içerik (sayfa 2) sunacağız.

O zaman size nasıl yapacağız Bir uygulama nasıl inşa edilir servis çalışanları ile. Statik varlıkları önbelleğe alacak ve hizmet veren bir çıplak kemik işçisi kuracak (sonraki yüklerde büyük bir performans artışı sağlayan), daha sonra dinamik API yanıtlarını nasıl önbelleğe alınacak ve demo uygulamamızın tam çevrimdışı desteğini vereceğinizi öğreneceksiniz. İlk olarak, tam olarak hizmet çalışanlarının ne olduğuna ve nasıl çalıştıklarına bakalım.

Bir web sitesi oluşturmak? İşleminizi harika bir şekilde kolaylaştırın Web Sitesi Oluşturucu ve iyi bir şekilde korumak ağ sağlayıcısı hizmet. Ve depolarınızı bunlarla sıralanır Bulut depolama Seçenekler.

Bir servis çalışanı nedir?

Peki bir servis işçisi nedir? Bu bir komut dosyası, tarayıcınızın arka planda çalıştığını, Javascript'te yazılmıştır. Ana ipliği etkilemez (JavaScript genellikle bir Web sayfasında çalışır) ve uygulama kodunuzla çakışmaz veya çalışma zamanı performansını etkiler.

Bir servis işçisinin, DOM veya olaylara doğrudan erişimi yoktur ve web sayfasında gerçekleşen kullanıcı etkileşimi yoktur. Web sayfası ile ağ arasında oturan bir katman olarak, sayfanızın yaptığı ağ isteklerini (örneğin AJAX istekleri) yakalayabilmesine ve manipüle etmesine izin veren bir katman olarak düşünün. Bu, önbellekleri yönetmek ve çevrimdışı kullanımı desteklemek için idealdir.

Servis işçisi yaşam döngüsü

Bir servis işçisinin ömrü basit bir akış izler, ancak JS komut dosyalarını hemen hemen çalışmaya alıştığınızda biraz kafa karıştırıcı olabilir:

Kurulum ve GT; Beklemek (yüklü) & gt; Etkinleştirme ve GT; Aktif ve gt; Yedek

Sayfanız ilk yüklendiğinde, eklediğimiz kayıt kodu index.html Servis işçisinin kurulumunu başlatır. Mevcut bir işçi olmadığında, yeni servis çalışanı kurulumdan hemen sonra etkinleştirilecektir. Bir web sayfası, bir seferde yalnızca bir servis çalışanı olabilir.

Bir işçi zaten yüklüyse, yeni servis çalışanı yüklenecek ve ardından sayfa tamamen kapanana ve yeniden yükleninceye kadar bekleme adımında oturacak. Basitçe ferahlık yeterli değildir, çünkü diğer sekmelerin açık olması olabilir. Sayfanın tüm örneklerinin kapatılmasını sağlamanız gerekir, aksi takdirde yeni işçi etkinleşmez. Sekmeleri kapatmak zorunda değilsiniz, sadece başka bir siteye gidip iade edebilirsiniz.

Her ikisi de Yüklemek ve aktive etmek Olaylar sadece işçi başına bir kez gerçekleşecek. Etkinleştirildikten sonra, servis çalışanı daha sonra sayfanın kontrolünü kontrol edecektir ve istekleri manipüle etmek için alma gibi etkinlikleri kullanmaya başlayabilir.

Sonunda, tarayıcı işçi dosyasının kendisinin güncellendiğini veya yükleme veya aktivasyon başarısız olduğunu tespit ederse bir servis işçisi gereksiz hale gelir. Tarayıcı, bir işçi komut dosyasının güncellenip güncellenmediğini belirlemek için bayt bir fark arayacaktır.

Hizmet çalışanınızın adını asla değiştirmemeniz gerektiğini (veya devredilmemesi gerektiğini belirtmek önemlidir. İşçi dosyasının kendisini sunucuda önbelleğe almazsanız, tarayıcılar artık önbelleğe alma başlıklarını görmezden gelecek kadar akıllı olsa da, tarayıcılar artık akıllıdır.

01. Demo uygulamasını klonla

Tamam, hizmet çalışanlarından yardımlı bir web uygulaması nasıl oluşturulacağını öğrenmeye başlayalım. Bu eğitim için, bilgisayarınızda yüklü olan NODE.JS ve NPM'nin son sürümlerine ihtiyacınız olacak.

Bu öğretici için temel olarak kullanacağımız bir demo uygulamasını düşürdük ( burada demo uygulamasını klonla ). Uygulamanın, kullanıcının konumuna göre beş günlük hava tahmini getiren eğlenceli bir projedir. Daha sonra, yağmurun günün sonundan önce tahmin edilip edilmediğini kontrol eder ve UI'yi buna göre güncelleyin.

Bir servis işçisi kullanırken performans farkını göstermek için büyük, yasallaştırılmış görüntüleri göstermek için, jquery ve bootstrap gibi büyük, gereksiz kütüphaneler kullanılarak verimsizce (kasıtlı olarak) inşa edilmiştir. Şu anda saçma 4.1mb'de ağırlığındadır.

02. API anahtarınızı alın

API'den hava verilerini almak için kendinize ücretsiz bir API anahtarı almanız gerekir. Openweathermap :

Anahtarınızı aldıktan sonra açın index.html ve ara window.api_key içinde değişken & lt; head & gt; . Anahtarınızı değere yapıştırın:

    window.API_KEY = 'paste-your-key-here';

03. Geliştirme sunucusunu başlatın

Şimdi proje üzerinde çalışmaya başlamaya hazırız. Her şeyden önce bağımlılıkları çalıştırarak yükleyelim:

    npm install

Yapı aracı için iki görev var. Koşmak npm başlangıç Geliştirme sunucusunu 3000 numaralı bağlantı noktasında başlatmak için. npm çalıştırmak inşa 'Üretim' sürümünü hazırlamak için. Bunun sadece bir demo olduğunu unutmayın, bu yüzden gerçekten bir üretim sürümü değil - Madillik ya da hiçbir şey yok - dosyalar sadece 'canlandı'.

Bir algoritma, dosyanın içeriğinden 9C616053E5 gibi bir karma oluşturmak için kullanılır. Algoritma aynı içerik için her zaman aynı kargaşayı çıkarır, yani dosyayı değiştirmediğiniz sürece, karma değişmez. Hash daha sonra dosya adına eklenir, böylece örneğin stiller.css stilleri-9C616053E5.CSS olabilir. Hash, dosyanın revizyonunu temsil eder - bu nedenle 'canlandı'.

Dosyanın her bir revizyonunu sunucunuzdaki her bir revizyonu, önbelleğinizi geçersiz kılmak zorunda kalmadan, pahalı olan veya yanlış sürümünü sunan diğer bazı üçüncü taraf önbelleği için endişelenmenize gerek kalmadan.

04. Servis çalışanınızı tanıtın

Şimdi hizmet çalışanı ile başlayalım. Kökte SW.JS adlı bir dosya oluşturun. src dizin. Sonra kaydetmek için bu iki olay dinleyicilerini ekleyin. Yüklemek ve aktive etmek Etkinlikler:

 self.addeventlistener ('install', (olay) = & gt; {
      console.log (olay);
    });

    self.addeventlistener ('aktif olarak', (olay) = & gt; {
      console.log (olay);
    }); 

öz Buradaki değişken, servis işçisinin küresel salt okunur kapsamını temsil eder. Biraz böyle pencere Bir Web sayfasında nesne.

Daha sonra index.html dosyamızı güncellememiz ve servis çalışmasını yüklemek için komutları eklememiz gerekir. Kapanmadan hemen önce bu komut dosyasını ekleyin & lt; / body & gt; etiket. İşçiliğimizi kaydedecek ve mevcut durumunu günlüğe kaydedecektir.

 & lt; script & gt;
     if ('Navigator' in 'ServiceWorker' {
       Navigator.ServiceWorker.Register ('/ SW.JS')
         .THEN (fonksiyon (reg) {
           if (reg.installing) {
             konsol.log ('SW yükleme');
           } Diğer ise (reg.waiting) {
             konsol.log ('SW Bekleme');
           } Diğer ise (reg.active) {
             console.log ('SW Etkinleştirildi');
           }
         }). Catch (işlev (hata) {
           // kayıt başarısız
           konsol.log ('Kayıt' + hata ile başarısız oldu);
         });
     }
   & lt; / script & gt; 

Geliştirme sunucunuzu çalıştırarak başlatın npm başlangıç ve sayfayı modern bir tarayıcıda açın. Google Chrome'u kullanmanızı öneririz, çünkü DevTools'ta iyi bir servis çalışanı desteği var, bu da bu eğitim boyunca referans vereceğiz. Konsolunuza kaydedilen üç şeyi görmelisiniz; için servis işçisinden iki Yüklemek ve aktive etmek olaylar, diğeri kayıttan gelen mesaj olacaktır.

05. İşçiyi etkinleştirin

İşçimizin bekleme adımını atlamasını ve şimdi etkinleştirmesini söyleyeceğiz. SW.JS dosyasını açın ve bu satırı herhangi bir yere ekleyin. Yüklemek Olay Dinleyici:

 self.skipwaiting (); 

Şimdi, işçi komut dosyasını güncellediğimizde, kurulumdan hemen sonra sayfanın kontrolünü ele alacaktır. Bunun, yeni işçinin, çalışanınızın önceki bir sürümü tarafından yüklenebilecek bir sayfanın kontrolünü ele geçirebileceği anlamına gelebileceğini akılda tutmaya değer - bu seçeneği uygulamanızda kullanmayın.

Bunu sayfadan uzaklaştırarak ve daha sonra döndürerek onaylayabilirsiniz. Görmelisin Yüklemek ve aktive etmek Yeni işçi kurulduğunda olaylar tekrar ateşleyin.

Chrome DevTools, çalışanınızı sadece yeniden yükleyerek güncelleyebileceğiniz faydalı bir seçeneğe sahiptir. DevTool'leri açın ve Uygulama sekmesine gidin, ardından sol sütundan servis çalışanı'nı seçin. Panelin üstünde, yeniden yüklemede güncelleme etiketli bir onay kutusu, işaretleyin. Güncellenen işçiniz şimdi yenileme konusunda yüklü ve etkinleştirilecektir.

06. Değişiklikleri onayla

Bunu ekleyerek onaylayalım console.log ('foo') Etkinlik dinleyicilerinden birini yapın ve sayfayı yenileyin. Bu bizi yakaladım çünkü serinletici olduğumuzda konsoldaki girişi görmeyi bekliyorduk, ama gördüğümüz tek şey 'SW aktif' mesajıydı. Reload Option'daki güncelleme işaretlendiğinde, sayfayı iki kez yenilenir.

Konsol ayarları panelinde Koru TO LOG onay kutusunu işaretleyerek ve tekrar yenilenerek bunu onaylayabilirsiniz. Kaydedilen olayları, 'Foo' ile birlikte, ardından 'Foo' ile birlikte, ardından 'http: // localhost: 3000 /' izlediğini görmelisiniz. Sayfanın yeniden yüklendiğini ve ardından 'SW Etkinleştir' mesajını belirtin.

07. Alınan etkinliği izleyin

Başka bir dinleyici ekleme zamanı. Bu sefer takip edeceğiz almak Sayfa her bir CSS dosyası, görüntü veya hatta API yanıtı gibi bir kaynağı yüklerken ateşlenen olay. Bir önbellek açacağız, sayfaya ve sonra - arka planda - arka planda - yanıtı önbelleğe alın. Öncelikle, dinleyiciyi ekleyelim ve yenileyelim, böylece ne olduğunu görebilirsiniz. Konsolda birçok kişi görmelisin Fetçi kütükler.

 self.addeventlistener ('getiri', (olay) = & gt; {
 console.log (olay);
}); 

Hizmet modumuz, kendi komut dosyasını sayfaya ekleyen ve WebSocket isteklerini kullanan Browsersync'u kullanır. Bunlar için fetchevents göreceksiniz, ancak bunları görmezden gelmek istiyoruz. Ayrıca sadece kendi etki alanımızdan gelen istekleri önbelleğe almak istiyoruz. Öyleyse, açıkça görmezden gelmek de dahil olmak üzere istenmeyen istekleri görmezden gelmek için birkaç şey ekleyelim. / Dizin yolu:

 self.addeventlistener ('getiri', (olay) = & gt; {
 // CrossDomain isteklerini yoksay
 if (! Event.request.url.startswith (self.location.origin)) {
   dönüş;
 }
 // alamayan istekleri yoksay
 if (event.request.method! == 'get') {
   dönüş;
 }
 // tarayıcı senkronizasyonunu yoksay
 if (event.request.url.indexof ('tarayıcı-senkron') & gt; -1) {
   dönüş;
 }
 // Endeks rotasını önlemek önbelleğe alındı
 if (olay.request.url === (self.location.origin + '/')) {
   dönüş;
 }
 // index.html önbelleğe alındı
 if (event.request.url.endswith ('index.html')) {
   dönüş;
 }
 console.log (olay);
}); 

Şimdi günlükler çok daha temiz olmalı ve önbelleğe almaya başlamak güvenlidir.

08. Varlıkları önbelleğe alın

Şimdi bu yanıtları önbelleğe almaya başlayabiliriz. İlk önce önbelleğimize bir isim vermeliyiz. Hadi bizim arayalım v1-varlıklar . Bu satırı SW.JS dosyasının üstüne ekleyin:

 Const AssetsCachename = 'V1-Varlıklar'; 

Sonra fetchevents'u kaçırmamız gerekiyor, böylece sayfaya ne döneceğini kontrol edebiliriz. Bunu etkinliği kullanarak yapabiliriz lle cevap ver yöntem. Bu yöntem bir sözü kabul eder, böylece bu kodu ekleyebiliriz, console.log :

 // Bu söz zinciriyle cevap vermeyi söyle
 event.respondwith (
   // önbelleği aç
   Caches.Open (AssetsCachename)
     .Then ((önbellek) = & gt; {
       // talebi ağa yap
       geri dönüş getirisi (Event.Request)
         .Then ((yanıt) = & gt; {
           // cevabı önbelleğe alma
           cache.put (olay.Request, response.clone ());
           // Sayfaya orijinal cevabı döndür
           geri dönüş cevabı;
         });
     })
 ); 

Bu, ağdaki isteği iletir, ardından orijinal yanıtı sayfaya geri göndermeden önce önbellekteki cevabı saklayacaktır.

Burada, bu yaklaşımın, kullanıcının sayfayı yükledikten sonra ikinci kez yanıtları önbelleğe almayacağına dikkat ediyor. İlk kez işçiyi kuracak ve etkinleştirecek, ancak zamana kadar almak Dinleyici hazır, her şey zaten istenmiş olacak.

Birkaç kez yenileyin ve DevTools & GT'deki önbelleği kontrol edin; Uygulama sekmesi. Sol sütundaki önbellek depolama ağacını genişletin ve önbelleğinizi depolanan tüm yanıtlarla görmelisiniz.

09. Önbellekten Servis

Her şey önbelleğe alındı, ancak henüz henüz herhangi bir dosyaya hizmet vermek için önbelleği kullanmıyoruz. Bunu şimdi bağlayalım. Öncelikle, önbellekteki istek için bir eşleşme arayacağız ve varsa, buna hizmet edeceğiz. Varsa, ağı kullanacağız ve yanıtı önbelleğe alacağız.

// bu zincire ile cevap vermeyi söyle
 event.respondwith (
   // önbelleği aç
   Caches.Open (AssetsCachename)
     .Then ((önbellek) = & gt; {
       // önbellekte eşleştirme talebini arayın
       döndür cache.match (Event.Request)
         .THEN ((eşleştirilmiş) = & gt; {
           // Bir eşleşme bulunursa önce önbelleğe alınmış sürümü iade edin
           if (eşleşmiş) {
             dönüş eşleştirildi;
           }
           // aksi takdirde ağa devam et
           geri dönüş getirisi (Event.Request)
             .Then ((yanıt) = & gt; {
               // cevabı önbelleğe alma
               cache.put (olay.Request, response.clone ());
               // Sayfaya orijinal cevabı döndür
               geri dönüş cevabı;
             });
         });
     })
); 

Dosyayı kaydedin ve yenileyin. DevTools & GT'yi kontrol edin; Ağ sekmesi ve statik varlıkların her biri için boyut sütununda listelenen (ServiceWorker'dan) görmelisiniz.

Phew, bittik. Böyle az miktarda kod için, anlayacak çok şey var. Tüm varlıklar önbelleğe alındıktan sonra sayfayı yenilemediğini görmelisiniz, ancak hadi (bilimsel olmayan) yükleme sürelerinin kısacık bir bağlantıda (DevTools ve GT; Ağ sekmesi) yapalım.

Servis işçisi olmadan, simüle edilmiş bir Hızlı 3G ağının üzerine yüklenmesi, her şeyin yüklenmesi için neredeyse 30 saniye sürer. Servis işçisi ile, aynı kısık bağlantılı, ancak önbellekten yüklenerek, bir saniyenin altına girer.

Çevrimdışı kutuyu işaretleyin ve yenileyin ve ayrıca, API'den tahmin verilerini alamamıza rağmen, sayfanın bağlantı olmadan yüklendiğini de göreceksiniz. Sayfa 2 Buna geri döneceğiz ve API yanıtını da önbelleğe almayı öğreneceğiz.

Sonraki Sayfa: Çevrimiçi erişim sunmak için servis çalışanı kullanın

• 1
• 2

Geçerli sayfa: Sayfa 1: Daha Hızlı Yükleme