Erreur de l'application Web progressive "ne fonctionne pas hors ligne"

Question

J'ai écrit une application Web progressive, en suivant tous les guides et exemples disponibles, mais pour une raison quelconque, lorsque je clique sur Add to homescreen bouton, je reçois toujours cette mystérieuse erreur:

Site cannot be installed: does not work offline

La principale différence entre mon PWA et les exemples, c'est que le mien s'exécute uniquement dans un chemin non root du domaine, j'ai donc dû ajouter des chemins supplémentaires aux configurations à divers endroits afin que l'application soit limitée au non root dossier.

Le site Google Lighthouse n'aide pas beaucoup non plus, donnant un message très similaire.

Quelqu'un peut-il suggérer la cause de cette erreur?

Answer 1

Cela m'a donc pris quelques heures, mais j'ai finalement compris qu'il y avait un paramètre scope requis que vous devez spécifier dans le client JavaScript lors de la connexion au serviceworker, s'il ne s'exécute pas à la racine (/) chemin.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

Vous pouvez voir le produit de travail ici:

• App: https://stampy.me/pwgen/
• Fichier manifeste: https://stampy.me/pwgen/manifest.json
• Fichier ServiceWorker: https://stampy.me/pwgen/sw.js
• Script d'application: https://stampy.me/pwgen/script.js (faites défiler vers le bas pour le code PWA)

J'espère que ma douleur pourra faire gagner du temps à quelqu'un d'autre.

Answer 2

Vous devez également définir l'écouteur fetch dans un fichier de service worker:

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});