v10服务工作人员官方更新方法不起作用

Question

编辑摘要:我创建了一个最小的可复制示例

我不再相信这与css或任何@font-face声明有关。问题在于swUpdate.checkForUpdate()的官方角度方式，可能与appRef.isStable订阅有关。

我认为现在发生的事情是，angular提供的swUpdate服务正在混乱地认为存在实际的更新，尽管缓存内容的散列值保持不变。

通过将angular.json文件中的所有css文件更改为如下所示，我了解了这一点：

{
   "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "bundleName": "material-theme",
   "inject": false
}

然后，我做了一个简单的服务，将捆绑的样式表添加到我的标题中。我可以在任何时间点添加它们，甚至在加载应用程序几分钟后选择添加它们(下面的swUpdate事件触发了多次不同的时间)。

    const appIsStable$ = this.appRef.isStable.pipe(takeWhile(isStable => isStable === true));
    const everyMinute$ = interval(60*1000);
    const swUpdateCheck$ = concat(appIsStable$, everyMinute$);

    swUpdateCheck$.subscribe(() => {
      console.log('update check');
      this.swUpdate.checkForUpdate().then(() => {
        console.log('new version available');
        if(this.window.confirm('New version available. Click OK to download')){
          this.swUpdate.activateUpdate().then(() => {
            this.window.location.reload();
          });
        }
      }, (rej) => {
        debugger;
      });
    });

它仍然给了我更新应用程序的提示。

我读到了两件事-

1. Devtools实际上可能分散了服务工作者运行缓存破坏的自然周期。
2. “角度”建议您通过checkForUpdates()订阅他们的可观察事件，并多次使用app.isStable事件。

我已经创建了一个最小的可复制示例，并且确实确认了主要的更新问题在于在角的官方文档中检查更新方法。

然后，只需从npm install文件夹运行类似于http-server实例。

http-server -p 4200 -c-1 ./sw-css-test

你就会明白我的意思！

原文：

问题在于，在不对任何文件进行物理更改的情况下，服务工作者认为需要进行更新。

情况:使用角10配置的西南可用。多个导入库，如角材料等。

理论:角质化材料试着去获取谷歌字体'Roboto‘(如果它在本地文件树中找不到它)，在我的捆绑style.css文件中的下面的片段中已经指出了这一点。因为它使用url()函数作为回退，所以它将在缓存中查找它，并按照服务工作者的304响应所指示的那样找到它。但是，因为style.css文件更改了(大概是因为它找到了字体？)它得到了200的回应。然后，这会提示服务工作人员的缓存中断，并且它认为有一个更新要退出并获取。

一旦你得到更新，漂洗，清洗，重复，你有一个无限的更新循环。当你的应用程序有一个实际的更新需要下载时，这对试图提示用户是不好的。为什么会发生这种情况？

下面的片段来自捆绑的css。

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"),local("Roboto-Regular"),url(roboto-v20-latin-ext_latin-regular.5cb5c8f08bb4e6cb64c3.woff2) format("woff2"),url(roboto-v20-latin-ext_latin-regular.ae804dc012b1b5255474.woff) format("woff")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"),local("Roboto-Medium"),url(roboto-v20-latin-ext_latin-500.0b45721325446d537b54.woff2) format("woff2"),url(roboto-v20-latin-ext_latin-500.e492ac63197a57e7f4d3.woff) format("woff")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"),local("Roboto-Bold"),url(roboto-v20-latin-ext_latin-700.1d1ef7788f0ff084b881.woff2) format("woff2"),url(roboto-v20-latin-ext_latin-700.8aba6dc5d991e4367d7a.woff) format("woff")
}

来自“网络”选项卡的片段

​

​

我在这里想得对吗？

建议的解决方案:想出一种方法告诉材料库引用一个静态版本的Roboto。

还有其他更好的解决办法吗？

请参考我的ngsw-config.json：

{
  "$schema": "../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

注意:我尝试从服务工作者中删除所有css文件和ttf、woff和woff2资产。然而，它还是带着更新回来了。

任何帮助都是非常感谢的。谢谢。

Answer 1

您是否试过查看v10专用文档并检查以确保它像上面所描述的那样正常工作？

看起来，不管发生什么事情，这个承诺总是会解决的--即使有更新或者没有更新。尝试将可观察到的available与checkForUpdate()结合使用

另外，尝试将清单文件从ngsw-config.json中提取出来，看看这是否也没有帮助。我以前见过那个文件中的散列不匹配。

ngsw/state在config.url之后的输出是什么？