Question

我正在遵循angular的最佳实践来制作PWA。完成生产构建（ng build --prod --aot之后，我也在localhost上从dist运行服务工作者： http-server -p 8080 -c-1 dist 当我尝试将工人与Angular同步时，请使用：

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

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

什么也没有发生，并且看来SW并未与Angular通信。使用远程服务器（上传dist）确实可以。看来问题出在ng serve上。我究竟做错了什么？

Answer 1

似乎当前我们不能将Service Worker与ng serve --prod一起使用。但是，我们可以采取一种解决方法。

我们构建项目ng build --prod
从dist位置获取ngsw-worker.js和ngsw.json文件，并将它们复制到src文件夹中。
我们修改了angular.json文件以为其提供服务。我们找到属性"projects": {"[my-project-name]": {... "architect": {... "build": {... "options": {... "assets": [...，然后在其中添加这两项-"src/ngsw-worker.js", "src/ngsw.json"。
我们服务– ng serve --prod。

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

祝你好运！

Answer 2

您无法通过ng serve向服务工作者提供Angular项目，因为服务工作者的文档规定它需要https。在服务器上不使用https /的情况下运行它的唯一方法是使用ng build并运行http-server locally来测试您的项目。

由于serv服务不适用于服务工作者，因此您必须使用单独的HTTP服务器在本地测试您的项目。

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

如果要使用其他不支持TimKVU回答的浏览器，则解决方案是使用ngrok（https://ngrok.com）

它会建立到您正在使用的任何服务器的安全隧道。您可以通过以下方式运行它：

ngrok http 4200

只需连接到屏幕上显示的域。

Answer 5

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

第 0 步。添加 @angular/pwa，它将创建用于生产的 Service Worker（请参阅任何其他说明）。

第 1 步：在调试版本中启用 Service Worker。通常 SW 仅用于生产，例如在文件 src/app/app.module.ts 中，两个实现之一，将“启用”更改为 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”文件中的所有文件哈希都是正确的，并且软件可以正确加载文件：

{
    "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 文件夹复制计算出的哈希值。如果“ionic serve”失败，请确保先运行“ionic build”。我知道这一步是不确定的，但没有更好的钩子，例如在“ng serve”中 - 对此有开放的功能请求。

由于'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 提供服务。 'ionic serve' 具有 --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' 不能很好地工作，所以使用例如改为“本地网络服务器”：

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 使用以下步骤（或在其他浏览器中使用谷歌搜索）：

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

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

Answer 6

首先，确保在您的 angular.json 文件中存在以下内容："ServiceWorker": true

      "configurations": {
        "production": {
          "serviceWorker": true,
          "fileReplacements":
            ...

第二，安装http-server并运行

http-server -p 8080 -c-1 dist/app

第三，您的服务人员可能无法处理 IP 地址。因此，您应该改用以下内容：

http://localhost:8080/

来源：Getting an Angular PWA service worker installed on localhost

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

6 个答案: