在 Angular (8) 应用程序中,我想添加一个自定义离线页面(只是一个简单的 html 文件开始)。我已将我的应用程序设置为 PWA(使用@angular/pwa
和配置所有内容,以便它至少在在线时能够顺利运行)。
但是,我很难为 PWA 用户提供更新。因此,经过数小时的尝试和错误,我决定index.html
从ngsw-config.json
. 这当然具有index.html
每次加载的效果(还不错,因为它太小了)。如果有任何更新index.html
链接指向不同的 JS 文件,这些文件会立即加载。所以,正如我之前所说,PWA 就像我喜欢的那样工作。
现在我想offline.html
在用户启动 PWA 脱机时显示。因此,我添加offline.html
并ngsw-config.json
创建了一个自定义 Service Worker,包括官方ngsw-worker.js
:
importScripts('./ngsw-worker.js');
我也在使用这个自定义服务工作者而不是官方的:
ServiceWorkerModule.register('./custom-worker.js', { enabled: true, registrationStrategy: registrationStrategy })
到目前为止,一切仍然按预期工作。行为和以前一样。现在我想在我的自定义工作者中包含离线行为:
importScripts('./ngsw-worker.js');
self.addEventListener('fetch', function(event) {
return event.respondWith(
caches.match(event.request)
.then(function(response) {
let requestToCache = event.request.clone();
return fetch(requestToCache).then().catch(error => {
// Check if the user is offline first and is trying to navigate to a web page
if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
// Return the offline page
return caches.match("offline.html");
}
});
})
);
});
该脚本来自:https ://stackoverflow.com/a/56738140/4653997
不幸的是,这部分根本不起作用。现在我几乎被困住了。我不知道下一步该怎么做。我认为无论是否index.html
可以加载服务人员都会被执行。
任何帮助,将不胜感激。