代码之家 › 专栏 › 技术社区 › Stephane

未检测到匹配的服务工作人员

angular-cli angular

Stephane · 技术社区 · 6 年前

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 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": "/"

然后我换了值到 https://stephaneeybert.github.io/stephaneeybert/ng-zero/ 但它抱怨 https://stephaneeybert.github.io/stephaneeybert/ng-zero/manifest.json 找不到(404)。

ng build --prod --base-href /stephaneeybert/ng-zero/

应用程序部署在 https://stephaneyeybert.github.io/stephaneyelbert/ng-zero/

"@angular/cli": "^7.0.0-rc.2" 和 "@angular/core": "^7.0.0-rc.0"

2 回复 | 直到 6 年前

Barnee Emily 5 年前

我刚在这个网址上测试了这个应用程序( https://stephaneeybert.github.io/stephaneeybert/ng-zero/

服务工作人员已成功注册
应用程序在离线时也能正常工作。

始终在浏览器的匿名窗口中测试应用程序
在本地主机服务器或支持https的服务器上进行测试

如果你还没有,我建议你多读一些关于服务工人的操作和服务工人如何在角度上工作的书。