使用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命令将尝试直接从网络读取此内容，并跳过工作箱预缓存。另外，当离线模拟时，我得到一个错误，取而代之的是缓存的响应。
变得疯狂 ;-）
在深入研究此问题后-我发现了问题（至少在我的网站上）
完整的工作示例：
<!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>
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);
// 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;
}
});
v1.0.0
您可能需要查看控制台，才能发现在使用FETCH或XMLHTTREQUEST时，来自Service Worker的访存事件也会删除一条消息。
如果将具有fetch和xmlHttprequest的javascript（/index.js）与服务工作者（/sw.js）放在同一位置（范围），则一切正常
但
如果留下的JavaScript像的子目录（/js/index.js） ，这将不触及FETCH LISTENER从服务工人（/sw.js）了即使/ JS应在范围???
奇怪但很高兴现在得到它;-)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句