我正在尝试设置 pwa 应用程序。我的 sw.js
是
var urlsToCache = [
'/danger/index.html',
'/danger/css/main.css',
'/danger/css/fontawesome-all.min.css',
'/danger/css/font.css'
];
var CACHE_NAME = 'progressive';
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(CACHE_NAME).then(function (cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function (response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(CACHE_NAME).then(function (cache) {
return fetch(event.request).then(function (response) {
cache.put(event.request, response.clone());
return response;
});
})
);
});
我想让 sw 检查第一个网络,然后检查缓存。我从网上得到了一个代码。
self.addEventListener('fetch', (event) => {
event.respondWith(async function() {
try {
return await fetch(event.request);
} catch (err) {
return caches.match(event.request);
}
}());
});
如何在我的 sw.js
中实现它。我问它是因为我的应用程序也没有在网络启用模式下更新网站内容。
最佳答案
浏览器将始终先连接到网络并获取 service-worker.js
我建议您使用 Workbox 而不是手动编写所有这些代码。
Workbox documentation
我们不应该缓存 service-worker 文件,因为这是浏览器了解是否有任何其他文件已更改的真实来源。通常一个 service-worker 文件会有一系列的文件,这些文件连同它们的哈希值一起被缓存。当 service worker 文件更改时,浏览器知道它需要从服务器获取更新。
谢谢
关于javascript - 如何先建立服务 worker 网络然后缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56334856/