过去几天，我一直在努力在Angular 11应用程序中加载新的PWA版本。开始拔我的头发了！
这不会发生在我身上：
"每次用户打开或刷新应用程序时，Angular服务工作者都会通过查找ngsw.json清单的更新来检查应用程序的更新。如果找到更新，则会自动下载并缓存，并在下次加载应用程序时提供"``Angular-生产中的服务人员
我使用的是Angular服务SwUpdate.checkForUpdate()，它工作得很好，可以在新版本可用时检测并提示用户重新加载。该应用程序已重新加载并处于新版本，这是完美的。
但是，如果我关闭手机上的应用程序，然后重新打开它总是返回到安装PWA时的第一个版本：(
我试过SwUpdate.activateUpdate()window.location.reload()，更改版本号，自定义服务人员。。。等等。
唯一有效的方法是清除我在Chrome中的浏览数据，然后重新安装PWA：(
我无能为力，这将导致PWA缓存更新为新版本。它正在获取新版本，但缓存没有更新。
有人能在这里给我指正确的方向吗？我错过了什么？
安卓10，Chrome 89.0.4389.105
主要问题是index.html上的最长30天过期。在我看来，Android上的Chrome在访问pwa缓存之前，首先从标准的浏览器缓存加载。
这并没有发生在Chrome桌面上，只是我测试的Android。
我通过以下方式解决了这个问题：
- 在index.html(服务器端(上设置短的最长期限
根据您的情况，可能不需要额外的步骤：
- 从
ngsw.config.json中删除index.html以强制从网络加载 - 自定义服务人员提供"您已脱机"消息(见下文(
自定义服务人员，在app.module.ts中
ServiceWorkerModule.register('./offline-service-worker.js', { enabled: environment.production }),
offline-service-worker.js文件：
const CACHE_NAME = 'offline';
const OFFLINE_URL = '/assets/offline-page.html';
self.addEventListener('install', (event) => {
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
})());
});
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})());
self.clients.claim();
});
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
// First, try to use the navigation preload response if it's supported.
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
const networkResponse = await fetch(event.request);
return networkResponse;
} catch (error) {
// catch is only triggered if an exception is thrown, which is likely
// due to a network error.
// If fetch() returns a valid HTTP response with a response code in
// the 4xx or 5xx range, the catch() will NOT be called.
console.log('Fetch failed; returning offline page instead.', error);
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(OFFLINE_URL);
return cachedResponse;
}
})());
}
});
importScripts('./ngsw-worker.js');
整个PWA是一件棘手的事情。但是当它工作的时候很棒！