Operatore di servizio PWA per manichini

Il nocciolo della questione è che l'operatore dei servizi ha un ruolo importante da svolgere nei prossimi anni, e più velocemente potrai familiarizzare con questa nuova tecnologia, meglio potrai adattarti a questo nuovo futuro del Web.

Questo è il motivo per cui, al fine di aiutarti a conoscere meglio questa nuova tecnologia, discuteremo insieme degli operatori dei servizi: cos'è, cosa porta nel Web, come possiamo prepararci meglio per questa nuova tecnologia di la rete.

Che cos'è un lavoratore di servizio?

Definizioni

Considerata universalmente come la tecnologia che crea o interrompe le PWA, il service worker è un'API che funziona indipendentemente dal browser e responsabile dell'intercettazione della rete e, per questo motivo, può fare molte delle cose che prima erano impossibili sul Web. I siti Web (tipicamente PWA) controllati dagli addetti ai servizi possono avere un'integrazione più profonda con il dispositivo in uso e, di conseguenza, portare sul Web più funzionalità hardware e funzionalità simili alle app (ad esempio notifiche push, sincronizzazione in background e altro).

Come funziona

In poche parole. service worker è essenzialmente un livello basato su eventi tra il browser e il server che intercetta, modifica e gestisce le richieste di rete in uscita:

E poiché il service worker è quello basato su eventi , risponde e comunica solo attraverso gli eventi e usa le promesse per dire quando un'operazione è completa. Tuttavia, tutte le ricezioni di eventi (es. fetch e push ) sono possibili solo quando il service worker è attivo , che indica quando il browser riconosce e registra il service worker (e anche quando il service worker stesso ha terminato con successo l'installazione) . In modo semplificato, questo è il ciclo di vita tipico di un addetto ai servizi:

Inoltre, prendi nota di tutti questi eventi disponibili in Service worker:

Tutti gli eventi funzionali ( fetch , sync e push ) dovrebbero essere autoesplicativi, poiché sono gli eventi che rendono quasi tutte le caratteristiche delle funzionalità progressive di PWA (ad esempio funzionalità offline, sincronizzazione in background, notifiche push).

 Letture consigliate: Cos'è la PWA? Tutto quello che devi sapere sulle app Web progressive

Vincoli per i lavoratori del servizio

Poiché si tratta di uno script che viene eseguito indipendentemente dal browser, ci sono alcuni vincoli:

• Protocollo HTTPS : i service worker devono essere eseguiti su siti Web basati su HTTPS

• Nessun accesso a localStorage , DOM e alla finestra.
• scope limitato : i service worker possono operare solo scope della directory corrente (e delle sottodirectory) in cui si trova service-worker.js .
• Asincrono : i lavoratori del servizio sono di natura asincrona, quindi si affidano alle API basate su Promise.

Cosa significano i lavoratori dei servizi per PWA

Come affermato in precedenza, l'operatore di servizio è la spina dorsale di PWA, senza la quale molte delle caratteristiche rivoluzionarie di PWA semplicemente non sarebbero possibili. In sostanza, ciò che fa il lavoratore dei servizi è fornire i mezzi per:

Prestazioni migliori

Le prestazioni su visite ripetute sono significativamente migliori su una PWA, poiché gli operatori del servizio aiutano enormemente con il processo di memorizzazione nella cache. Rispetto alla tipica web cache (cache HTTP) utilizzata nella maggior parte dei siti web, PWA eccelle nel servire i contenuti anche in condizioni di rete sfavorevoli:

Tutto questo grazie al fatto che gli operatori dei servizi danno agli sviluppatori la totale libertà di esattamente cosa e come viene eseguita la memorizzazione nella cache. Per vedere quanto sono migliori le prestazioni di memorizzazione nella cache dei lavoratori dei servizi, consigliamo il recente studio di Google: Misurare l'impatto delle prestazioni nel mondo reale dei lavoratori dei servizi. Lo studio ha una metodologia chiara, incentrata sul tempo per dipingere prima come una metrica per determinare le prestazioni degli operatori dei servizi.

In media, le pagine si caricavano un po' più velocemente quando un operatore del servizio controllava la pagina rispetto a quanto non facesse senza un operatore del servizio, sia per i visitatori nuovi che per quelli di ritorno.

Philip Walton, Misurare l'impatto sulle prestazioni nel mondo reale dei lavoratori dei servizi

Accesso offline

Una volta registrati, gli operatori di servizio memorizzano nella cache il contenuto necessario per il tuo sito PWA e lo servono in seguito. Ciò rende effettivamente i siti Web basati su PWA offline, poiché gli utenti possono comunque interagire con il sito e vedere tutto il contenuto memorizzato nella cache.

Questo non vuol dire che l'accesso offline sia una funzionalità mai vista prima sul Web: era possibile offrire agli utenti un'esperienza offline sul Web, è solo che l'esperienza non era ottimale (vedi Application Cache è un Douchebag) e il servizio i lavoratori sono stati inventati per affrontare (o più simili, evitare) gli svantaggi di AppCache.

 Letture consigliate: Come far funzionare offline la tua PWA

Funzionalità dell'app native

Oltre a offrire accesso offline e prestazioni migliorate, gli addetti ai servizi fungono anche da base per funzionalità più simili a app come notifiche push e sincronizzazione in background (e, nel prossimo futuro, geofencing e sincronizzazione periodica). La funzionalità di notifica push di PWA, ad esempio, è assemblata utilizzando due API: l'API di notifica e l'API di push, entrambe basate sull'API di Service Worker.

Ciclo di vita di un addetto ai servizi

La durata di un servizio è composta da tre parti: registrazione, installazione e attivazione, di cui entreremo tutti nei dettagli di seguito:

Registrazione

Il primo passo che dobbiamo fare è registrare il lavoratore del servizio. Senza questo passaggio, il browser non saprà dove si trova il lavoratore del servizio, rendendo impossibile l'installazione del lavoratore del servizio in background.
Possiamo registrare il lavoratore del servizio utilizzando il seguente codice:

 if('serviceWorker' nel navigatore) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.quindi((reg) => {
   // la registrazione ha funzionato
       console.log('Registrazione riuscita. L'ambito è ' + reg.scope);
};

Il codice precedente inizierà prima a cercare l'API Service Worker nel browser e, se il browser supporta detta API, registra un nuovo Service Worker utilizzando il metodo serviceworkerContainer.register() e fornisce un scope del Service Worker. Ad esempio, nel codice sopra, il nostro scope è /pwa-examples/simicart/ che significa che il nostro service worker funzionerebbe solo per le pagine che iniziano con /pwa-examples/simicart/ . Chiamiamo queste pagine ' pagine controllate '.

Installazione

Ora che il browser sa dove si trova il nostro service worker e qual è lo scopo di esso, tenterà di installare il service worker. Puoi scegliere di non fare nulla durante questa fase, ma vorremmo comunque notare che questa è la fase in cui avviene la maggior parte del processo di memorizzazione nella cache. Ad esempio, questo è in genere il modo in cui viene eseguito il processo di memorizzazione nella cache delle risorse:

 const cacheName = 'site-cache-v1'
const assetToCache = [
    '/pwa-esempi/',
    '/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) => {
              restituisce cache.addAll(assetsToCache);
        })
      );
});

Come puoi vedere nell'esempio sopra, utilizziamo l'API Cache per memorizzare nella cache le nostre risorse che utilizzeremo in seguito per rendere la nostra PWA compatibile offline. Questo processo di memorizzazione nella cache avviene durante l'evento di installazione.

Attivazione

Dopo la fase di installazione, possiamo ora attivare il service worker. Tuttavia, questa fase di attivazione non avviene normalmente automaticamente e, affinché l'operatore del servizio possa attivarsi, è necessario assicurarsi che nessun operatore del servizio attualmente controlla le pagine.

In alternativa, puoi anche automatizzare il processo di attivazione del tuo addetto ai servizi utilizzando il metodo skipWaiting() .

 const cacheName = 'site-cache-v1'
const assetToCache = [
    '/pwa-esempi/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( event ) => {
    self.skipWaiting(); // salta l'attesa
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              restituisce cache.addAll(assetsToCache);
        })
      );
});

Il web ha bisogno di un lavoratore di servizio

A questo punto, siamo tutti d'accordo sul fatto che il service worker sia quasi un passo finale che il Web deve compiere. Gli utenti stanno diventando sempre più esigenti in fatto di funzionalità simili alle app e, insieme al fatto che PWA sta diventando il futuro della distribuzione di software, sembra che il Web abbia molto potenziale nei prossimi anni.

Per i commercianti Magento che desiderano trasformare la vetrina, forniamo una soluzione PWA senza testa completa e conveniente per la tua azienda.