Sestavte aplikace, které pracují offline

Sep 13, 2025

jak

Po dlouhou dobu, funkčnost offline, synchronizace pozadí a push oznámení diferencoval nativní aplikace z jejich webových protějšek. . \ T Servisní pracovník API. je technologie měnící hru, která se rozvíjí hřiště. V tomto tutoriálu ho použijeme k vytvoření stránky, která může sloužit obsahu, i když neexistuje žádné připojení k internetu.

Stáhněte si kód ze souborů

01. server https

Nejjednodušší způsob, jak přemýšlet o servisních pracovníkech, je jako kus kódu, který je instalován webem na klientském počítači, běží na pozadí a následně umožňuje požadavky odeslaný na daný web, aby byl zachycen a manipulován. Protože je to taková mocná schopnost, pracovat se servisními pracovníky v živém prostředí, musíte být spuštěni přes https. To zajišťuje, že nelze využít, tím, že se ujistí, že servisní pracovník prohlížeč obdrží ze stránky, je originální.

Pro účely rozvoje však můžeme běžet bez https http: // localhost / je povolena jako výjimka z tohoto pravidla. Nejjednodušší způsob, jak začít, je s NPM http-server. balík.

 NPM Instalovat HTTP-Server -g
http-server -p 8000 -C-1

02. Nastavte základní stránku

Na serveru není nic na serveru, takže udělejme základní stránku, kterou chcete sloužit. Vytvoříme nový soubor index.html a když spustíme server, který bude nyní přístupný na adrese http: // localhost: 8000 .

V této fázi zjistíte, že pokud ukončíte server HTTP a aktualizujete stránku v prohlížeči, dostanete chybovou stránku, protože web nelze dosáhnout. To je zcela očekáváno, protože jsme dosud necesli žádný offline obsah.

 Doctype HTML & GT;
& lt; html & gt;
  & lt; hlava & gt;
  & lt; meta charset = "UTF-8" / gt;
  & lt, titul & gt; servisní pracovník & lt; / titul & gt;
  & lt; scénář src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "Stylesheet" type = "text / css" href = "custom.css" & gt;
  & lt; / hlava & gt;
  & lt; tělo & gt;
  & lt; záhlaví & gt;
  & lt; H1 & gt; přivítání & lt; / h1 & gt;
  & lt; / záhlaví & gt;
  & lt, div id = "obsah" & gt;
  & lt; p & gt; obsah zde & lt; / p & gt;
  & lt; img src = "kitty.jpg" šířka = "100%" & gt;
  & lt; / div & gt;
  & lt; / tělo & gt;
& lt; / html & gt;

03. Zaregistrujte servisní pracovník

Nyní jsme dostali docela neobvyklou stránku a je čas začít přemýšlet o implementaci servisního pracovního prádla. Než dostaneme kódování, stojí za chvilku pochopit životní cyklus pracovníků služeb.

Proces odstartuje s "registrací" servisního pracovního prádla ve vašem JavaScriptu, který vypráví prohlížeč, aby začal instalovat pracovník - první krok jeho životního cyklu. V průběhu svého životního cyklu bude servisní pracovník v jednom z následujících států:

Instalace: Jakmile je servisní pracovník registrován, její instalace se obvykle používá ke stažení a mezipaměti statickému obsahu
Nainstalován: Pracovník je teoreticky připraven k použití, ale neprodleně se aktivuje
Aktivace: Nainstalovaný servisní pracovník se aktivuje, pokud neexistuje žádný stávající servisní pracovník, nebo určité podmínky vedou existující, aby vypršela; Aktivace se obvykle používá k vymazání starých souborů z obsahu mezipaměti offline
Aktivováno: Servisní pracovník má nyní ovládat dokument a zvládne požadavky
Redundantní: Pokud servisní pracovník nepodařilo nainstalovat nebo aktivovat, nebo pokud je nahrazen novějšími servisními pracovníkem

04. Zkontrolujte, zda jste zaregistrováni

Pojďme zaregistrovat servisní pracovník. To efektivně ukazuje prohlížeč do souboru JavaScriptu, který definuje chování pracovníků služby. Registrace se provádí pomocí objektu Serviceworker, který je vstupním bodem API. Zkontrolujeme také API je ve skutečnosti přítomno v prohlížeči, než se snaží udělat.

. \ T Registrovat() Funkce může být bezpečně volána při každém zatížení stránek a prohlížeč určit, zda již byl servisní pracovník zaregistrován.

 Pokud ("Serviceworker" v navigátoru) {
  window.addeventListener ('load', funkce () {
  Navigator.Serviceworker.register ('Serviceworker.js', {Scope: './'}).then (
  console.log ("Servisní pracovník úspěšně zaregistroval.");
  }, funkce (chyba) {
  console.log ("Chyba registrace služby služby:" + chyba);
  });
  });
}

05. Realizovat služební pracovník

Dále potřebujeme implementovat samotný servisní pracovník. Pracovníci služeb mohou poslouchat řadu událostí souvisejících s jejich vlastním životním cyklem a činností na stránce. Nejdůležitější jsou instalace, aktivujte a fetch.

Začněme vytvořením posluchače Nainstalujte událost, která spustí, jakmile je instalace pracovníka dokončena. To nám umožňuje instruovat servisní pracovník přidat nějaký obsah offline v aktuální složce do mezipaměti. Musíme také pojmenovat naši mezipaměť - protože staré cache může přetrvávat, aktualizace / verze této mezipaměti.

 var cureCache = 'demo-cache';
self.addeventlistener ('Instalovat', událost = & gt; {
  event.waituntil (
  Caches.Open (CurrentCache) .Then (funkce (cache) {
  console.log ("přidání obsahu do mezipaměti.");
  vrátit cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06. Fetch Event.

Naše stránka bude nyní vyrovnávací obsah, když je načten, ale potřebujeme určitý mechanismus pro zachycení požadavků a přesměrování do této mezipaměti. Chcete-li to udělat, musíme poslouchat vynést Události, které jsou spuštěny, když požadavek, jako je získání našeho index.html. Soubor je proveden v rámci sítě. Pak odpovídáme požadavku proti mezipaměti a sloužím do mezipaměti zdroj, pokud naleznete. V opačném případě se vrátíme do požadavku na položku FETCH API na server.

Stojí za to v tomto bodě poznamenat, že máme těžkou závislost na JavaScriptu slibuje práci. Ty mohou být trochu složité, takže stojí za to seznámit se s tím, jestli jste je nepoužívali dříve.

 self.addeventListener ('fetch', událost = & gt; {
  event.Respondwith (
  Caches.match (Event.Request) .Then (odezva = & gt; {
  Zpětná odpověď ||. fetch (event.request);
  })
   );
    });

07. Extend Fetch Event

Pokud jej otestujete nyní (ukončit HTTP server a aktualizovat stránku), měli byste zjistit, že vaše stránka funguje online i offline. Je však pravděpodobné, že budete chtít inteligentnější offline chování, s různým obsahem nebo funkčností, které je k dispozici, pokud není server k dispozici.

Chcete-li toho dosáhnout, můžeme rozšířit naše vynést Odpověď událostí dále kontrolovat speciálně pro požadavky na navigaci a reagovat s jinou stránkou offline, když je zjištěn. Tento index_offline.html. Soubor může být změna vaší online stránky, nebo něco zcela jiného, a může také použít jiné zdroje, které jste uložili do mezipaměti Custom.css. .

 self.addeventListener ('fetch', událost = & gt; {
  Pokud (Event.Request.mode === 'Navigace') {
  event.Respondwith (
  fetch (event.request) .catch (chyba = & gt; {
  console.log ("strana nedostupná. Vrácení obsahu offline.");
  vrátit caches.match ('./ index_offline.html');
  })
  );
  } else {
  event.Respondwith (
  Caches.match (Event.Request) .Then (odezva = & gt; {
  Zpětná odpověď ||. fetch (event.request);
  })
  );
  }
});

08. Smazat mezipaměť

Je tu ještě jedna věc, kterou potřebujeme. Pokud nyní zkuste upravovat obsah offline, zjistíte, že neaktualizuje, když testujete stránku - stále dostanete starou verzi! Je to proto, že starší soubory jsou stále uloženy do mezipaměti.

Musíte implementovat něco, abyste vyčistili zastaralé soubory z mezipaměti, abyste zabránili tomu, aby byly sloužily. To se provádí tím, že reaguje na aktivovat Událost a smazání všech cache, které neodpovídají názvu uvedenému v aktuálním pořadí. Poté můžete přidat číslo verze do aktuálního procesu při každém změně obsahu offline, abyste se ujistili, že je obnoveno.

 Tento.AddeventListener ('aktivace', událost = & gt; {
  Var ActiveCaches = [CurrentCache];
  console.log ("aktivovaný servisní pracovník. Kontrola mezipaměti je aktuální.");
  event.waituntil (
  Caches.keys (). Pak (Keylist = & gt; {
  Vrátit Promise.all (keylist.map (klíč = & gt; {
  IF (ActiveCaches.Indexof (klíč) === -1) {
  console.log ("smazání staré mezipaměti" +);
  vrátit caches.delete (klíč);
  }
  }));
  })
  );
});

Tento článek byl publikován v tématu Web Designer Magazine Problematika # 268. Přihlásit se nyní.

Přečtěte si více:

Průvodce kodérem pro API
Začněte s WebGL pomocí tří.js
12 Obrovské trendy webového designu pro rok 2018

Sestavte aplikace, které pracují offline

01. server https

02. Nastavte základní stránku

03. Zaregistrujte servisní pracovník

04. Zkontrolujte, zda jste zaregistrováni

05. Realizovat služební pracovník

06. Fetch Event.

07. Extend Fetch Event

08. Smazat mezipaměť

jak - Nejoblíbenější články

Jak stáhnout fotky Instagramu: Vše, co potřebujete vědět

Služoky Google: Jak navrhnout dokument

Značka typografie: kompletní průvodce

10 Úžasné věci, které můžete udělat s vrstvami

Jak plácat obličej pro animaci

Malování expresivního zátiší v akrylech

4 kroky k lepšímu VDM se Zbrushem

5 způsobů, jak efektivně řídit Cashflow

Kategorie