个人中心
gpt4 book ai didi

angular - 未检测到匹配的服务 worker

转载 作者：行者123 更新时间：2023-12-05 06:29:59 25 4
gpt4 key购买 nike

我使用以下命令向我的应用程序添加了一个服务 worker :

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 并且可以成功完成所有练习，从而看到 service worker 正在做它的工作离线时。

我还在 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 链接，控制台显示以下错误:无法安装站点:未检测到匹配的服务 worker 。您可能需要重新加载页面，或检查当前页面的服务 worker 是否也控制 list 中的起始 URL

在manifest.json文件中，start_url值为/

"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://stephaneeybert.github.io/stephaneeybert/ng-zero/

我在 "@angular/cli": "^7.0.0-rc.2" 和 "@angular/core": "^7.0.0-rc.2"上。 0"

最佳答案

我刚刚在这个 URL ( https://stephaneeybert.github.io/stephaneeybert/ng-zero/) 测试了应用

看起来效果不错。

  1. Service Worker 注册成功
  2. 缓存工作
  3. 并且该应用程序在离线时也能正常工作。

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

  1. 始终在浏览器的隐身窗口中测试应用程序
  2. 在本地主机服务器或支持 https 的服务器上测试
  3. 要使该应用发挥全部功能，您必须至少访问网站两次或在网站上刷新一次。

如果你还没有，我建议你阅读更多关于 service worker 的操作以及 service worker 如何在 angular 中工作。

谢谢

关于angular - 未检测到匹配的服务 worker ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52872761/

25 4 0
文章推荐： reactjs - 使用 MockedProvider 测试时使用 Apollo 突变更新存储
文章推荐： amp-html - 创建AMP iframe如何根据内容调整高度
文章推荐： java - Spring Boot 2 @WebMvcTest 和 OAuth2 #oauth2.hasScope Controller 导致 IllegalArgumentException
文章推荐： spring-boot - 在 Spring Webflux 中如何从 `OutputStream` 到 `Flux`？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com