web-dev-qa-db-fra.com

Angular 7 - Service Worker PWA + SSR ne fonctionne pas sur le serveur

J'ai du mal à faire coopérer mon serveur côté rendu et Service Worker côté serveur.

Informations concernant localhost -> Working

Cela fonctionne comme prévu. Le technicien travaille et met à jour mon application à chaque mise à jour. De plus; une curl localhost:8082 renvoyez-moi mes informations.

Je démarre mon application avec la commande suivante: npm run ssr

 "ssr": "npm run build:ssr && npm run serve:ssr",
 "build:ssr": "npm run build:client-and-server-bundles",
 "serve:ssr": "node dist/server.js",
 "build:client-and-server-bundles": "ng build --prod && npm run webpack:server",
 "webpack:server": "webpack --config webpack.server.config.js --progress --colors"

Informations concernant la production: -> Ne fonctionne pas

Le site Web est sur HTTPS: https://airdropers.io Le processus du site Web s'exécute sur un port fermé et a HAPROXY redirigeant le trafic de 443 vers le port du serveur Web

Problème visible dans les journaux du serveur Web: impossible de s'abonner aux notifications Erreur: les agents de service sont désactivés ou ne sont pas pris en charge par ce navigateur

Informations supplémentaires:

Les nœuds js sur localhost et production sont les mêmes: v9.0.0 Je mets à profit la production avec le processus suivant:

  1. git pull
  2. exécution de npm: ssr
  3. pm2 start dist/server.js

MISE À JOUR 23/02/2019

J'ai maintenant une compréhension plus profonde. Mon problème est que je démarre mon serveur SSR/PWA avec une commande de nœud telle que "node dist/server.js".

D'après ma compréhension, "node dist/server.js" ne fonctionne pas pour Service Worker (PWA), je cite ( https://angular.io/guide/service-worker-getting-started )

Étant donné que ng serve ne fonctionne pas avec les techniciens de maintenance, vous devez utiliser un serveur HTTP distinct pour tester votre projet localement. Vous pouvez utiliser n'importe quel serveur HTTP. L'exemple ci-dessous utilise le package http-server de npm. Pour réduire les risques de conflits et éviter de diffuser du contenu périmé, testez sur un port dédié et désactivez la mise en cache.

Je ne peux pas lancer c'est avec http-server dist/browser car je perdrai la capacité SSR.

Comment puis-je démarrer mon serveur PWA/SSR? Quelle commande dois-je utiliser?
Quelle version dois-je faire?

MISE À JOUR 24/02/2019

Comme mentionné par @ Gökhan Kurt, le technicien ne fonctionne pas correctement avec mon serveur SSR. J'ai besoin de SSR pour le référencement et j'ai besoin d'un employé de service pour la notification push du navigateur. Quelle solution dois-je gérer la notification push utilisateur du navigateur? Une bibliothèque tierce telle que One Signals?

Toutes les suggestions d'idées sont bienvenues pour m'aider à faire ce travail. Merci pour votre soutien, Alex

angularprogressive-web-appsserver-side-renderingangular-service-worker
11
aorfevre

Il n'est en fait pas du tout lié à votre serveur. Le problème est que le technicien de service a tenté d'être enregistré côté serveur, ce qui n'est pas pris en charge. Ce que vous pouvez faire, c'est de faire en sorte que le technicien s'enregistre côté client.

Je n'ai pas essayé, mais cela pourrait bien fonctionner pour vous. Vous devez mettre un script séparé à la fin de body dans index.html Pour exécuter sur le navigateur:

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  </script>

Sachez que cela ne vous donnera que les fonctionnalités de mise en cache de base de Service Worker et ne fonctionnera probablement pas pour SwPush ou SwUpdate. Vous pouvez vérifier le fonctionnement interne du module de service worker ici .

Une autre chose que vous devez savoir est que les employés de service ne sont pas adaptés aux applications SSR. Le fichier ngsw.json Généré n'inclura pas toutes les pages dont vous disposez. Vous devrez soit modifier ce fichier manuellement, soit ne pas le servir de fichier statique mais le créer dynamiquement.

Et la mise en cache de toutes les pages n'est pas quelque chose que vous voulez faire (sauf si le contenu des pages est statique). Parce qu'une page en cache affichera toujours la même chose puisque vous ne faites pas de demande XHR côté client. Par exemple, si votre page d'accueil est mise en cache pour un client, ce client verra toujours la même page quel que soit le contenu dynamique souhaité.

À ce stade, vous devez vous demander pourquoi vous voulez SSR et Web APP en même temps. Si vous avez besoin de SSR pour le référencement, vous n'avez pas besoin d'un SW. Effectuez simplement SSR lorsque l'agent utilisateur est un robot et servez dynamique angular lorsque le client est un utilisateur normal.

Comment changer de requête en fonction de l'agent utilisateur

C'est ma pensée et je ne sais pas si quelqu'un fait ça. Mais théoriquement, cela devrait fonctionner.

Tout d'abord, vous devrez créer votre application dans deux répertoires différents (DIST_FOLDER/ssr Et DIST_FOLDER/csr Dans mon exemple) avec des configurations de rendu côté serveur et côté client. Vous pouvez exclure SW de SSR. Vous pouvez utiliser SW dans CSR comme d'habitude.

J'ai trouvé ce package qui peut détecter les agents utilisateurs des robots/robots. Pour express et angulaire, vous l'utiliseriez comme:

app.get('*', (req, res) => {
  var CrawlerDetector = new Crawler(req)

  // check the current visitor's useragent
  if (CrawlerDetector.isCrawler())
  {
    // render the index html at server side
    res.render(path.join(DIST_FOLDER, 'ssr', 'index.html'), { req });
  }
  else {
    // serve static index.html file built without SSR and let the client render it
    res.sendFile(path.join(DIST_FOLDER, 'csr', 'index.html'));
  }
});

Après avoir implémenté cela, vous pouvez déboguer votre application pour voir si elle fonctionne correctement en remplaçant votre agent utilisateur par un agent écrit ici (c'est-à-dire utiliser Postman).

8
Gökhan Kurt