Angular 7 - Service Worker PWA + SSR 在服务器上不起作用

Question

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

有关本地主机的信息-> 工作

这按预期工作。 服务工作者在每次更新时都会工作并更新我的应用程序。 而且; 一个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 重定向到网络服务器的端口

网络服务器日志上可见的问题：无法订阅通知错误：服务工作者被禁用或不受此浏览器支持

额外信息：

本地主机和生产上的节点 js 是相同的：v9.0.0 我使用以下过程在生产上构建：

1. 拉
2. npm 运行构建：ssr
3. pm2 启动 dist/server.js

更新 23/02/2019

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

根据我的理解，“node dist/server.js”不适用于我引用的 Service Worker (PWA)（ https://angular.io/guide/service-worker-getting-started ）

由于 ng serve 不适用于 Service Worker，因此您必须使用单独的 HTTP 服务器在本地测试您的项目。 您可以使用任何 HTTP 服务器。 下面的示例使用来自 npm 的 http-server 包。 为了减少冲突的可能性并避免提供陈旧的内容，请在专用端口上进行测试并禁用缓存。

我无法使用http-server dist/browser因为我会失去 SSR 功能。

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

更新 24/02/2019

正如@Gökhan Kurt 所提到的，Service Worker 无法与我的 SSR 服务器正常工作。 我需要用于 SEO 的 SSR，我需要一个用于浏览器推送通知的 Service Worker。 我有什么解决方案来处理浏览器用户推送通知？ 第三方库，例如 One Signals？

---

欢迎任何想法建议来帮助我完成这项工作。 感谢您的支持，亚历克斯

Answer 1

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

我没试过，但这可能对你有用。 您需要在index.html的body末尾放置一个单独的脚本才能在浏览器上运行：

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

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

你应该知道的另一件事是，Service Worker 实际上并不适合 SSR 应用程序。 生成的ngsw.json文件不会包含您拥有的所有页面。 您将不得不手动修改此文件，或者不将其作为静态文件提供，而是动态创建它。

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

这时候你应该考虑一下为什么要同时需要SSR和Web APP。 如果您需要 SSR 进行 SEO，则不需要 SW。 用户代理是爬虫的时候做SSR，客户端是普通用户的时候做动态angular。

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

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

首先，您必须使用服务器端和客户端渲染配置将应用程序构建到两个不同的目录（在我的示例中为DIST_FOLDER/ssr和DIST_FOLDER/csr ）。 您可以从 SSR 中排除 SW。 您可以像往常一样在 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）来调试您的应用程序以查看它是否正常工作。

Answer 2

通过对#13351的一些“有益的”解决方法，在main.browser.ts 中几乎没有变化就可以在Angular 10上运行

// Workaround for service worker, issue #13351.
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(() => {
      if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('./ngsw-worker.js');
      }
    })
    .catch((err) => console.error(err));
});

在ngsw-config.json我编辑了index来引用index2.html而不是index.html 。 在我的情况下，需要在Firebase / NestJS正确呈现根 ( / ) 路径的 SSR。

ngsw-config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",      
  "index": "/index2.html",
  ...
}

在Chrome DevTools -> Application -> Service Workers使用prod标志运行时可以看到它。 View Page Source显示 SSR。 我还可以通过 Chrome 在我的桌面上添加安装应用程序。 除此之外，该应用程序可以离线工作。 两者，通过移动浏览器和桌面应用程序。

不知道为什么没有弹出默认的移动通知，即Add to home screen 。

Answer 3

当您将 Angular PWA（服务工作者）转换为 Angular SSR 项目时。

• 请在您的 ngsw-config.json 文件中添加“navigationURLs:[]”

下面的屏幕截图将在查看源代码上绑定 SSR html。