PWA Service Worker for Dummies

Adevărul este că lucrătorul de servicii are un rol important de jucat în următorii ani și, cu cât vă puteți familiariza mai repede cu această nouă tehnologie, cu atât vă puteți adapta mai bine la acest nou viitor al Web-ului.

Acesta este motivul pentru care, pentru a vă ajuta să cunoașteți mai bine această nouă tehnologie, vom avea împreună o discuție despre lucrătorii din servicii - ce este, ce aduce ea pe Web, cum ne putem pregăti mai bine pentru această nouă tehnologie de internetul.

Ce este un lucrător de servicii?

Definiții

Privit universal ca tehnologia care produce sau distruge PWA, service worker este un API care rulează independent de browser și responsabil pentru interceptarea rețelei și, din această cauză, poate face multe dintre lucrurile care anterior erau imposibile pe Web. Site-urile web (de obicei PWA) controlate de lucrătorii de servicii pot avea o integrare mai profundă cu dispozitivul în uz și, în consecință, aducând mai multe capabilități hardware și caracteristici asemănătoare aplicațiilor pe Web (de exemplu, notificări push, sincronizare în fundal și multe altele).

Cum functioneaza

Pe scurt. service worker este, în esență, un strat bazat pe evenimente între browser și server care interceptează, modifică și gestionează cererile de rețea de ieșire:

Și din moment ce lucrătorul de serviciu este unul bazat pe evenimente , acesta răspunde și comunică numai prin evenimente și folosește promisiuni pentru a spune când o operațiune este finalizată. Cu toate acestea, toate recepționarea evenimentelor (de exemplu, fetch și push ) sunt posibile numai atunci când lucrătorul de service este activ , ceea ce indică când browserul recunoaște și înregistrează lucrătorul de serviciu (și, de asemenea, când lucrătorul de serviciu însuși a terminat cu succes instalarea) . Într-un mod simplificat, acesta este ciclul de viață tipic al unui lucrător de servicii:

De asemenea, luați notă de toate aceste evenimente disponibile în service worker:

Toate evenimentele funcționale ( fetch , sync și push ) ar trebui să se explice de la sine, deoarece sunt evenimentele care fac aproape toate caracteristicile progresive ale PWA (adică capabilități offline, sincronizare în fundal, notificări push).

 Lectură recomandată: Ce este PWA? Tot ce trebuie să știți despre aplicațiile web progresive

Constrângeri pentru lucrătorii de servicii

Deoarece acesta este un script care rulează independent de browser, există câteva constrângeri:

• Protocolul HTTPS : lucrătorii de servicii trebuie să fie rulați pe site-uri web bazate pe HTTPS

• Nu există acces la localStorage , DOM și fereastră.
• scope : lucrătorii de servicii pot opera numai în domeniul de scope al directorului curent (și al subdirectoarelor) în care se află service-worker.js .
• Asincron : lucrătorii de servicii sunt de natură asincron, bazându-se astfel pe API-uri bazate pe Promise.

Ce înseamnă lucrătorii de servicii pentru PWA

După cum sa menționat anterior, lucrătorul de serviciu este coloana vertebrală a PWA, fără de care multe dintre caracteristicile revoluționare ale PWA pur și simplu nu sunt posibile. În esență, ceea ce face lucrătorul de servicii este că oferă mijloace pentru:

Performanță mai bună

Performanța la vizite repetate este semnificativ mai bună pe un PWA, deoarece lucrătorii de service fac enorm pentru a ajuta procesul de stocare în cache. În comparație cu cache-ul web tipic (cache HTTP) utilizat în majoritatea site-urilor web, PWA excelează în difuzarea conținutului chiar și în condiții de rețea nefavorabile:

Acest lucru se datorează faptului că lucrătorii de servicii oferă dezvoltatorilor libertate totală pentru exact ce și cum se face memorarea în cache. Pentru a vedea cât de mai bună este performanța în cache a lucrătorilor de servicii, vă recomandăm studiul recent al Google: Măsurarea impactului performanței în lumea reală a lucrătorilor de servicii. Studiul are o metodologie clară, centrată pe timpul pentru prima vopsire ca măsură pentru a determina performanța lucrătorilor de servicii.

În medie, paginile s-au încărcat destul de repede atunci când un lucrător de service controla pagina decât o făceau fără un lucrător de serviciu, atât pentru vizitatorii noi, cât și pentru cei care revin.

Philip Walton, Măsurarea impactului real asupra performanței lucrătorilor de servicii

Acces offline

Când sunt înregistrați, lucrătorii de servicii memorează în cache conținutul necesar pentru site-ul dvs. PWA și îl difuzează ulterior. Acest lucru face ca site-urile web alimentate de PWA să fie capabile offline, deoarece utilizatorii pot interacționa în continuare cu site-ul și pot vedea tot conținutul stocat în cache.

Acest lucru nu înseamnă că accesul offline este o caracteristică nemaivăzută anterior pe Web - a fost posibil să se ofere utilizatorilor o experiență offline pe web, doar că experiența nu a fost optimă (consultați Application Cache este un Douchebag) și serviciu lucrătorii au fost inventați pentru a aborda (sau mai mult ca să evite) dezavantajele AppCache.

 Lectură recomandată: Cum să vă faceți PWA să funcționeze offline

Caracteristicile aplicației native

Pe lângă faptul că oferă acces offline și performanță îmbunătățită, lucrătorii de servicii servesc și ca bază pentru mai multe funcții asemănătoare aplicațiilor, cum ar fi notificările push și sincronizarea în fundal (și, în viitorul apropiat, geofencing și sincronizare periodică). Funcția de notificări push a PWA, de exemplu, este asamblată folosind două API: Notifications API și Push API, ambele fiind construite pe deasupra API-ului Service Worker.

Ciclul de viață al unui lucrător de servicii

Durata de viață a unui serviciu constă din trei părți: înregistrare, instalare și activare, toate acestea fiind detaliate mai jos:

Înregistrare

Primul pas pe care trebuie să-l facem este să înregistrăm lucrătorul de service. Fără acest pas, browserul nu va ști unde este localizat lucrătorul dvs. de service și, astfel, face imposibilă instalarea lucrătorului de service în fundal.
Putem înregistra lucrătorul de service folosind următorul cod:

 if('serviceWorker' în navigator) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.then((reg) => {
   // înregistrarea a funcționat
       console.log('Înregistrare reușită. Domeniul este ' + reg.scope);
};

Codul de mai sus va începe mai întâi să caute API-ul Service Worker în browser și, dacă browser-ul acceptă respectivul API, înregistrează un nou lucrător de service folosind metoda serviceworkerContainer.register() și oferă un domeniu de scope al lucrătorului de service. De exemplu, în codul de mai sus, scope nostru este /pwa-examples/simicart/ , ceea ce înseamnă că lucrătorul nostru de servicii ar lucra numai pentru paginile care încep cu /pwa-examples/simicart/ . Aceste pagini le numim „pagini controlate ”.

Instalare

Acum că browserul știe unde este lucrătorul nostru de service - și care este scopul acestuia - va încerca să instaleze lucrătorul de service. Puteți alege să nu faceți nimic în această fază, dar am dori totuși să remarcăm că aceasta este faza în care are loc cea mai mare parte a procesului de stocare în cache. De exemplu, acesta este de obicei modul în care se realizează procesul de stocare în cache a activelor:

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    „/pwa-examples/”,
    „/pwa-examples/index.html”,
    „/pwa-examples/css/styles.css”,
    „/pwa-examples/js/app.js”,
]

self.addEventListener('install', ( event ) => {
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

După cum puteți vedea în exemplul de mai sus, folosim API-ul Cache pentru a stoca în cache activele noastre pe care le vom folosi ulterior pentru a face PWA capabil să fie offline. Acest proces de stocare în cache are loc în timpul evenimentului de instalare.

Activare

După etapa de instalare, putem activa acum lucrătorul de service. Cu toate acestea, această etapă de activare nu are loc în mod normal în mod automat și, pentru ca lucrătorul de service să se activeze, trebuie să vă asigurați că nu există niciun lucrător de service care controlează în prezent paginile.

Alternativ, puteți, de asemenea, să automatizați procesul de activare a lucrătorului de servicii folosind metoda skipWaiting() .

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    „/pwa-examples/”,
    „/pwa-examples/index.html”,
    „/pwa-examples/css/styles.css”,
    „//pwa-examples/js/app.js”,
]
self.addEventListener('install', ( event ) => {
    self.skipWaiting(); // sări peste așteptare
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

Web-ul are nevoie de lucrător de service

În acest moment, putem fi cu toții de acord că lucrătorul de servicii este aproape un eventual pas pe care web-ul trebuie să-l facă. Utilizatorii devin din ce în ce mai pretențioși cu funcții asemănătoare aplicațiilor și, combinat cu faptul că PWA devine viitorul livrării de software, se pare că Web-ul are un potențial mare în următorii ani.

Pentru comercianții Magento care doresc să transforme vitrina, oferim o soluție PWA fără cap complet rentabilă pentru afacerea dvs.