使用workbox(5.1.3(并设置类似的service-worker.js时
precacheAndRoute([
{url: '/version.txt', revision: 'v1' },
]);
我可以在浏览器中导航到localhost://version.txt，并在chrome控制台中看到这些内容是通过缓存工作簿获取的。
控制台中的消息显示：
workbox Precaching is responding to: /version.txt
但是当试图通过获取我的javascript应用程序中的资源时
window
.fetch('/version.txt')
.then((response) => {
if (response.status >= 200 && response.status < 300) {
return response.text();
} else {
throw Error('no version');
}
})
.then((data) => {
console.log('content: ' + data);
})
.catch((error) => {
console.log(error);
});
}
fetch命令将尝试直接从网络读取此内容，并跳过工作簿预缓存。另外，当模拟脱机时，我会在获取缓存响应时出错。
变得疯狂；-(
在深入研究这个问题后，我发现了问题(至少在我的网站上(
完整的工作示例：
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My New Project!</title>
</head>
<body>
<h1>Example Service Worker</h1>
<p>A simple Test</>
<!-- Scripts -->
<script src="index.js"></script>
</body>
</html>
/index.js
let registration;
var initServiceWorker = () => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js')
.then((reg) => registration = reg)
.catch((error) => console.log('Registration failed with ' + error));
}
}
var fetchTest = () => {
console.log('VERSION FETCH Test looking for: /version.txt');
window
.fetch('/version.txt', { method: 'GET'})
.then((response) => {
if (response.status >= 200 && response.status < 300) {
return response.text();
} else {
throw Error('no version.txt file');
}
})
.then((data) => {
console.log('AVILABLE VERSION FETCH: ' + String(data).trim());
})
.catch((error) => {
console.log(error);
});
}
var xmlhttpTest = () => {
console.log('VERSION XHR Test looking for: /version.txt');
var xhr = new XMLHttpRequest();
xhr.open("GET", '/version.txt', true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('AVILABLE VERSION XHR: ' + xhr.responseText);
}
}
}
// initialize request
xhr.send(null);
}
console.log("JavaScript is amazing!");
initServiceWorker();
setTimeout(() => fetchTest(), 5000);
setTimeout(() => xmlhttpTest(), 10000);
setTimeout(() => { console.log('Registration update ...'); registration.update()}, 20000);
setTimeout(() => fetchTest(), 30000);
setTimeout(() => xmlhttpTest(), 35000);
/sw.js
// Sample service worker
const SW_VERSION = 'a2';
self.addEventListener('install', (event) => {
console.log('SW INSTALL: ' + SW_VERSION);
skipWaiting();
});
self.addEventListener('activate', (event) => {
console.log('SW ACTIVATE: ' + SW_VERSION);
skipWaiting();
});
self.addEventListener("fetch", function(event) {
console.log('WORKER (' + SW_VERSION + '): fetch event in progress ... ' + event.request.url);
if (event.request.method !== 'GET') {
console.log('WORKER: fetch event ignored.', event.request.method, event.request.url);
return;
}
});
/版本.txt
v1.0.0
您可以查看控制台，发现在使用FETCH或XMLHTTREQUEST时，来自服务工作者的FETCH事件也会丢弃一条消息。
现在关于(我的(问题：
如果将带有fetch和xmlHttprequest的javascript(/index.js(放置在与服务工作者(/sw.js(相同的位置(作用域(，则一切正常
但是
如果将javascript留在子文件夹中，如(/js/index.js(即使/js应该在作用域内，这也不会接触到来自服务工作者(/sw.js(的FETCH LISTENER？？？
奇怪，但现在很高兴得到它；-(
您希望您的服务人员拦截您的导航请求并提供您的文件。
你应该使用workbox 中的预制机制
例如
new routing.registerRoute(new routing.NavigationRoute(
new precaching.createHandlerBoundToURL('/version.txt'), {
allowlist: [new RegExp('/version.txt')]
}
))