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

问题描述 投票:7回答:1

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

有关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. 去拉
  2. npm run build:ssr
  3. pm2 start dist / server.js

更新23/02/2019

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

从我的理解“节点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

angular progressive-web-apps ssr angular-service-worker
1个回答
4
投票

它实际上与您的服务器无关。问题是,服务工作者试图在服务器端注册,这是不受支持的。您可以做的是让服务工作者在客户端注册。

我没试过,但这可能对你有用。您需要在bodyindex.html末尾添加一个单独的脚本才能在浏览器上运行:

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

请注意,这只会为您提供服务工作者的基本缓存功能,并且可能不适用于SwPushSwUpdate。您可以检查服务工作者模块如何在内部工作here

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

并且缓存所有页面不是您想要做的事情(除非页面内容是静态的)。因为您没有在客户端执行XHR请求,因此缓存页面将始终显示相同的内容。例如,如果为客户端缓存主页,则无论预期的动态内容如何,​​该客户端都将始终看到相同的页面。

此时,您应该考虑为什么要同时使用SSR和Web APP。如果你需要SSR的SEO,你不需要SW。只需在用户代理是爬虫时执行SSR,并在客户端是普通用户时提供动态角度。

如何根据用户代理切换请求

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

首先,您必须使用服务器端和客户端呈现配置将应用程序构建到两个不同的目录(在我的示例中为DIST_FOLDER/ssrDIST_FOLDER/csr)。您可以从SSR中排除SW。您可以像往常一样在CSR中使用SW。

我发现this package可以检测爬虫/僵尸用户代理。对于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'));
  }
});

实现此功能后,您可以通过将用户代理更改为写入here(即使用Postman)的用户代理来调试应用程序以查看其是否正常工作。

© www.soinside.com 2019 - 2024. All rights reserved.