Costruisci app che funzionano offline

Sep 15, 2025

Come si fa

Per lungo tempo, funzionalità offline, la sincronizzazione dello sfondo e le notifiche push hanno differenziate app native dalle loro controparti web. Il API del servizio di servizio è una tecnologia che cambia di gioco che risulta il campo di gioco. In questo tutorial, lo useremo per costruire una pagina che può servire contenuti anche mentre non esiste una connessione Internet.

Scarica il codice da Filesolo

01. Un server HTTPS

Il modo più semplice per pensare ai lavoratori del servizio è come un pezzo di codice installato da un sito su un computer client, viene eseguito in background e successivamente consente alle richieste inviate a quel sito da intercettare e manipolate. Poiché questa è una capacità così potente, lavorare con i lavoratori del servizio in un ambiente dal vivo che devi correre su https. Ciò garantisce che non possano essere sfruttati, assicurandosi che il lavoratore di servizio che il browser riceve da una pagina sia genuina.

Per scopi di sviluppo, tuttavia, possiamo eseguire senza https da allora http: // localhost / è consentito come un'eccezione a questa regola. Il modo più semplice per iniziare è con la NPM http-server. pacchetto.

 NPM Installa http-server -g
http-server -p 8000 -c-1

02. Impostare una pagina di base

Non c'è nulla sul server in questo momento, quindi facciamo una pagina di base da servire. Creeremo un nuovo file index.html e quando eseguemo il server, ora sarà accessibile http: // localhost: 8000 .

In questa fase, troverai che se termina il server HTTP e aggiorni la pagina nel browser, riceverai una pagina di errore poiché il sito non può essere raggiunto. Questo è interamente previsto poiché non abbiamo ancora memorizzato la cache del contenuto offline.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "utf-8" / & gt;
  & lt; Titolo & GT; Service Worker & Lt; / Titolo & GT;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; lt; link rel = "stilsheet" type = "text / css" href = "custom.csss" & gt;
  & lt; / head & gt;
  & lt; corpo e GT;
  & lt; header & gt;
  & lt; h1 & gt; benvenuto e lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "contenuto" e GT;
  & lt; P & GT; contenuto qui & lt; / P & GT;
  & lt; img src = "kitty.jpg" width = "100%" & gt;
  & lt; / div & gt;
  & lt; / corpo e GT;
& lt; / html & gt;

03. Registrare un lavoratore di servizio

Ora abbiamo una pagina abbastanza insignificante in esecuzione, ed è ora di iniziare a pensare di implementare un lavoratore di servizio. Prima di ottenere la codifica, vale la pena prendere un momento per capire il ciclo di vita dei lavoratori del servizio.

Il processo inizia con la "registrazione" di un lavoratore di servizio nel tuo JavaScript, che dice al browser di iniziare a installare il lavoratore - il primo passo del suo ciclo di vita. Durante tutto il suo ciclo di vita, un lavoratore di servizio sarà in uno dei seguenti stati:

Installazione: Una volta registrato un lavoratore di servizio, la sua installazione è in genere utilizzata per scaricare e cache il contenuto statico
Installato: Il lavoratore è teoricamente pronto per l'uso ma non si attiva immediatamente
Attivazione: Un lavoratore di servizio installato si attiverà se non vi è alcun operatore di servizio esistente, o determinate condizioni conducono quella esistente a scadere; L'attivazione è in genere utilizzata per cancellare i vecchi file dal contenuto offline nella cache
Attivato: Il lavoratore di servizio ora ha il controllo sul documento e può gestire le richieste
Ridondante: Se l'operatore di servizio non è riuscito a installare o attivare o se è sostituito da un nuovo lavoratore di servizio

04. Controlla che sei registrato

Registrare un lavoratore di servizio. Questo punta in modo efficace il browser al file JavaScript che definisce il comportamento del lavoratore del servizio. La registrazione viene eseguita utilizzando l'oggetto ServiceWorker che è il punto di ingresso dell'API. Controlleremo anche che l'API sia effettivamente presente nel browser prima di provare a farlo.

Il Registrati() La funzione può essere chiamata in sicurezza ogni volta che il caricamento della pagina e il browser determinerà se il servizio di servizio è già stato registrato.

 IF ('ServiceWorker' in Navigator) {
  finestra.AddeventListener ('Load', Function () {
  navigator.serviceworker.register ('serviceworker.js', {scope: '. /'}).then(function(registration) {
  console.log ("Il lavoratore di servizio registrato con successo.");
  }, funzione (errore) {
  console.log ("Errore registrazione del servizio del servizio:" + Errore);
  }););
  }););
}

05. Implementare il lavoratore dei servizi

Quindi dobbiamo implementare il lavoratore di servizio stesso. I lavoratori del servizio possono ascoltare una gamma di eventi relativi al proprio ciclo di vita e attività sulla pagina. I più importanti sono installati, attivano e recuperano.

Iniziamo creando un ascoltatore per il installare Evento, che innesca una volta completato l'installazione del lavoratore. Ciò ci consente di istruire il lavoratore di servizio di aggiungere alcuni contenuti offline nella cartella corrente a una cache. Dobbiamo anche nominare la nostra cache - dal momento che vecchi cache possono persistere, aggiornare / versioni di controllo Questo nome della cache consente di servire le versioni più recenti del contenuto in seguito.

 Var CurrentCache = 'demo-cache';
self.addeventlistener ('install', event = & gt; {
  event.waittunill (
  caches.open (CurrentCache) .then (funzione (cache) {
  console.log ("Aggiunta di contenuti alla cache".);
  ritorno cache.addall ([[
  './index_offline.html',
  './kitty_offline.jpg',
  './CSS personalizzato'
  ]);
  })
  );
});

06. Fetch Event.

La nostra pagina ora cacherà il contenuto se caricato, ma abbiamo bisogno di un meccanismo per intercettare le richieste e reindirizzarle a questa cache. Per fare questo, dobbiamo ascoltare recupero eventi, che vengono attivati quando una richiesta come ottenere il nostro index.html. il file è fatto attraverso la rete. Abbiniamo quindi la richiesta contro la cache e serviamo la risorsa nella cache se trovata. Altrimenti, torniamo a una richiesta di recupero API al server.

Vale la pena a questo punto che nota che abbiamo una pesante dipendenza dalle promesse JavaScript di lavorare. Questi possono essere un po 'complicati, quindi vale la pena familiarizzare se non li hai usati prima.

 Self.addeventListener ('Fetch', Event = & GT; {
  event.Respondwith (
  caches.match (event.request) .then (risposta = & gt; {
  Risposta di ritorno ||. recupero (event.request);
  })
   );
    });

07. Estendi l'evento di recupero

Se lo testi ora (termini il server HTTP e aggiorna la pagina), è necessario scoprire che la tua pagina funziona online e offline. È probabile che, tuttavia, che vorrai un comportamento offline più intelligente, con diversi contenuti o funzionalità disponibili quando il server non è disponibile.

Per raggiungere questo obiettivo, possiamo estendere il nostro recupero Risposta degli eventi Ulteriore per verificare specificamente per le richieste di navigazione e rispondere con una pagina offline diversa quando si è rilevata. Questo index_offline.html. Il file può essere una variazione della tua pagina online o qualcosa di completamente diverso e può anche utilizzare altre risorse che hai memorizzato nella cache CSS personalizzato .

 Self.addeventListener ('Fetch', Event = & GT; {
  se (event.request.mode === 'navigate') {
  event.Respondwith (
  recupera (event.request) .Catch (Errore = & GT; {
  console.log ("pagina non disponibile. Restituire il contenuto offline.");
  ritorno caches.match ('./ index_offline.html');
  })
  );
  } altro {
  event.Respondwith (
  caches.match (event.request) .then (risposta = & gt; {
  Risposta di ritorno ||. recupero (event.request);
  })
  );
  }
});

08. Elimina cache

C'è un'altra cosa di cui abbiamo bisogno. Se ora provi a modificare il tuo contenuto offline, lo troverai non aggiorna quando testi la tua pagina - hai ancora la vecchia versione! Questo perché i file più vecchi sono ancora memorizzati nella cache.

È necessario implementare qualcosa per pulire i file obsoleti dalla cache per evitare che vengano serviti. Questo è fatto rispondendo a un attivare Evento ed eliminazione di tutti i cache che non corrispondono al nome specificato in CurrentCache. È quindi possibile aggiungere un numero di versione a CurrentCache ogni volta che modifichi il contenuto offline, per assicurarsi che sia aggiornato.

 Questo.AddeventListener ('Attiva', Event = & GT; {
  VAR Activecaches = [currenceCache];
  console.log ("operatore di servizio attivato. Il controllo della cache è aggiornato.");
  event.waittunill (
  caches.Keys (). Quindi (keylist = & gt; {
  return Promise.ALL (Keylist.map (KeyList = & GT; {
  IF (ActiveCaches.indexof (Key) === -1) {
  console.log ("Eliminazione della vecchia cache" + tasto);
  ritorno caches.Delete (chiave);
  }
  }));
  })
  );
});

Questo articolo è stato pubblicato nel numero della rivista Web Designer # 268. Iscriviti ora.

Per saperne di più:

Guida di un coder per le API
Inizia con WebGL usando tre.js
12 enormi tendenze del web design per il 2018

Costruisci app che funzionano offline

01. Un server HTTPS

02. Impostare una pagina di base

03. Registrare un lavoratore di servizio

04. Controlla che sei registrato

05. Implementare il lavoratore dei servizi

06. Fetch Event.

07. Estendi l'evento di recupero

08. Elimina cache

Come si fa - Articoli più popolari

4 passaggi per utilizzare font variabili

Come girare il giorno nella notte in Photoshop

Trasforma le foto in animazioni 3D con Photoshop

Come creare controlli su ordinazione personalizzati in Maya

Aggiungi segnali visivi al tuo sito

Crea un'atmosfera pittorica nella tua arte digitale

L'incredibile potenza di flexbox

Crea trame pronto per il gioco usando il pittore di sostanze

Categorie