Construiți aplicații care funcționează offline

Sep 11, 2025

să

Pentru o lungă perioadă de timp, funcționalitatea offline, sincronizarea de fundal și notificările de împingere au aplicații native diferențiate de la omologii lor web. Service Worker API. este o tehnologie de schimbare a jocului care pune câmpul de joc. În acest tutorial, îl vom folosi pentru a construi o pagină care poate servi conținut chiar și în timp ce nu există conexiune la internet.

Descărcați codul de la Filesilo

01. Un server HTTPS

Cea mai ușoară modalitate de a gândi la lucrătorii de servicii este ca o bucată de cod care este instalată de un site pe o mașină client, rulează în fundal și, ulterior, permite solicitările trimise la acest site care să fie interceptate și manipulate. Deoarece aceasta este o capacitate atât de puternică, de a lucra cu lucrătorii de servicii într-un mediu live, trebuie să rulați peste HTTPS. Acest lucru asigură că nu pot fi exploatate, asigurându-vă că lucrătorul de service Browserul primește dintr-o pagină este autentic.

În scopuri de dezvoltare, cu toate acestea, putem rula fără HTTPS http: // localhost / este permisă ca o excepție de la această regulă. Cea mai simplă modalitate de a începe este cu NPM http-server. pachet.

 NPM Instalați http-server -g
http-server -p 8000 -C-1

02. Configurați o pagină de bază

Nu este nimic pe server chiar acum, așa că să facem o pagină de bază pentru a servi. Vom crea un nou fișier index.html și când rulăm serverul, acesta va fi acum accesibil la http: // localhost: 8000 .

În această etapă, veți descoperi că, dacă terminați serverul HTTP și actualizați pagina din browser, veți primi o pagină de eroare deoarece site-ul nu poate fi atins. Acest lucru este în întregime așteptat, deoarece nu am acceptat încă niciun conținut offline.

 & lt;! Doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & Lt; Meta Charset = "UTF-8" / & GT;
  & lt; title & gt; Service Worker & Lt; / Titlu & GT;
  & lt; script src = "site.js" & gt; / lt; / script & gt;
  & Link Rel = "Stylesheet" Type = "Text / CSS" href = "personalizat.css" & gt;
  & lt; / head & gt;
  & lt; corp & gt;
  & lt; header & gt;
  & lt; h1 & gt; bun venit & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "conținut" & gt;
  & lt; p & gt; conținut aici și lt; / p & gt;
  & Lt; img src = "kitty.jpg" lățime = "100%" & gt;
  & lt; / div & gt;
  & lt; / corp & gt;
& lt; / html & gt;

03. Înregistrați un lucrător de service

Acum am avut o pagină destul de nerecuperabilă și este timpul să începem să ne gândim la implementarea unui lucrător de service. Înainte de a ajunge la codificare, merită să luați o clipă pentru a înțelege ciclul de viață al lucrătorilor de servicii.

Procesul începe cu "înregistrarea" unui lucrător de service în JavaScript dvs., care spune browserului să înceapă instalarea lucrătorului - primul pas al ciclului său de viață. De-a lungul ciclului său de viață, un lucrător de servicii va fi într-unul din următoarele state:

Instalarea: Odată ce un lucrător de service a fost înregistrat, instalarea sa este de obicei utilizată pentru a descărca și cache conținutul static
Instalat: Lucrătorul este gata de utilizare teoretic, dar nu se activează imediat
Activarea: Un lucrător de service instalat se va activa dacă nu există niciun lucrător de servicii existente sau anumite condiții conduc pe cel existent să expire; Activarea este folosită în mod obișnuit pentru a șterge fișierele vechi din conținutul offline Cached
Activat: Lucrătorul de servicii are acum control asupra documentului și poate gestiona cererile
Redundant: Dacă lucrătorul de service nu a reușit să instaleze sau să activeze sau dacă este înlocuit de un lucrător nou de service

04. Verificați că sunteți înregistrat

Să înregistrăm un lucrător de service. Acest lucru indică în mod eficient browserul la fișierul JavaScript care definește comportamentul lucrătorului de serviciu. Înregistrarea se face folosind obiectul Serviceworker care este punctul de intrare la API. De asemenea, vom verifica API-ul este de fapt prezent în browser înainte de a încerca să faceți acest lucru.

Inregistreaza-te() Funcția poate fi numită în siguranță de fiecare dată când se încarcă pagina, iar browserul va determina dacă lucrătorul de service a fost deja înregistrat.

 Dacă ("Serviceworker" în Navigator) {
  fereastră.addeventlistener ("încărcare", funcție () {
  Navigator.Serviceworker.Register ("Serviceworker.Js", {domeniul de aplicare: "./'])
  consola.log ("lucrător de service înregistrat cu succes");
  }, funcția (eroare) {
  consola.log ("Eroare înregistrarea lucrătorului de service:" + eroare);
  });
  });
}

05. Implementarea lucrătorului de servicii

Apoi, trebuie să implementăm în sine lucrătorul de service. Lucrătorii de servicii pot asculta o serie de evenimente legate de propriul ciclu de viață și activitate pe pagină. Cele mai importante sunt instalarea, activarea și preluarea.

Să începem prin crearea unui ascultător pentru instalare eveniment, care declanșează odată ce instalarea lucrătorului este finalizată. Acest lucru ne permite să instruim lucrătorul de servicii să adauge un anumit conținut offline în dosarul curent într-o memorie cache. De asemenea, trebuie să numim memoria cache - de la vechile cache-uri pot persista, actualizarea / versiunea acestui nume de memorie cache vă permite să serviți mai târziu versiuni mai noi de conținut mai târziu.

 Var CurrentCache = 'demo-cache ";
Self.AdDeventlistener ("Instalare", Eveniment = & GT; {
  eveniment.waituntil (
  cacher.open (CurrentCache). Atunci (funcția (memoria cache) {
  consola.log ("adăugarea conținutului în memoria cache");
  returnați cache.addall ([
  './index_offline.html',
  "./kitty_offline.jpg",
  './CSS personalizat'
  ];
  })
  );
});

06. Evenimentul Fetch

Pagina noastră va fi acum conținut cache atunci când este încărcat, dar avem nevoie de un mecanism de a intercepta cererile și de a le redirecționa în această memorie cache. Pentru a face acest lucru, trebuie să ascultăm Fetch. evenimente, care sunt declanșate atunci când o cerere, cum ar fi obținerea noastră index.html. Fișierul se face în întreaga rețea. Apoi, se potrivesc cu cererea împotriva cache-ului și vom servi resursa cache, dacă este găsită. În caz contrar, ne întoarcem la o solicitare API pentru server.

Merită în acest moment, menționând că avem o dependență puternică de promisiunile JavaScript de a lucra. Acestea pot fi un pic mai complicat, deci merită să vă familiarizați dacă nu le-ați folosit înainte.

 Sell.AdDeventlistener ('Fetch', Event = & GT; {
  eveniment.Respwith (
  cacher.match (Event.Request). Atunci (răspuns = & gt; {
  Răspunsul la returnare ||. Fetch (eveniment.Request);
  })
   );
    });

07. Extindeți evenimentul Fetch

Dacă îl testați acum (terminați serverul HTTP și actualizați pagina), trebuie să găsiți că pagina dvs. funcționează atât online, cât și offline. Este posibil, totuși, că veți dori un comportament mai inteligent offline, cu un conținut sau funcționalitate diferit atunci când serverul nu este disponibil.

Pentru a realiza acest lucru, ne putem extinde Fetch. Răspunsul evenimentului Mai mult de verificat pentru solicitările de navigație și pentru a răspunde cu o altă pagină offline atunci când este detectată. Acest index_offline.html. Fișierul poate fi o variație a paginii dvs. online sau ceva complet diferit și puteți utiliza și alte resurse pe care le-ați acceptat, cum ar fi CSS personalizat .

 Sell.AdDeventlistener ('Fetch', Event = & GT; {
  dacă (Event.Request.mode === "Navigate ') {
  eveniment.Respwith (
  Fetch (Event.Request) .Catch (eroare = & gt; {
  consola.log ("pagina indisponibilă. Returnarea conținutului offline.");
  returnați cacher.match ('./ index_offline.html');
  })
  );
  } altfel {
  eveniment.Respwith (
  cacher.match (Event.Request). Atunci (răspuns = & gt; {
  Răspunsul la returnare ||. Fetch (eveniment.Request);
  })
  );
  }
});

08. Ștergeți memoria cache

Mai este încă un lucru. Dacă încercați acum să modificați conținutul offline, veți găsi că nu se actualizează când testați pagina dvs. - încă mai obțineți versiunea veche! Acest lucru se datorează faptului că fișierele mai vechi sunt încă cache.

Trebuie să implementați ceva pentru a curăța fișierele depășite din cache pentru a le împiedica să fie servite. Acest lucru se face prin a răspunde la un Activati Eveniment și ștergeți toate cache-urile care nu se potrivesc cu numele specificat în CrendCache. Apoi, puteți adăuga un număr de versiune la CrendCache de fiecare dată când modificați conținutul dvs. offline, pentru a vă asigura că acesta este actualizat.

 Acest.addeventlistener ("activați", eveniment = & gt; {
  VAR ActiveCaches = [CurrentCache];
  consola.log ("lucrător de service activat. Verificarea cache-ului este actualizată.");
  eveniment.waituntil (
  caches.keys (). Apoi (keylist = & gt; {
  return promite.all (keylist.map (cheie = & gt; {
  dacă (ActiveCac-uri.Indexof (cheie) === -1) {
  consola.log ("ștergerea vechii cache" + cheie);
  returnați cache-urile.delete (cheie);
  }
  }));
  })
  );
});

Acest articol a fost publicat în revista Web Designer Problema # 268. Abonează-te acum.

Citeste mai mult:

Ghidul unui coder pentru API-uri
Începeți cu WebGL folosind trei.js
12 Tendințe uriașe de design web pentru 2018

Construiți aplicații care funcționează offline

01. Un server HTTPS

02. Configurați o pagină de bază

03. Înregistrați un lucrător de service

04. Verificați că sunteți înregistrat

05. Implementarea lucrătorului de servicii

06. Evenimentul Fetch

07. Extindeți evenimentul Fetch

08. Ștergeți memoria cache

să - Cele mai populare articole

Cum se proiectează cu forme CSS: o introducere

Cum să pictați arta de animație colorată în Photoshop

Cum se face și de a folosi un mahlstick pentru pictura

Cum să ilustreze ochii animalelor

19 sfaturi pentru marile poseri

Cum se proiectează tipografia izometrică

Cum se creează caractere de desene animate în Cinema 4D

Cum se face explozii masive cu V-ray

Categorii