我是构建 PWA 和使用 Workbox (V5) 的新手。我在缓存页面和离线工作时遇到问题！
这是我所做的：
npm install workbox-cli --global 命令安装了 workbox-cli。
workbox wizard 命令生成了我的 workbox-config.js文件，并手动调整它以适合我想要的配置。
workbox generateSW workbox-config.js 命令生成了我的 service-worker (sw.js) 文件和 workbox-xxx.js文件。
现在，当我在本地主机上运行我的页面，然后打开 Chrome DevTools，然后转到 Lighthouse 部分用它审核我的网页时，它说我的应用程序是可安装的，并且 PWA 已优化......但说它没有无法离线工作：
- Current page does not respond with a 200 when offline
- start_url does not respond with a 200 when offlineTimed out waiting for start_url (http://127.0.0.1:4000/?source=pwa) to respond.
这是我的index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#eeeeee" />
<meta name="apple-mobile-web-app-title" content="Hello" />
<meta name="description" content="I'm here. Hello World!" />
<meta name="theme-color" content="#eeeeee" />
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
<title>Hello</title>
<meta name="description" content="Hello World!">
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="stylesheet" href="./assets/styles/main.css">
</head>
<body>
<h1>Hello World!</h1>
<script src="./assets/scripts/main.js" charset="utf-8"></script>
<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js');
});
}
</script>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
这是我的 manifest.webmanifest。
{
"short_name": "Hello",
"name": "Hello",
"description": "I'm here. Hello World!",
"icons": [
{
"src": "/assets/images/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/assets/images/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"scope": "/",
"start_url": "/?source=pwa",
"display": "standalone",
"orientation": "portrait-primary",
"theme_color": "#eeeeee",
"background_color": "#eeeeee"
}
这是我的workbox-config.js。正如你所看到的，我只预缓存 .html 和 .ico 文件，然后对图像或 .css 和 .js 文件进行运行时缓存。
module.exports = {
globDirectory: "./",
globPatterns: [
"**/*.{html,ico}"
],
globIgnores: [
"node_modules/**/*",
"{.,_}*/**/*",
"**/*.{md,txt}",
"Gemfile*",
"package*"
],
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
},
},
},
{
urlPattern: /\.(?:css|js)$/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'assets',
},
}
],
swDest: "./sw.js",
sourcemap: false
};
我不明白我做错了什么！一切都很清楚并且基于 Workbox 文档！ 请帮忙！有人知道这里出了什么问题吗？
提前致谢。
问候， 阿里
尝试将
ignoreURLParametersMatching: [/^source$/]workbox-config.jsworkbox-precaching?source=pwa默认情况下，以
utm_fbclidstart_url/?utm_source=pwa我有一个问题，但没有人回复我...请看一下
浏览器说软件已“激活并正在运行”，但它从不响应任何请求（不工作）
另外，我怎么知道我的软件正在工作？我尝试使用应用程序选项卡上的
network requestfetch