console.log("service worker");
const OFFLINE_ASSETS = [
"/",
"/src/main.tsx",
"/vite.svg",
`https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmCy16nhIbV3pI1qLYHMJKwbH2458oiC9EmA&s`,
];
const addResourcesToCache = async (resources) => {
const cache = await caches.open("v1");
await cache.addAll(resources);
};
self.addEventListener("install", (e) => {
console.log("installing");
e.waitUntil(addResourcesToCache(OFFLINE_ASSETS));
});
const cacheFirst = async (req) => {
const responseFromCache = await caches.match(req);
if (responseFromCache) {
return responseFromCache;
}
return fetch(req);
};
self.addEventListener("fetch", (event) => {
event.respondWith(cacheFirst(event.request));
});
它在“/”上显示“index.html”,这是 ii 应该的。 svgs 和图像链接也可以工作,但只有 main.tsx 等在我关闭服务器时无法工作。为什么 ? 它在 vite 上的 React-ts 上
src/main.tsx 是源文件。当您通过网络浏览器访问文件时,您通常只能访问公共文件(当您进行 vite 构建时,您的 dist/ 文件夹中的文件)
main.tsx 文件不在那里,因为您网站的源代码通常是敏感信息,您不希望随机的人能够读取这些信息
通常,编译器将 tsx 文件编译为原始 html/js/css,并捆绑在最小化文件中。这些文件最终会分发到 /dist/
如果您(出于某种原因,不推荐)希望将 main.tsx 文件复制到 dist 文件夹而不更改名称和内容。你可以使用 vite-plugin-static-copy 。这是一个旨在将静态文件复制到构建输出中的插件