如何使用 Angular 在本地运行 Service Worker

Question

我正在遵循 angular 的最佳实践来制作 PWA。在进行生产构建 ( ng build --prod --aot) 之后，我还从 dist, on 运行服务工作线程localhost： http-server -p 8080 -c-1 dist 当我尝试将工作线程与我的 Angular 同步时，使用：

navigator.serviceWorker.ready.then(function(swRegistration) {

            console.log('swReady');
});

什么也没发生，似乎 SW 没有与 Angular 通信。使用远程服务器（上传 dist）确实有效。所以似乎问题是 dist 无法使用ng serve. 我究竟做错了什么？

Answer 1

似乎目前我们不能将 service worker 与ng serve --prod. 但是，我们可以采取一种解决方法。

1. 我们构建项目 ng build --prod

2. 从dist我们获取ngsw-worker.js和ngsw.json文件的位置并将它们复制到src文件夹中。

3. 我们修改我们的angular.json文件以便为它们提供服务。我们找到了属性，"projects": {"[my-project-name]": {... "architect": {... "build": {... "options": {... "assets": [...然后在那里添加了这两个项目 – "src/ngsw-worker.js", "src/ngsw.json"。

4. 我们服务- ng serve --prod。

我已经达到了这一点。浏览器说软件已激活并正在运行。现在唯一的考虑是，如果我们更改 SW 中的某些内容，我们需要再次重建并执行相同的步骤。但我相信我们可以发展得更快。

祝你好运！

Answer 2

注意：这是基于 Ionic 下的 Angular。对于普通 Angular，某些路径是不同的（例如 www -> dist），应该使用“ng”命令而不是“ionic”，因此请进行相应调整。

步骤 0. 添加 @angular/pwa，它将创建在生产中使用的服务工作人员（请参阅任何其他说明）。

步骤 1. 在调试构建中启用 Service Worker。通常，SW 仅针对生产启用，例如在 file 中src/app/app.module.ts，两种实现之一，将 'enabled' 更改为 true （或者可以将属性 'useServiceWorker' 添加到 'environment.ts' 和 'environment.production.ts' 文件并设置它们两者都为“true”，稍后调试完成后，只需将environment.ts文件中的设置更改为“false”）：

  imports: [ ...
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: true }),
  ],

或者

  imports: [ ...
    ServiceWorkerModule.register('ngsw-worker.js'),
  ],
  providers: [ ...
-    { provide: SwRegistrationOptions, useFactory: () => ({ enabled: environment.production }) },
+    { provide: SwRegistrationOptions, useFactory: () => ({ enabled: true }) },

步骤2.向文件中的“脚本”添加一些钩子package.json。它们的目的是确保“ngsw.json”文件中的所有文件哈希值都是正确的，并且 SW 可以正确加载文件：

{
    "scripts": { ...
+        "ionic:serve:before": "...(anything already there)... && echo {} > src/ngsw.json && cp www/ngsw.json src/ngsw.json",
+        "ionic:build:after":"...(anything already there)... && npm run ngsw:rebuild",
+        "postbuild": "...(anything already there)... && npm run ngsw:rebuild",
+        "ngsw:rebuild": "ngsw-config www ngsw-config.json && cp www/ngsw.json src/ngsw.json",

为了ionic serve选择该文件，它src/ngsw.json在预构建步骤中添加一个空白文件，并尝试从 www 文件夹复制计算出的哈希值。如果“ionicserve”失败，请确保首先运行“ionicbuild”。我知道这一步是不确定的，但是没有更好的钩子，例如在“ngserve”中 - 有对此的开放功能请求。

由于创建/生成了“src/ngsw.json”，因此它不应位于源代码控制/git 之下，因此将“/src/ngsw.json”行添加到“.gitignore”文件中。

步骤 3. 将 Service Worker 源和配置添加到调试版本中。将行添加到文件中angular.json，将“ngsw-worker.js”和“ngsw.json”复制到 www/（生产构建会自动执行此操作，这将在调试构建期间复制它）：

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
+              {
+                "glob": "ngsw-worker.js",
+                "input": "node_modules/@angular/service-worker",
+                "output": "."
+              },
+              "src/ngsw.json",
...

步骤 4. 构建调试版本（确保 ngsw.json 中的当前哈希值），然后使用 HTTPS 提供服务。“ionicserve”有 --ssl 和 --external 选项（--external 允许在手机等设备上打开应用程序）：

ionic build

ionic ssl generate ;# creates SSL certs in .ionic/ssl/: cert.pem and key.pem
ionic serve --external --ssl

另一种选择是使用任何适当的 HTTP 服务器，它可以为单页应用程序 (SPA) 执行 SSL 和代理。当代理和 ssl 选项混合时，包“http-server”不能很好地工作，因此请使用“local-web-server”代替：

npm install -g local-web-server
ws -p 8100 --cert .ionic/ssl/cert.pem --key ,ionic/ssl/key.pem --https --spa index.html --directory www

步骤 5. 将证书添加到浏览器 CA 列表中。对于 Chrome，请使用以下步骤（对于其他浏览器，请使用 google 搜索）：

https://www.nullalo.com/en/chrome-how-to-install-self-signed-ssl-certificates/

完毕！打开 Chrome 并导航到 https://localhost:8100，查看已加载 Service Worker 的控制台。如果控制台中出现任何错误，请回溯之前的步骤 - 框架变化很快，某些内容可能已经不同。

Answer 3

使用 Chrome，您可以启用一个标志来将特定主机视为安全源，从而允许服务工作人员工作：

./chrome --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site:8080

要从终端启动 chrome，您需要知道可执行文件位置。这将取决于系统。对于 MacO：

open /Applications/Google\ Chrome.app/ --args  --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site:8080

Answer 4

您无法通过 Service Worker 为您的 Angular 项目提供服务ng serve，因为 Service Workers 的文档声明它需要https。在服务器上运行没有 https/ 的唯一方法是在本地使用ng build并运行http 服务器来测试您的项目。

由于 ngserve 不能与 Service Worker 一起使用，因此您必须使用单独的 HTTP 服务器在本地测试您的项目。