Question

我使用以下命令将服务工作者添加到了我的应用程序中：

ng add @angular/pwa --project ng-zero

它在终端中对此做出了回应：

Installed packages for tooling via npm.
CREATE ngsw-config.json (441 bytes)
CREATE src/manifest.json (1071 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3825 bytes)
UPDATE package.json (1985 bytes)
UPDATE src/app/app.module.ts (2042 bytes)
UPDATE src/index.html (851 bytes)

没有错误，只有一些警告。

app.module.ts文件现在包含：

import { ServiceWorkerModule } from '@angular/service-worker';
...
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),

我还没有碰过ngsw-config.json配置文件：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

我的main.ts文件包含以下内容：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.then(
  () => {
  }
)
.catch(error => {
  console.log(error);
});

还有index.html文件：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgZero</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>

<body class="mat-app-background">
  <app-root>Loading...</app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>

文档根目录下的文件：

$ ll ng-zero/
total 1,2M
-rw-rw-r-- 1 stephane  42K oct.  18 13:20 3rdpartylicenses.txt
-rw-rw-r-- 1 stephane  14K oct.  18 13:20 4.c1db20ef5bd9add4749b.js
drwxrwxr-x 3 stephane 4,0K oct.  18 13:20 assets/
-rw-rw-r-- 1 stephane 5,4K oct.  18 13:20 favicon.ico
-rw-rw-r-- 1 stephane  993 oct.  18 13:20 index.html
-rw-rw-r-- 1 stephane 847K oct.  18 13:20 main.07ca5763aa8c2813b8c7.js
-rw-rw-r-- 1 stephane 1,1K oct.  18 13:20 manifest.json
-rw-rw-r-- 1 stephane 3,2K oct.  18 13:20 ngsw.json
-rw-rw-r-- 1 stephane 132K oct.  18 13:20 ngsw-worker.js
-rw-rw-r-- 1 stephane  58K oct.  18 13:20 polyfills.eba1d61bda8f41298ad5.js
-rw-rw-r-- 1 stephane 2,2K oct.  18 13:20 runtime.fa8fa8286609c1c01b2a.js
-rw-rw-r-- 1 stephane  519 oct.  18 13:20 safety-worker.js
-rw-rw-r-- 1 stephane  63K oct.  18 13:20 styles.f57681079a43921c301b.css
-rw-rw-r-- 1 stephane  519 oct.  18 13:20 worker-basic.min.js

然后我转到此网页https://angular.io/guide/service-worker-getting-started，可以成功地进行所有练习，因此看到服务人员在脱机时就可以完成工作。

我还将此源代码添加到了app.component.ts文件中，并且可以在移动浏览器中正常运行，因为它为我提供了加载新版本的功能：

ngOnInit() {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      if (confirm('A newer version of the application is available. Load the new version ?')) {
        window.location.reload();
      }
    });
  }
}

但是，当我打开Chrome浏览器控制台时，转到Application标签，选择Manifest条目，然后单击Add to homescreen链接，控制台将显示以下错误：{ {1}}

在Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest文件中，manifest.json的值为start_url

然后我将"start_url": "/"的值更改为start_url并重新部署，但是它抱怨找不到https://stephaneeybert.github.io/stephaneeybert/ng-zero/（404）。

这是我构建应用程序的方式：

https://stephaneeybert.github.io/stephaneeybert/ng-zero/manifest.json

应用程序部署在ng build --prod --base-href /stephaneeybert/ng-zero/

我在https://stephaneeybert.github.io/stephaneeybert/ng-zero/和"@angular/cli": "^7.0.0-rc.2"上

Answer 1

您还必须在angular.json文件中启用服务工作者。服务人员也只能在像您这样的SSL安全环境中工作。

"configurations": {
  "production": {
    "optimization": true,
    [...]
    "serviceWorker": true
  }
}

也许您还可以在angular.json文件中的deployUrl和baseHref中进行游戏，该文件也位于 production 部分中。对我来说，它正在将baseHref设置为/并将deployUrl部署到项目的“绝对” URL。

"production": {
  "deployUrl": "",
  "baseHref: "/"
}

Answer 2

我刚刚在此网址（https://stephaneeybert.github.io/stephaneeybert/ng-zero/）上测试了应用程序

似乎工作正常。

服务工作者已成功注册
缓存作品
并且该应用程序也可以在离线状态下运行。

在测试安装了Service Worker的Angular应用时，您需要注意以下几点：

1）始终在浏览器的隐身窗口中测试应用程序
2）在本地服务器或具有https支持的服务器上进行测试 3）为使该应用程序正常运行，您必须至少访问该网站两次或在该网站上刷新一次。

如果您还没有，我建议您阅读更多有关服务人员的操作以及服务人员如何工作的信息。

谢谢

未检测到匹配的服务人员

2 个答案: