Comment gérer le routage dans Angular 5+ Service Workers?

Question

Dans les versions précédentes de l'angle de travail du service de la mise en œuvre, l'une des options de configuration a été "routing". Ceci peut être vu dans cette réponse DONC, la question, qui a été référencé dans cette Angulaire de la CLI de problème, et le meilleur reste à la documentation semble être le post de blog par Stephen Fluin (sur l'Angulaire de l'équipe), ainsi que les I/O parler d'Alex Rickabaugh (de Google).

Angulaire 5, l' ServiceWorkerModule a été bien construit, et plus de la configuration peuvent maintenant être traités à l'aide de l' ngsw-config.json le fichier. Cependant, il n'y a plus aucune mention de la façon de gérer la redirection pour les routes, partout dans le angulaires.io guide, ou dans la documentation. Donc je me retrouve avec le problème suivant: lorsque j'ai visité l'une de mes applications et de passer en mode hors connexion, je peux toujours accéder à l'application lors de la visite directement: https://jackkoppa.github.io/cityaq-sw-issue. Cependant, lors du chargement de l'application redirige vers la search route, et la plupart des utilisateurs devraient être en train d'essayer de les charger à partir d'une URL du type https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai (pour plus de simplicité, je suis juste de parler de Chrome desktop et mobile, pour l'instant, et dans l'Incognito lorsque cela est possible).

Lorsque vous essayez de visiter cette URL en mode hors connexion, vous obtenez immédiatement de 504 Gateway Timeout. Cela se produit parce que le travailleur a seulement mis en cache dans l'index, et ne sait pas que d'autres voies doivent rediriger vers l'index de sorte qu'il peut charger. Je suis convaincu que les précédentes itérations de l'angle de travail du service de la mise en œuvre pourrait avoir manipulé ce scénario, par la mise en place redirige vers l'index pour les routes. Est-il un moyen de gérer cette redirection dans le courant, Angulaire 5+ ngsw-config.json, ou dans le générés ngsw.json le fichier? Sauf que, comment faut-il une solution de contournement être traités dans un autre agent du service de fichier JS?

Answer 1

TL;DR: j'ai identifié au moins deux questions qui causent des dommages dans mon cas; vous pouvez utiliser ce script de construction pour l'instant essayer de mon fixe, et de voir ce que l'application fonctionne hors ligne ici. D'autres tests et remonter les demandes nécessaires.

---

Alors que j'ai été incapable de trouver une réponse documentée, voici ce que j'ai pu trouver à ce jour, en parcourant l' ngsw-worker.js le fichier, ainsi que la lecture de l' @angular/service-worker commettre l'histoire.

Le nouveau ServiceWorkerModule approche de "routage" est de prendre toutes les "navigation" demande (c'est à dire un non-indice de route sur le même domaine) et de ré-exécuter l' handleFetch méthode, mais maintenant, pointant vers l' index.html demande (source). Cela devrait fonctionner, étant donné un SPA doit être en mesure de rediriger vers l'URL une fois qu'il a récupéré ses fichiers mis en cache pour l'index.

Ainsi, les problèmes qui sont à l'origine de mon site ci-dessus à l'échec lorsque le mode hors connexion ne doit pas être directement liées à l'acheminement, et j'ai trouvé 2 jusqu'à présent. La correction de ces avec une solution de contournement m'a permis d'obtenir mon app de travail la plupart du temps comme prévu. Avec les étapes de reproduction dans la question d'origine, cityaq travaille maintenant, alors que j'ai reproduit l'original, à défaut de site à cityaq-sw-problème.

Les questions:

1. Des versions hébergées de l'Angulaire de l'application, où l' --base-href indicateur est défini à partir de la CLI, la liste des Url absolues pour leur service de ressources ouvrier. Lorsque l'on compare les demandes de ces ressources, ngsw-worker.js attend les Url relatives

   • source
   • Je suis assez confiant, ce problème doit être résolu, et je vais travailler sur un pull request pour le fixer. Cela se produit parce que l' baseHref est arriver inclus dans l'Url de ressource lors de l' ngsw.json est généré (source)

2. De la 3 disponible "états" que l' ngsw-worker.js peut être, dans mon expérience, EXISTING_CLIENTS_ONLY semble pari mal réglé.

   • source 1, source 2
   • Je suis moins confiant au sujet de ce changement, car je n'ai pas été en mesure de toujours voir ce qui provoque cet état. Toutefois, si et quand le travailleur entre dans cet état, ngsw-worker.js ne seront plus tenter de récupérer les ressources mises en cache (source), et lors de mes tests en vertu de ce qui semble être "correct" des circonstances, l'application continue entre dans cet état, même lorsque le seul changement est la suppression d'une connexion internet

Alors que j'ai mis en place un PR pour le numéro 1, et attendez quelques aider à la compréhension de la question 2, je suis en utilisant une solution de contournement construire un script pour modifier ngsw-worker.js après elle est générée. Avertissement: il est laid, & certainement modifie les "safe" comportement de paramètre EXISTING_CLIENTS_ONLY. Cependant, pour mon application, il ne permet pas de corriger hors ligne performance à la fois lors de l'exécution localement (http-server), et le déploiement d'une URL (GitHub pages, dans mon cas).

Pour utiliser la solution de contournement: (Angulaire 5, testé w/ Angulaire 5.2.1)

1. npm install replace-in-file --save-dev
2. Inclure ce script dans votre application, par exemple, en build/fix-sw.js
3. Dans votre package.json:

"scripts": {
   ...
   "sw-build": "ng build --prod && node build/fix-sw",
   "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
   ...
}

4. Pour exécuter localement

npm exécuter sw-construire
cd dist
http-server-p 8080

5. Et pour préparer une version pour votre URL, avant de les envoyer à un serveur (par exemple, avec angulaires-cli-ghpages)

npm exécuter sw-build-live