service-worker - 为什么我的服务人员不能离线工作
问题描述
一切似乎都是正确的,文件正在被缓存,但它不能离线工作。我错过了一些明显的东西吗?
cache.addAll 不想与我的 const FILES_TO_CACHE 一起工作,但是当我直接将它们放入时确实可以工作。因此重复的代码。
这是我的服务人员文件:
const FILES_TO_CACHE = [
"/",
"/index.html",
"/style.css",
"/db.js",
"/index.js",
"/manifest.webmanifest"
];
const CACHE_NAME = "static-cache-v2";
const DATA_CACHE_NAME = "data-cache-v1";
// install
self.addEventListener("install", function(evt) {
evt.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log("Your files were pre-cached successfully!");
return cache.addAll([
"/",
"/index.html",
"/style.css",
"/db.js",
"/index.js",
"/manifest.webmanifest"
]);
})
);
self.skipWaiting();
});
// activate
self.addEventListener("activate", function(evt) {
console.log("activated");
evt.waitUntil(
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
console.log("Removing old cache data", key);
return caches.delete(key);
}
})
).catch(err => console.log(err));
})
);
self.clients.claim();
});
// fetch
self.addEventListener("fetch", function(evt) {
console.log("fetched", evt.request.url);
if (evt.request.url.includes("/api/")) {
evt.respondWith(
caches
.open(FILES_TO_CACHE)
.then(cache => {
return fetch(evt.request)
.then(response => {
// If the response was good, clone it and store it in the cache.
if (response.status === 200) {
cache.put(evt.request.url, response.clone());
}
return response;
})
.catch(err => {
// Network request failed, try to get it from the cache.
return cache.match(evt.request);
});
})
.catch(err => console.log(err))
);
return;
}
});
html中的链接:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js").then(function() {
console.log("Service Worker Registered");
});
}
</script>
我还在 HTML 文件中链接了我的清单。
提前感谢您提供的任何帮助!
解决方案
如果你看这里的最后一行代码:
// fetch
self.addEventListener("fetch", function(evt) {
console.log("fetched", evt.request.url);
if (evt.request.url.includes("/api/")) {
你看到有一个非常简单的错误——你的 Service Worker只响应以“/api/”开头的请求。如果他们不这样做,SW 就不会碰他们。因此,只有“/api/”调用离线工作(这没有任何意义:-),api 大多是动态的,对吧?)。
(当然,代码中可能还有另一个错误,但这是开始进行更改的好点。)
推荐阅读
- google-apps-script - Google Scripts Chart 语法以及如何为烛台图着色
- hive - Spark shell 和 spark 数据框为 parquet 文件提供不同的结果
- reactjs - 在 React Modal 中使用正确的数据设置状态
- swift - 从 Indexpath 获取 collectionView 的 HeaderView 参考
- vb.net - 向客户端 PC 部署 vb.net 和水晶报告
- algorithm - 如何在有向图中找到第一个节点和所有其他节点之间所有可能路径的计数?
- python - 稀疏矩阵 hstack 得到关于可下标性的错误
- nativescript - nativescript相机中的自定义布局以及android上的自定义布局根本不可见
- sql - SQL Server:从第一行减去最后一行
- javascript - 当触发孩子在javascript中未定义的点击事件时