Question

我正在尝试在部署新应用后清除服务缓存。我正在使用http服务器将其部署在localhost上。我已经有一个角度应用程序正在运行，并且我的服务人员已注册。当我更改一些代码并重新部署应用程序时，我在缓存中看到的是旧的缓存仍然存在。在缓存清单中，我看到了ngsw.json文件的数组。有“最新”标签，其中存储了最新的哈希值。该应用程序是从最新清单清单中渲染出来的，但有时它也会从较早的清单中呈现出来。我无法重现这种情况，但是这种情况很少发生。 10-15分钟后，清单将被清除，并且缓存存储中仅存在一个清单哈希。这是随机发生的，没有任何一致性。

如果我在服务工作者选项卡下选中“重新加载时更新”，则较早的缓存清单将立即被清除。我希望角度服务工作者立即删除较早的缓存。

这是我的ngsw-config的样子：

{
  "configVersion": 1,
  "index": "/index.html",
  "appData": ["/index.html", "/*.bundle.css", "/*.bundle.js", "/*.chunk.js"],
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ]
}

这是我在app.module.ts中注册的方式：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule,
    APP_ROUTING,
    ServiceWorkerModule.register('/ngsw-worker.js', {
      enabled: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

这是我的app.component.ts的样子：

import { Component } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private updates: SwUpdate) {
    this.updates.available.subscribe((event: any) => {
      this.updates.activateUpdate().then(() => {
        document.location.reload(true);
      });
    });
  }

多个清单在高速缓存存储中的外观如下：

113eb2d75d6b2b62654822b31924678b90ee76e9: {configVersion: 1, index: "/index.html",…}..
23er43ertgvcx6751cvb8u8u9o0mnb6765098h76: {configVersion: 1, index: "/index.html",…}..
987ujvsskjfd56snsnf34flo3298fcdgnzx768z7: {configVersion: 1, index: "/index.html",…}..
343eb2d56d6b2b638493hh331664690f55ssz8j8: {configVersion: 1, index: "/index.html",…}..

清单上方的最新密钥是：

{ latest: "113eb2d75d6b2b62654822b31924678b90ee76e9" }

在某个时间点，高速缓存存储中仅应存在最新的哈希。如何清除较旧的清单缓存并保留最新的清单？

Angular Service Worker清单缓存

0 个答案: