Fai funzionare la tua app offline con i lavoratori del servizio

I lavoratori del servizio possono essere utilizzati per migliorare i tempi di caricamento e il supporto offline per i tuoi siti e app Web. In questo tutorial ti mostreremo come migliorare progressivamente un'app Web con un lavoratore di servizio. Per prima cosa copriremo cos'è un lavoratore di servizio e come funziona il ciclo di vita, allora ti mostreremo come utilizzare quindi per accelerare il tuo sito (questa pagina) e offrire contenuti offline (pagina 2).

Allora ti mostreremo come Come costruire un'app con i lavoratori del servizio. Imparerai come impostare un lavoratore Bare-Bones che cacherà e servirà le risorse statiche (offrendo un enorme aumento delle prestazioni sui carichi successivi), quindi come cache le risposte Dynamic API e dare il nostro supporto offline completo dell'app DEMO. Innanzitutto, guardiamo a cosa sono esattamente i lavoratori del servizio, e come funzionano.

Costruire un sito web? Razionalizzare il tuo processo con un grande Builder del sito web e mantenerlo con un decente web hosting servizio. E ottieni il tuo deposito ordinato con questi deposito cloud. opzioni.

Cos'è un lavoratore di servizio?

Allora, cos'è un lavoratore di servizio? È uno script, scritto in JavaScript, che il tuo browser funziona in background. Non influisce sul thread principale (dove JavaScript di solito viene eseguito su una pagina Web) e non è in conflitto con il tuo codice APP o influisce sulle prestazioni di runtime.

Un lavoratore di servizio non ha accesso diretto al DOM o agli eventi e all'interazione dell'utente che si verifica nella pagina web stessa. Pensa a esso come uno strato che si trova tra la pagina Web e la rete, consentendogli di intercettare e manipolare le richieste di rete (ad esempio Richieste Ajax) effettuate dalla tua pagina. Questo lo rende ideale per gestire la cache e il supporto dell'utilizzo offline.

Il ciclo di vita del lavoratore di servizio

La vita di un operatore di servizio segue un flusso semplice, ma può essere un po 'confuso quando sei abituato agli script JS solo lavorando immediatamente:

Installazione e GT; In attesa (installato) & GT; Attivazione e GT; Attivato e GT; Ridondante

Quando la tua pagina viene caricata per la prima volta, il codice di registrazione che abbiamo aggiunto a index.html. Avvia l'installazione del lavoratore del servizio. Quando non esiste un lavoratore esistente, il nuovo servizio di servizio verrà attivato immediatamente dopo l'installazione. Una pagina Web può avere solo un operatore di servizio attivo alla volta.

Se un lavoratore è già installato, il nuovo funzionario dei servizi verrà installato e quindi sedersi con il passaggio di attesa finché la pagina non è completamente chiusa e quindi ricaricata. Semplicemente rinfrescante non è abbastanza perché potresti avere altre schede aperte. È necessario assicurarsi che tutte le istanze della pagina siano chiuse altrimenti il ​​nuovo lavoratore non si attiva. Non devi chiudere le schede, puoi semplicemente navigare in un altro sito e tornare.

Entrambi installare e attivare Gli eventi avverranno solo una volta per lavoratore. Una volta attivato, il lavoratore di servizio avrà quindi il controllo della pagina e può avviare eventi gestire eventi come il recupero per manipolare le richieste.

Infine, un lavoratore di servizio diventerà ridondante se il browser rileva che il file di lavoro stesso è stato aggiornato o se l'installazione o l'attivazione falliscono. Il browser cercherà una differenza di byte per determinare se uno script lavoratore è stato aggiornato.

È importante notare che non dovresti mai cambiare (o rev) il nome del tuo servizio di lavoro. Né dovresti cache il file del lavoratore stesso sul server, poiché non sarai in grado di aggiornarlo facilmente, anche se i browser sono ora abbastanza intelligenti da ignorare le intestazioni nella cache.

01. Clona l'app demo

Ok, iniziazziamo a imparare come costruire un'app Web con l'aiuto dei lavoratori dei servizi. Per questo tutorial, avrai bisogno di versioni recenti di Node.js e NPM installati sul tuo computer.

Abbiamo abbattuto un'app Demo che useremo come base per questo tutorial ( clona l'app demo qui ). L'app è un piccolo progetto divertente che recupera le previsioni del tempo di cinque giorni in base alla posizione dell'utente. Controllerà solo se la pioggia viene prevista prima della fine della giornata e aggiorna l'UI di conseguenza.

È stato costruito inefficientemente (intenzionalmente) utilizzando grandi biblioteche non necessarie come JQuery e Bootstrap, con grandi immagini non acquisite per dimostrare la differenza nelle prestazioni quando si utilizza un lavoratore di servizio. Attualmente pesa in un ridicolo 4,1 MB.

02. Ottieni la tua chiave API

Al fine di prendere i dati meteorologici dall'API dovrai prenderti una chiave API gratuita da Openweathermap. :

Una volta che hai la chiave, apri index.html. e cerca il finestra.api_key. variabile in. & lt; head & gt; . Incolla la tua chiave nel valore:

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

03. Avvia il server di sviluppo

Ora siamo pronti per iniziare a lavorare sul progetto. Prima di tutto installiamo le dipendenze eseguendo:

    npm install

Ci sono due compiti per lo strumento di costruzione. Correre Inizio NPM Per avviare il server di sviluppo sulla porta 3000. Esegui NPM Run Build. per preparare la versione "produzione". Tieni presente che questa è solo una demo, quindi non è davvero una versione di produzione - non c'è minificazione o altro: i file vengono semplicemente "revocati".

Un algoritmo viene utilizzato per creare un hash, come 9C616053E5, dai contenuti del file. L'algoritmo produrrà sempre lo stesso hash per gli stessi contenuti, il che significa che finché non si modifica il file, l'hash non cambierà. L'hash viene quindi aggiunto al nome del file, quindi ad esempio Styles.CSS potrebbe diventare stili-9C616053E5.css. L'hash rappresenta la revisione del file - quindi 'revò'.

Puoi tranquillamente la cache ogni revisione del file sul tuo server senza mai dover invalidare la cache, che è costosa, o preoccupata di qualche altra cache di terze parti che serve la versione errata.

04. Presentare il tuo servizio di lavoro

Ora iniziamo con il nostro servizio di lavoro. Crea un file chiamato sw.js nella radice del src. directory. Quindi aggiungi questi due ascoltatori di eventi per registrare il installare e attivare Eventi:

 self.addeventListener ('Install', (Event) = & GT; {
      console.log (evento);
    }););

    self.addeventListener ('Attiva', (Evento) = & GT; {
      console.log (evento);
    }); 

Il se stesso La variabile qui rappresenta l'ambito di sola lettura del lavoratore di servizio. È un po 'come il finestra oggetto in una pagina web.

Successivamente dobbiamo aggiornare il nostro file index.html e aggiungere i comandi per installare il servizio del servizio. Aggiungi questo script appena prima della chiusura & lt; / corpo e GT; etichetta. Registerà il nostro lavoratore e registra il suo stato attuale.

 & lt; script & gt;
     IF ('Serviceworker' in Navigator) {
       navigator.serviceworker.register ('/ sw.js')
         .then (funzione (Reg) {
           Se (reg.installing) {
             console.log ('sw instando');
           } else se (reg.Waiting) {
             console.log ('sw waiting');
           } else se (reg.attivo) {
             console.log ('sw attivato');
           }
         }). Catch (funzione (errore) {
           // registrazione fallita
           console.log ('registrazione non riuscita con' + errore);
         }););
     }
   & lt; / script & gt; 

Avvia il tuo server di sviluppo eseguendo Inizio NPM e apri la pagina in un browser moderno. Consigliamo di utilizzare Google Chrome in quanto ha un buon supporto per il servizio del servizio nei suoi DevTools, che ci riferiremo in questo tutorial. Dovresti vedere tre cose registrate nella tua console; Due dal lavoratore di servizio per il installare e attivare Eventi e l'altro sarà il messaggio dalla registrazione.

05. Attivare il lavoratore

Diremo al nostro lavoratore di saltare il passo d'attesa e attivare ora. Apri il file sw.js e aggiungi questa linea ovunque all'interno del installare Ascoltatore di eventi:

 self.skipwaiting (); 

Ora, quando aggiorniamo lo script del lavoratore, prenderà il controllo della pagina immediatamente dopo l'installazione. Vale la pena tenere presente che questo può significare che il nuovo lavoratore prenderà il controllo di una pagina che potrebbe essere stata caricata da una versione precedente del tuo lavoratore - se ciò causerà problemi, non utilizzare questa opzione nella tua app.

Puoi confermare questo navigando lontano dalla pagina e poi ritornando. Dovresti vedere il installare e attivare Eventi Fuoco di nuovo quando è stato installato il nuovo lavoratore.

Chrome DevTools ha un'opzione utile che significa che puoi aggiornare il tuo lavoratore solo ricaricando. Apri DevTools e vai alla scheda Applicazione, quindi scegli il servizio del servizio dalla colonna di sinistra. Nella parte superiore del pannello è una casella di spunta etichettata Aggiornamento su Ricarica, spuntalo. Il tuo lavoratore aggiornato verrà ora installato e attivato su Aggiorna.

06. Conferma modifiche

Confermiamo questo aggiungendo console.log ('foo') Chiama in uno dei listener di eventi e rinfrescando la pagina. Questo ci ha catturato fuori perché ci aspettavamo di vedere il log nella console quando ci siamo rinfreschi, ma tutto ciò che stavamo vedendo era il messaggio "SW attivato". Si scopre Chrome Aggiorna la pagina due volte quando l'opzione di aggiornamento sull'opzione di ricarica è spuntata.

È possibile confermare questo spuntando la casella di spunta Preserve Logs nel pannello Impostazioni della console e rinfrescando di nuovo. Dovresti vedere l'installazione e attivare gli eventi registrati, insieme a 'foo', seguito da 'navigato a http: // localhost: 3000 /' per indicare che la pagina è stata ricaricata e quindi il messaggio finale "SW attivato".

07. Traccia l'evento di recupero

È ora di aggiungere un altro ascoltatore. Questa volta rintrameremo il recupero Evento che viene sparato ogni volta che la pagina carica una risorsa, come un file CSS, l'immagine o anche una risposta API. Apriremo una cache, restituiremo la risposta richiesta alla pagina e poi - in background - cache la risposta. Prima di tutto aggiunci l'ascoltatore e aggiorniamo in modo da poter vedere cosa succede. Nella console dovresti vedere molti Fetchevent. log.

 Self.addeventListener ('Fetch', (evento) = & GT; {
 console.log (evento);
}); 

La nostra modalità Serve utilizza BrowserSync, che aggiunge il proprio script alla pagina e rende le richieste di WebSocket. Vedrai anche i fetchevents per questi, ma vogliamo ignorarli. Inoltre, vogliamo solo cache ottenere richieste dal nostro dominio. Quindi aggiungiamo alcune cose per ignorare le richieste indesiderate, anche ignorando esplicitamente il / Sentiero indice:

 Self.addeventListener ('Fetch', (evento) = & GT; {
 // Ignora le richieste di crossdomain
 se (! event.request.url.startswith (self.location.origin)) {
   ritorno;
 }
 // Ignora richieste non ricevute
 se (event.request.method! == 'Get') {
   ritorno;
 }
 // Ignora il browser-sincronizzazione
 if (event.request.url.indexof ('Browser-Sync') & GT; -1) {
   ritorno;
 }
 // evitare il percorso dell'indice nella cache
 se (event.request.url === (self.location.origin + '/')) {
   ritorno;
 }
 // prevenire l'indice.html in cache
 se (event.request.url.endswith ('index.html')) {
   ritorno;
 }
 console.log (evento);
}); 

Ora i registri dovrebbero essere molto più puliti ed è sicuro iniziare la memorizzazione nella cache.

08. Cache le risorse

Ora possiamo iniziare a memorizzare nella cache queste risposte. Per prima cosa dobbiamo dare un nome alla nostra cache. Chiamiamo i nostri V1-Assets. . Aggiungi questa linea alla parte superiore del file SW.JS:

 Cost AssetScachename = 'V1-Assets'; 

Quindi abbiamo bisogno di dirottare i fetchevents in modo da poter controllare ciò che viene restituito alla pagina. Possiamo farlo usando l'evento Rispondere metodo. Questo metodo accetta una promessa in modo che possiamo aggiungere questo codice, sostituendo il console.log. :

 // Dì al recupero di rispondere con questa catena di promessa
 event.Respondwith (
   // Apri la cache
   caches.open (assetscachename)
     .v ((cache) = & gt; {
       // Fai la richiesta alla rete
       return recetch (event.request)
         .then ((risposta) = & gt; {
           // cache la risposta
           cache.put (event.request, risposta.clone ());
           // restituisce la risposta originale alla pagina
           risposta di ritorno;
         }););
     })
 ); 

Ciò inoltrerà la richiesta sulla rete, quindi memorizza la risposta nella cache, prima di inviare la risposta originale alla pagina.

Vale la pena notare che questo approccio non catterà effettivamente le risposte fino alla seconda volta che l'utente carica la pagina. La prima volta installerà e attiverà il lavoratore, ma nel momento in cui il recupero L'ascoltatore è pronto, tutto sarà già stato richiesto.

Aggiorna un paio di volte e controlla la cache nei DevTools & GT; Scheda Applicazione. Espandi l'albero di archiviazione della cache nella colonna di sinistra e dovresti vedere la tua cache con tutte le risposte memorizzate.

09. Servire dalla cache

Tutto è memorizzato nella cache ma non stiamo effettivamente usando la cache per servire ancora alcun file. Ampliamo ora. Per prima cosa cercheremo una partita per la richiesta nella cache e se esiste, lo serviremo. Se non esiste, utilizzeremo la rete e poi la cache la risposta.

// Dì al recupero di rispondere con questa catena
 event.Respondwith (
   // Apri la cache
   caches.open (assetscachename)
     .v ((cache) = & gt; {
       // cerca la richiesta di corrispondenza nella cache
       ritorno cache.match (event.request)
         .then ((abbinato) = & gt; {
           // Se una corrispondenza viene trovata in ritorno alla versione memorizzata nella cache
           Se (abbinato) {
             ritorno abbinato;
           }
           // altrimenti continua fino alla rete
           return recetch (event.request)
             .then ((risposta) = & gt; {
               // cache la risposta
               cache.put (event.request, risposta.clone ());
               // restituisce la risposta originale alla pagina
               risposta di ritorno;
             }););
         }););
     })
); 

Salva il file e aggiorna. Controllare DevTools & GT; Scheda di rete e dovresti vedere (dal serviceworker) elencato nella colonna Dimensione per ciascuna delle attività statiche.

Phew, abbiamo finito. Per una piccola quantità di codice, c'è molto da capire. Dovresti vedere che rinfrescando la pagina Una volta che tutte le risorse sono memorizzate nella cache è piuttosto scattante, ma facciamo un controllo rapido (non incredibile) dei tempi di carico su una connessione a strozzo (DevTools & GT, scheda di rete).

Senza il lavoratore di servizio, il caricamento su una rete FAST 3G simulata richiede quasi 30 secondi per tutto il caricamento. Con il lavoratore di servizio, con la stessa connessione a strofinata, ma caricando dalla cache, ci vuole poco meno di un secondo.

Controllare la casella offline e aggiorna e vedrai anche che la pagina carica senza una connessione, anche se non possiamo ottenere i dati previsionali dall'API. A pagina 2 torneremo a questo e apprenderemo anche come cache anche la risposta API.

Pagina successiva: Utilizzare il lavoratore del servizio per offrire accesso online

• 1.
• 2.

Pagina corrente: Pagina 1: caricamento più veloce