Proveďte svou aplikaci offline s pracovníky služby

Servisní pracovníci mohou být použity ke zlepšení doby zatížení a podporu offline pro vaše stránky a webové aplikace. V tomto tutoriálu vám ukážeme, jak postupně zvyšovat webovou aplikaci se servisním pracovníkem. Nejprve se obrátíme na to, co je servisní pracovník a jak funguje její životní cyklus, pak vám ukážeme, jak používat, pak urychlit vaše stránky (tuto stránku) a nabídnout offline obsah (strana 2).

Pak vám ukážeme, jak Jak vytvořit aplikaci s pracovníky. Naučíte se, jak nastavit pracovníka holých kostí, který bude vyrovnávací paměti a slouží statickou aktivu (přináší obrovské zvýšení výkonu na následné zatížení), pak jak vyrovnávací paměti dynamických API odpovědí a dát naší demo aplikaci plnou podporu offline. Nejprve se podívejme na to, co přesně pracují pracovníci, a jak fungují.

Budování webových stránek? Zefektivnit svůj proces s velkým Webové stránky Builder. a udržovat to s slušným web hosting servis. A dostat vaše úložiště seřazené s nimi cloudové úložiště Možnosti.

Co je to servisní pracovník?

Co je tedy servisní pracovník? Je to skript, napsaný v JavaScriptu, že váš prohlížeč běží v pozadí. To neovlivní hlavní vlákno (kde JavaScript obvykle běží na webové stránce) a nebude v rozporu s kódem aplikace nebo ovlivnit výkon runtime.

Servisní pracovník nemá přímý přístup k Dom nebo události a interakci uživatelů se děje ve samotném webové stránce. Přemýšlejte o tom jako vrstva, která sedí mezi webovou stránkou a sítí, což umožňuje zachytit a manipulovat s požadavky na síti (např. Ajax požadavky) provedené vaší stránkou. To je ideální pro správu mezipaměti a podpora offline použití.

Životní cyklus servisní pracovník

Život servisního pracovního prádla následuje jednoduchý tok, ale to může být trochu matoucí, když jste zvyklí na skripty JS, které právě pracují okamžitě:

Instalace a gt; Čekání (instalováno) & gt; Aktivace a gt; Aktivovaný a gt; Redundantní

Když je vaše stránka poprvé načtena, registrační kód jsme přidali index.html. Spustí instalaci servisního pracovního prádla. Pokud neexistuje žádný stávající pracovník, bude nový pracovník služby aktivován ihned po instalaci. Webová stránka může mít pouze jeden servisní pracovník aktivní najednou.

Pokud je již nainstalován pracovník, bude nainstalován nový servisní pracovník a poté sedněte na čekacím kroku, dokud není stránka zcela uzavřena a poté znovu načtena. Jednoduše osvěžující není dost, protože můžete mít otevřené jiné karty. Musíte zajistit, aby všechny instance stránky byly uzavřeny jinak nový pracovník nebude aktivovat. Nemusíte zavřít záložky, můžete se pohybovat pryč na jiné stránky a vrátit se.

Oba Nainstalujte a aktivovat Události se vyskytují pouze jednou za pracovníka. Po aktivaci, servisní pracovník pak bude mít kontrolu nad stránkou a může začít manipulaci s událostmi, jako je například FETCH pro manipulaci s požadavky.

Nakonec se servisní pracovník stane redundantní, pokud prohlížeč zjistí, že samotný pracovník byl aktualizován nebo zda není instalace nebo aktivace selhat. Prohlížeč bude hledat bajtový rozdíl určit, zda byl pracovní skript aktualizován.

Je důležité poznamenat, že byste se nikdy neměli měnit (nebo rev) název servisního pracovního prádla. Ani byste neměli vyrovnávat soubor pracovník na serveru, protože jej nebudete moci snadno aktualizovat, ačkoli prohlížeče jsou nyní dostatečně inteligentní pro ignorování záhlaví ukládání do mezipaměti.

01. Clone Demo App

Dobře, pojďme se učit, jak vytvořit webovou aplikaci s pomocí pracovníků služeb. Pro tento tutoriál budete potřebovat nedávné verze node.js a NPM nainstalované v počítači.

Srazili jsme demo aplikaci, kterou budeme používat jako základ pro tento tutoriál ( klonovat demo app zde ). Aplikace je zábavný malý projekt, který fixuje pětidenní předpověď počasí založené na umístění uživatele. Poté zkontroluje, zda je před koncem dne předpovídat déšť a aktualizujte UI.

Byl postaven neefektivně (úmyslně) s využitím velkých, zbytečných knihoven, jako je jQuery a bootstrap, s velkými neoptimovanými obrazy, aby se rozdrtil rozdíl ve výkonu při používání servisního pracovního prádla. V současné době váží v směšném 4,1 MB.

02. Získejte klíč API

Aby bylo možné načíst data počasí z API, budete muset dostat se zdarma API klíč OpenWeathermap :

Jakmile máte klíč, otevřete index.html. a hledat window.api_key. proměnná v. \ t & lt; hlava & gt; . Vložte klíč do hodnoty:

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

03. Spusťte vývojový server

Teď jsme připraveni začít pracovat na projektu. Nejdříve nainstalujte závislosti spuštěním:

    npm install

Pro nástroj sestavení jsou dva úkoly. Běh NPM START. Spuštění vývojového serveru na portu 3000. Spustit NPM Run Build. připravit verzi "výroby". Mějte na paměti, že je to jen demo, takže není opravdu výrobní verze - neexistuje žádná minifikace nebo nic - soubory právě dostanou 'zvraty'.

Algoritmus se používá k vytvoření hash, například 9C616053E5 ze souboru obsahu. Algoritmus bude vždy vydávat stejný hash pro stejný obsah, což znamená, že pokud soubor neupravíte, hash se nezmění. Hash je pak připojen k názvu souboru, takže například styly.css by se mohlo stát styly-9c616053e5.css. Hash představuje revizi souboru - tedy "zvrátit".

Můžete bezpečně vykládat každou revizi souboru na serveru, aniž byste museli neplatit svou mezipaměť, což je drahé, nebo se starat o některou jinou mezipaměť třetí strany slouží nesprávnou verzi.

04. Zavést servisní pracovník

Začněme s naším servisním pracovníkem. Vytvořte soubor s názvem Sw.js v kořenovém adresáři SRC. adresář. Poté přidejte tyto dvě posluchače události, aby se přihlásili Nainstalujte a aktivovat Události:

 self.addeventListener ('Instalovat', (událost) = & gt; {
      console.log (událost);
    });

    self.addeventListener ('aktivace', (událost) = & gt; {
      console.log (událost);
    }); 

. \ T já Proměnná zde představuje globální přečtený rozsah čtení. Je to trochu jako okno objekt na webové stránce.

Dále musíme aktualizovat náš soubor index.html a přidat příkazy k instalaci servisního pracovního prádla. Přidejte tento skript těsně před uzavřením & lt; / tělo & gt; štítek. Zaregistruje náš pracovníka a zaznamenává svůj aktuální stav.

 & lt; scénář a gt;
     Pokud ('serviceworker' v navigátoru) {
       navigátor.Serviceworker.register ('/ sw.js')
         .then (funkce (reg) {
           Pokud (reg.instalace) {
             console.log ('sw instalace');
           } jinak (reg.waiting) {
             console.log ('sw čeká');
           } jinak (reg.active) {
             console.log ("aktivovaný SW");
           }
         }). Úlovek (funkce (chyba) {
           // registrace se nezdařila
           console.log ('registrace selhala s chybou "+);
         });
     }
   & lt; / script & gt; 

Spusťte svůj vývojový server spuštěním NPM START. a otevřete stránku v moderním prohlížeči. Doporučujeme používat Google Chrome, protože má dobrou podporu servisní pracovníka ve svých devtoolech, které se budeme odkazovat na v celém tomto tutoriálu. Měli byste vidět tři věci zaznamenané do konzoly; Dva ze servisního pracovního prádla pro Nainstalujte a aktivovat události a druhá bude zpráva z registrace.

05. Aktivujte pracovník

Řekneme našim pracovníkovi, aby přeskočili čekající krok a aktivujte nyní. Otevřete soubor SW.JS a přidejte tento řádek kdekoli uvnitř Nainstalujte Posluchač událostí:

 self.kipwaiting (); 

Nyní, když aktualizujeme pracovní skript, bude trvat kontrolu nad stránkou ihned po instalaci. Stojí za to s ohledem na to, že to může znamenat, že nový pracovník bude převzít kontrolu nad stránkou, která může být načtena předchozí verzí vašeho pracovního prádla - pokud to bude způsobit problémy, nepoužívejte tuto možnost v aplikaci.

Můžete to potvrdit tím, že navlékne od stránky a pak se vrací. Měli byste vidět Nainstalujte a aktivovat události opět, když byl nový pracovník nainstalován.

Chrome Devtools má užitečnou volbu, která znamená, že můžete aktualizovat svého pracovního prádla jen načtením. Otevřete devtools a přejděte na kartu Aplikace a pak zvolte servisní pracovník z levého sloupce. V horní části panelu je zaškrtávací políčko označené aktualizaci na reload, zaškrtněte ji. Váš aktualizovaný pracovník bude nyní nainstalován a aktivován na aktualizaci.

06. Potvrďte změny

Potvrďte to přidáním console.log ('foo') Zavolejte buď posluchače událostí a obnovte stránku. To nás zachytilo, protože jsme očekávali, že se přihlásili přihlášení konzoly, když jsme osvěžili, ale vše, co jsme viděli, byla zpráva "SW aktivované". Ukazuje se Chrome aktualizovat stránku dvakrát, když je zaškrtnuta aktualizace na reloadi.

To můžete potvrdit tímto zaškrtnutím políčko Zaškrtnutí protokolu v panelu Nastavení konzoly a znovu obnovíte. Měli byste vidět nainstalovat a aktivovat události přihlášené, spolu s 'foo', následovaný 'navigován na http: // localhost: 3000 /' pro označení, že stránka byla znovu načtena a pak konečná zpráva "Aktivovaná zpráva SW.

07. Sledujte událost načítání

Čas přidat další posluchače. Tentokrát sledujeme vynést Událost, která je vypálena pokaždé, když stránka načte zdroj, například soubor CSS, obrázek nebo dokonce odpověď API. Otevřeme mezipaměť, vrátíme odpověď na stránku a poté - v pozadí - mezipaměti. Nejdříve přidejte posluchač a aktualizovat, abyste viděli, co se stane. Ve konzole byste měli vidět mnoho Fetektýn protokoly.

 self.addeventListener ('fetch', (událost) = & gt; {
 console.log (událost);
}); 

Náš režim slouží používá prohlížečeNC, který přidává svůj vlastní skript na stránku a dělá požadavky na webové schránky. Uvidíte také fetchevents taky, ale chceme tyto ignorovat. Také chceme pouze mezipaměť získat požadavky z naší vlastní domény. Tak pojďme přidat několik věcí, které chcete ignorovat nežádoucí požadavky, včetně explicitně ignorování / Rejstřík:

 self.addeventListener ('fetch', (událost) = & gt; {
 // Ignorovat požadavky CrossDomain
 Pokud (!! event.request.url.Startswith (self.lokation.origin) {
   vrátit se;
 }
 // ignorovat non-get požadavky
 pokud (event.request.method! == 'GET') {
   vrátit se;
 }
 // ignorovat synchronizaci prohlížeče
 IF (Event.Request.url.Indexof ('Prohlížeč-synchronizace') & gt; -1) {
   vrátit se;
 }
 // Zabraňte mezipaměti trasy indexu
 Pokud (Event.Request.url === (Self.Location.origin + '/')) {
   vrátit se;
 }
 // zabránit index.html je uložen do mezipaměti
 if (event.request.url.endswith ('index.html')) {
   vrátit se;
 }
 console.log (událost);
}); 

Nyní by se protokoly měly být mnohem čistší a je bezpečné začít ukládání do mezipaměti.

08. mezipaměť aktiv

Nyní můžeme začít ukládat ukládání do mezipaměti. Nejdříve musíme dát naší mezipaměti jméno. Zavolejme naše V1-Assets. . Přidat tento řádek na začátek souboru SW.JS:

 CONST assetscachename = "v1-aktiva"; 

Pak musíme uzdravit fetchevents, takže můžeme kontrolovat to, co se vrátí na stránku. Můžeme to udělat pomocí akce odpověď metoda. Tato metoda přijímá slib, takže můžeme tento kód přidat, nahrazení console.log. :

 // Řekněte fetch, abyste odpověděli s tímto slibem
 event.Respondwith (
   // Otevřete mezipaměť
   Caches.Open (AssetsCachename)
     .then (cache) = & gt; {
       // Proveďte požadavek do sítě
       návrat na fetch (event.request)
         .then ((odpověď) = & gt; {
           // vyrovnávací paměť odpověď
           cache.put (event.Request, odezva.clone ());
           // Vraťte původní odpověď na stránku
           vrátit odpověď;
         });
     })
 ); 

To před odesláním původní odpověď zpět před odesláním původní odezvy zpět na stránku předá požadavek do sítě.

Stojí za zmínku, že tento přístup nebude ve skutečnosti vyrovnávací paměti reakce až do podruhé, kdy uživatel načte stránku. Poprvé bude instalovat a aktivovat pracovník, ale v době vynést Posluchač je připraven, vše bude již požadováno.

Aktualizovat několikrát a zkontrolujte mezipaměť v devtoolech & gt; Karta aplikace. Rozbalte strom ukládání mezipaměti v levém sloupci a měli byste zobrazit mezipaměť se všemi uloženými odpověďmi.

09. Podávejte z mezipaměti

Všechno je v mezipaměti, ale ve skutečnosti používáte mezipaměť, abyste mohli složit všechny soubory. Pojďme ho zavěsit. Nejprve se podíváme na zápas pro žádost v mezipaměti a pokud existuje, budeme to sloužit. Pokud neexistuje, použijeme síť a pak odezvu.

// Řekněte fetch, abyste s tímto řetězem odpověděl
 event.Respondwith (
   // Otevřete mezipaměť
   Caches.Open (AssetsCachename)
     .then (cache) = & gt; {
       // hledat odpovídající požadavek v mezipaměti
       vrátit cache.match (event.request)
         .then ((odpovídat) = & gt; {
           // Pokud je shoda nalezena vraťte verzi mezipaměti první
           Pokud (Shoda) {
             shoda v návratu;
           }
           // Jinak pokračujte v síti
           návrat na fetch (event.request)
             .then ((odpověď) = & gt; {
               // vyrovnávací paměť odpověď
               cache.put (event.Request, odezva.clone ());
               // Vraťte původní odpověď na stránku
               vrátit odpověď;
             });
         });
     })
); 

Uložte soubor a aktualizaci. Zkontrolujte devtools & gt; Karta Síť a měli byste se zobrazit (ze servisu) uvedené v sloupci velikosti pro každou statickou aktiva.

Phew, jsme hotovi. Pro takové malé množství kódu je toho hodně pochopit. Měli byste vidět, že osvěžující stránku, jakmile jsou všechna aktiva uložena do mezipaměti, ale udělejme rychlé (necidiální) kontrolu zatížení časy na škrteném spojení (devtools & gt; karta sítě).

Bez servisního pracovního prádla, načítání přes simulovanou síti Fast 3G trvá téměř 30 sekund pro vše, co je načíst. S servisním pracovníkem se stejným škrtovaným spojením, ale načítání z mezipaměti, to trvá těsně za sekundu.

Zaškrtněte políčko Offline a aktualizovat a zobrazí se také, že stránka zatížení bez připojení, i když nemůžeme získat data prognózy z API. Na stránce 2 se k tomu vrátíme a naučíme se, jak vyrovnávat odpověď API.

Další stránka: Použijte servisní pracovník nabídnout online přístup

• 1.
• 2.

Aktuální stránka: Page 1: Rychlejší zatížení