Angulaire 2+ utilisant sw-precache avec les pages du projet github

Question

J'ai une application angulaire simple et j'essaye de la rendre hors-ligne avec l'aide d'un technicien de service. J'ai suivi ce tutoriel sur la façon de mettre en place les travailleurs de service:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

Le SW et l'application elle-même fonctionne très bien quand je le lance sur ma propre machine de développement, mais je voudrais déployer ce sur un Github page du projet: https://zyxon.github.io/AngTodo/

Après avoir téléchargé le contenu du dossier dist (le même que je fais sur mon serveur de développement) le travailleur de service ne parvient pas à s'inscrire en raison de l'obtention 404 de sur le contenu du dossier assets. Il cherche des fichiers dans /assets/.... Je pense que cela fonctionne sur mon serveur de dev car l'application est hébergée dans le serveur web ROOT, mais dans le cas de la page Github, elle est hébergée dans le répertoire .../AngTodo.

Donc ma question est la suivante: comment spécifier pour que sw-precache produise ce SW avec un préfixe ajouté (/AngTodo/assets/... dans mon cas)?

Mon sw-precache-config.js est la suivante:

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    }; 

Answer 1

J'ai trouvé la solution à mon problème. Citant la documentation sw-precache:

replacePrefix [chaîne]

remplace une chaîne spécifiée au début à l'exécution d'URL de chemin. Utilisez cette option lorsque vous distribuez des fichiers statiques à partir d'un répertoire différent lors de l'exécution que lors de la génération. Par exemple, si vos fichiers locaux se trouvent sous dist/app/mais que la racine de votre ressource statique est/public /, vous déposez 'dist/app /' et vous le remplacez par '/ public /'.

Par défaut: ''

je devais mettre à jour mon sw-precache-config.js:

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist/', 
    replacePrefix: 'AngTodo/', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    }; 

Answer 2

Les utilisateurs peuvent également fournir une portée

navigator.serviceWorker.register('/service-worker.js').then(function(reg) { 
    scope:'/my-app/' 
}); 

Le SW contrôlera une page dont l'URL commence avec une portée et ignorera que non. Ainsi, pour l'exemple ci-dessus le travailleur de service

/my-app/-> Contrôle il

/my-app/bonjour/monde -> Contrôle il

/-> Non le contrôler

/autre-app/-> contrôle pas

/my-app -> contrôle pas

Cela devient vraiment pratique pour les pages GitHub où plusieurs projets ont pour sa moi origine. Les portées vous permettent d'avoir un agent de service différent pour chaque projet. La portée par défaut est déterminée par l'emplacement du script SW.