web-dev-qa-db-fra.com

Comment mettre à jour le cache du service worker dans PWA?

J'utilise le service worker avec la bibliothèque sw-toolbox . Mon PWA cache tout sauf les requêtes API (images, css, js, html). Mais que faire si certains fichiers seront modifiés un jour. Ou que se passe-t-il si service-worker.js sera modifié. Comment l'application doit-elle connaître les modifications apportées aux fichiers?

Mon service-worker.js:

'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

Je ne sais pas quelle est la méthode habituelle pour mettre à jour le cache dans PWA. Peut-être que PWA devrait envoyer AJAX en arrière-plan et vérifier la version de l'interface utilisateur?

javascriptservice-workerionic3sw-toolbox
14
Ildar

Il y a une bonne solution écrite ici où il déclare (en bref) de ne pas utiliser la stratégie cache-first ou de mettre à jour un modèle UX d'affichage d'un "Recharger pour les dernières mises à jour".

4
oninross

AFAIK la sw_toolbox n'a pas de stratégie de cache avec mise à jour réseau. C'est vraiment ce que tu veux je pense. Vous souhaitez modifier la stratégie de course du cache-réseau -> https://jakearchibald.com/2014/offline-cookbook/#cache-network-race Au lieu de simplement laisser le perdant disparaître, une fois le le réseau répond que vous voudrez mettre à jour le client C'est un peu plus avancé que j'ai le temps ou le temps d'expliquer ici. Je posterais un message au client pour lui faire savoir qu'il y a une mise à jour. Vous pouvez alerter l'utilisateur de la mise à jour ou simplement forcer la mise à jour. Je ne considère pas que ce soit un cas Edge, mais un scénario très courant mais avancé. J'espère publier bientôt une solution plus détaillée.

4
Chris Love

J'ai traité avec des travailleurs des services sans utiliser de bibliothèque et la solution que j'ai trouvée impliquait un peu de code côté serveur et du côté client. La stratégie en bref

Tout d'abord les variables dont vous aurez besoin et où:

  1. Côté serveur, il y a une variable "Service Worker Version" (mettez-la dans une base de données ou un fichier de configuration si vous utilisez quelque chose comme php qui se mettra à jour immédiatement côté serveur sans nécessiter de redéploiement. Appelons-le serverSWVersion
  2. Sur l'un des fichiers javascript que vous mettez en cache (j'ai un fichier javascript dédié à cela), vous avez une variable globale qui sera également la "version du service worker". Appelons cela clientSWVersion

Maintenant, comment utiliser les deux:

  1. Chaque fois qu'une personne atterrit sur la page, faites un appel ajax à votre serveur pour obtenir la valeur serverSWVersion . Comparez cela avec la valeur clientSWVersion .

  2. Si les valeurs sont différentes, cela signifie que la version de votre application Web n'est pas la plus récente.

  3. Si tel est le cas, désenregistrez le technicien de service et actualisez la page afin que le technicien de service soit réinscrit et que les nouveaux fichiers soient mis en cache.

Que faire réellement quand un nouveau fichier est disponible

  1. Mettez à jour les variables serviceSWVersion et clientSWVersion et téléchargez-les sur le serveur le cas échéant.

  2. Lorsqu'une personne visite à nouveau, le technicien doit être réenregistré et tous les fichiers mis en cache seront récupérés.

J'ai fourni un code basé sur le serveur php que j'ai utilisé lors de la mise en œuvre de cette stratégie. Il devrait vous montrer les principes. Déposez simplement le dossier "Exercise" dans un htdocs d'un serveur php et cela devrait fonctionner sans que vous ayez à faire autre chose. J'espère que vous le trouverez utile ... Et rappelez-vous que vous pouvez simplement utiliser une base de données au lieu d'un fichier de configuration pour stocker la variable de travailleur de service côté serveur si vous utilisez un autre serveur au lieu de php:

Fichier zip avec code: ServiceWorkerExercise.Zip

3
Zuks

Lorsqu'un technicien de service est modifié, le navigateur l'installe, mais la nouvelle version n'est pas activée tant que l'onglet du navigateur ou la fenêtre de l'application PWA n'est pas fermé et rouvert. Ainsi, si vous modifiez le nom du cache, le nouveau cache ne servira aucun fichier jusqu'à la réouverture du navigateur, et l'ancien cache ne sera pas supprimé avant cette date. Vous pouvez détecter les modifications apportées par le technicien de service dans votre page javascript à l'aide de registration.onupdatefound et demander à l'utilisateur de fermer et de rouvrir la fenêtre - quelque chose comme ceci:

// register the service worker
        navigator.serviceWorker.register('sw.js').then(function(registration) 
        {
                registration.onupdatefound = function()
                {
                        console.log("ServiceWorker update found.");
                        alert("A new version is available - please close this browser tab or app window and re-open to update ... ");
                }
        }, function(err)
        {
                console.log('ServiceWorker registration failed: ', err);
        });
0
Craig

changer self.toolbox.router.any ('/ ', self.toolbox.cacheFirst); en self.toolbox.router.any ('/', self.toolbox.fastest);

0
user2243952