2016-01-18 12 views
13

Ho consultato un sacco di risorse sul Operai:Come aggiornare la pagina dopo un aggiornamento di ServiceWorker?

Tuttavia, non posso per la vita di me capire come aggiornare la pagina dopo che è stato installato un nuovo ServiceWorker. Non importa quello che faccio, la mia pagina è bloccata su una vecchia versione, e solo un duro aggiornamento (Cmd-Shift-R) lo risolverà. Nessuna combinazione di 1) chiusura della scheda, 2) chiusura di Chrome o 3) location.reload(true) servirà il nuovo contenuto.

Ho un super simple example app basato principalmente su SVGOMG. Al momento dell'installazione, ho Caché un po 'di risorse utilizzando cache.addAll(), e faccio anche skipWaiting() se numero di versione principale della versione corrente non corrisponde al numero della versione attiva (sulla base di una ricerca di IndexedDB):

self.addEventListener('install', function install(event) { 
    event.waitUntil((async() => { 
    var activeVersionPromise = localForage.getItem('active-version'); 
    var cache = await caches.open('cache-' + version); 
    await cache.addAll(staticContent); 
    var activeVersion = await activeVersionPromise; 
    if (!activeVersion || 
     semver.parse(activeVersion).major === semver.parse(version).major) { 
     if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around 
     self.skipWaiting(); 
     } 
    } 
    })()); 
}); 

I Sto usando un sistema ispirato a Semver dove il numero di versione principale indica che il nuovo ServiceWorker non può essere sostituito a caldo per quello vecchio. Funziona sul lato ServiceWorker - un bump dalla v1.0.0 alla v1.0.1 fa sì che il worker sia immediatamente installato su un refresh, mentre dalla v1.0.0 alla v2.0.0, attende che la scheda venga chiusa e riaperta prima di essere installato.

Indietro nel thread principale, sto aggiornando manualmente il ServiceWorker dopo la registrazione – altrimenti la pagina non riceve nemmeno il memo che c'è una nuova versione di ServiceWorker disponibile (stranamente ho trovato poche menzioni di questo ovunque nel ServiceWorker letteratura):

navigator.serviceWorker.register('/sw-bundle.js', { 
    scope: './' 
}).then(registration => { 
    if (typeof registration.update == 'function') { 
    registration.update(); 
    } 
}); 

Tuttavia, il contenuto che viene servita al thread principale è sempre bloccato su una vecchia versione della pagina ("la mia versione è 1.0.0"), indipendentemente dal fatto che incrementare il versione a 1.0.1 o 2.0.0.

Sono un po 'stonato qui. Speravo di trovare un'elegante soluzione semiper-y per il versioning di ServiceWorker (da qui il mio uso di require('./package.json').version), ma nella mia attuale implementazione, l'utente è perennemente bloccato su una vecchia versione della pagina, a meno che non si aggiorni o si svuoti manualmente tutti i loro dati. :/

+0

Non riesco a trovare i passaggi che hai eseguito per garantire che il nuovo Service Worker sia stato installato. Reclami ma non ti sei assicurato che sia stato davvero installato. –

risposta

16

Trovato il problema – è necessario evitare qualsiasi intestazioni cache sul file JS di ServiceWorker stesso.Impostazione della cache per max-age=0 immediatamente risolto il problema: https://github.com/nolanlawson/serviceworker-update-demo/pull/1

Saluti a Jake Archibald per me l'impostazione dritto: https://twitter.com/jaffathecake/status/689214019308224513

+0

fa cambiare il max-age = 0 ha qualche effetto negativo? – jasan

+0

Grazie per questo, ho avuto lo stesso problema. Sto usando il pacchetto http-server npm e ho imparato dopo aver letto ciò che imposta max-age = 2600 per impostazione predefinita. Avviare il server usando '-c-1' disabilita così il tuo operatore di servizio si comporta in modo più prevedibile. per esempio. 'http-server -c-1 -p 8081' –

3

esterno: stop e annullare la registrazione di un operaio di servizio utilizzando chrome: // ServiceWorker-internals/

interno dal lavoratore servizio stesso: https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim e https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

+0

Non proprio ... io sto già facendo qui: https://github.com/nolanlawson/serviceworker-update-demo/blob/ba99e52b7a88b3a125352c9b91bae6a0683550f3/sw.js#L48-L52 – nlawson

1

In Chrome Canary si può fare ogni sorta di servizio dei lavoratori di profilazione e la gestione come annullare la registrazione, evidente nelle applicazioni Tab:

enter image description here

Coppia che, con chrome: // dispositivi/eseguire il debug con il dispositivo fisico.

Problemi correlati