我使用 Workbox CLI 及其服务工作者生成器的 PWA 无法离线工作
My PWA using Workbox CLI and its service-worker generator doesn't work offline
我是构建 PWA 和使用 Workbox (V5) 的新手。我在缓存我的页面并离线工作时遇到了问题!
这是我所做的:
- 我编写 index.html 文件的方式是它具有 PWA 所需的元标记,加载清单文件(manifest.webmanifest), 并注册 service-worker JavaScript 文件 (sw.js).
- 我使用
npm install workbox-cli --global
命令安装了 workbox-cli。
- 我使用
workbox wizard
命令生成了我的 workbox-config.js 文件,并手动调整它以适应我想要的配置。
- 我终于生成了我的 service-worker (sw.js) 文件和一个 workbox-xxx.js 文件使用
workbox generateSW workbox-config.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.js
。这将告诉 workbox-precaching
在缓存中查找匹配的 URL 时可以忽略 ?source=pwa
查询参数。
By default,以 utm_
或参数 fbclid
开头的任何内容都将被忽略,因此如果您愿意,另一种方法是将 start_url
更改为类似/?utm_source=pwa
.
我是构建 PWA 和使用 Workbox (V5) 的新手。我在缓存我的页面并离线工作时遇到了问题!
这是我所做的:
- 我编写 index.html 文件的方式是它具有 PWA 所需的元标记,加载清单文件(manifest.webmanifest), 并注册 service-worker JavaScript 文件 (sw.js).
- 我使用
npm install workbox-cli --global
命令安装了 workbox-cli。 - 我使用
workbox wizard
命令生成了我的 workbox-config.js 文件,并手动调整它以适应我想要的配置。 - 我终于生成了我的 service-worker (sw.js) 文件和一个 workbox-xxx.js 文件使用
workbox generateSW workbox-config.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.js
。这将告诉 workbox-precaching
在缓存中查找匹配的 URL 时可以忽略 ?source=pwa
查询参数。
By default,以 utm_
或参数 fbclid
开头的任何内容都将被忽略,因此如果您愿意,另一种方法是将 start_url
更改为类似/?utm_source=pwa
.