持久服务工作者和缓存 HTML 和 PNG 文件

维克斯EC

我想知道如何使 Service Workers 持久化,以及如何缓存 HTML 和 PNG 文件。我希望在线后能够离线浏览我的网页。一旦我转到另一个页面,我缓存的 JavaScript 文件就会被删除。

我到处找,但找不到直接的答案。此外,每次我尝试缓存 HTML 和 PNG 文件时,我都会这样做,但它会抛出一个错误,就像 JavaScript 文件一样,它在您更改页面后就会消失。

这是原始代码:github.com/VirxEC/CalcPlus/tree/master/docs

这是网站:virxec.github.io/CalcPlus

您可以在此处切换 Service Workers(点击“离线模式”):https : //virxec.github.io/CalcPlus/PageOptions.html

我的代码在 PageOptions 中以启用服务工作者(从第 91 行开始):

navigator.serviceWorker.register("/PreviewLibrary.html");
navigator.serviceWorker.register("/LibrarySource.html");
navigator.serviceWorker.register("/AboutLibrary.html");
navigator.serviceWorker.register("/PageOptions.html");
navigator.serviceWorker.register("/index.html");        
navigator.serviceWorker.register("/assets/Library.js");
navigator.serviceWorker.register("/assets/logo.png");

navigator.serviceWorker.ready.then(function (registration) {
    console.log('Service worker successfully registered on scope', registration.scope);
});

我希望不会抛出任何错误,并且我不希望 Service Worker 在您转到其他页面后消失。我想让他们说,所以你可以加载它们,然后离线浏览网站。

维克斯EC

这个问题很老了,从那以后我找到了解决方案并忘记了我问的这个问题。这是在 Service Worker 中缓存任何文件的解决方案。

在 中index.html,使用以下代码注册服务工作者:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("/service-worker.js");
} else {
    console.warn("serviceWorker isn't in navigator");
}

然后,在service-worker.js

const version = "v1";
const urls = [
    "/index.html", // these are all example URLs
    "/logo.png",
    "/my-script.js",
    "/LICENSE"
];

self.addEventListener("install", e => e.waitUntil(caches.open(version).then(f => f.addAll(urls)).then(() => self.skipWaiting())));
self.addEventListener("activate", g => g.waitUntil(caches.keys().then(c => Promise.all(c.map(i => i != c ? caches.delete(i) : null)))));
self.addEventListener("fetch", j => j.request.mode != 'navigate' ? 0 : j.respondWith(fetch(j.request).catch(() => caches.match(j.request))));

当用户随后访问索引时,服务器工作者会缓存任何文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

“服务工作者”是否支持离线HTML表单数据?

如何安装带有单个Javascript标记的服务工作者和清单?

服务工作者和软件预缓存的“新版本可用”

服务工作者和客户端请求“缓存控制”:“无缓存”

如何精确添加“允许服务工作者”以在上层文件夹中注册服务工作者范围

服务工作者不会从缓存中返回文件

服务工作者将文件从API调用添加到预缓存

为什么404.html在服务工作者缓存期间导致未捕获的错误?

HTML和PHP-图片(.png文件类型)不显示

从create-react-app中的服务工作者缓存中排除index.html

将版本/哈希添加到服务工作者文件后会发生什么?

服务工作者和其他域(aws s3)的缓存图像:“将不缓存不透明的响应”

从main.js文件或index.html调用服务工作者是否正确?

如何在Google Devtools中强制更新服务工作者文件?

在服务工作者文件中使用ESM(导入/导出)

在服务工作者中服务之前,可以编辑缓存的index.html吗?

通常,服务工作者应预缓存哪些文件?

服务工作者,AWS CloudFront和允许访问控制的来源

如何从src导入js文件到公用文件夹/服务工作者文件

未找到reactjs服务工作者.license文件

将服务工作者添加到startup.cs文件

PNG文件和位图

.png和.jpg文件的解密

在服务工作者中添加图像和CSS文件以及HTML文件以进行离线缓存

服务工作者缓存文件但不离线加载

React PWA:如何正确设置清单文件并注册服务工作者

服务工作者获取事件未列出根 index.html

如何修改服务工作者文件而不用 ng build --prod 覆盖它

Vue CLI 4 - 清单中的 PWA 插件预缓存无法获取 index.html 并且未注册服务工作者