Angular 7 - 服务工作者PWA + SSR无法在服务器上运行

Question

我正努力让我的服务器端渲染和服务工作者在服务器端合作.

有关localhost的信息 - >工作

这是按预期工作的.服务工作人员在每次更新时都会工作并更新我的应用.此外; 一个curl localhost:8082送我回我的信息.

我用以下命令启动我的应用程序: 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"

有关生产的信息: - >不工作

网站是通过HTTPS:https: //airdropers.io网站进程在关闭端口上运行,并且HAPROXY将流量从443重定向到网络服务器的端口

Webserver日志上显示问题:无法订阅通知错误:此浏览器禁用或不支持服务工作者

额外信息:

localhost和production上的节点js是相同的:v9.0.0我使用以下过程构建生产:

1. git pull
2. npm run build:ssr
3. pm2 start dist/server.js

更新23/02/2019

我现在有了更深刻的理解.我的问题是我使用节点命令启动我的SSR/PWA服务器,例如"node dist/server.js".

从我的理解"node dist/server.js"不适用于服务工作者(PWA)我引用(https://angular.io/guide/service-worker-getting-started)

由于ng服务不适用于服务工作者,因此必须使用单独的HTTP服务器在本地测试项目.您可以使用任何HTTP服务器.以下示例使用来自npm的http-server软件包.要减少冲突的可能性并避免提供过时的内容,请在专用端口上进行测试并禁用缓存.

我无法启动是http-server dist/browser因为我将失去SSR能力.

如何启动PWA/SSR服务器？我应该使用什么命令？
我应该做什么？

更新24/02/2019

正如@GökhanKurt提到的那样,服务工作者无法正常使用我的SSR服务器.我需要SSR用于搜索引擎优化,我需要一个服务工作者来进行浏览器推送通知.我有什么解决方案来处理浏览器用户推送通知？One Signals等第三方lib？

---

我们欢迎任何想法建议,以帮助我完成这项工作.感谢您的支持,Alex

Answer 1

实际上，它与您的服务器完全无关。问题是，尝试在服务器端注册Service Worker，这不受支持。您可以做的是使服务人员在客户端注册。

我没有尝试过，但这可能对您有用。你需要把一个单独的脚本在结束body在index.html对浏览器中运行：

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

请注意，这只会为您提供Service Worker的基本缓存功能，可能不适用于SwPush或SwUpdate。您可以在此处检查Service Worker模块内部的工作方式。

您应该知道的另一件事是，服务工作者实际上不适合SSR应用程序。生成的ngsw.json文件将不包括您拥有的所有页面。您将不得不手动修改此文件，或者将其作为静态文件使用，而不是将其动态创建。

缓存所有页面不是您要做的事情（除非页面内容是静态的）。因为由于您不在客户端执行XHR请求，所以缓存的页面将始终显示相同的内容。例如，如果为客户端缓存了主页，则该客户端将始终看到相同的页面，而不管预期的动态内容如何。

此时，您应该考虑为什么同时需要SSR和Web APP。如果您需要SSR进行SEO，则不需要软件。当用户代理属于爬虫时，只需执行SSR，而当客户端是普通用户时，则进行动态角度服务。

如何基于用户代理切换请求

这是我的想法，我不知道是否有人这样做。但从理论上讲，它应该起作用。

首先，你必须建立自己的应用程序，以两个不同的目录（DIST_FOLDER/ssr和DIST_FOLDER/csr在我的例子），服务器端和客户端渲染配置。您可以从SSR中排除软件。您可以照常在CSR中使用SW。

我发现此程序包可以检测爬网程序/机器人用户代理。对于express和Angular，您可以像这样使用它：

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'));
  }
});

实施此操作后，可以通过将用户代理更改为此处编写的代理（即使用Postman）来调试应用程序，以查看其是否正常运行。