三步创建一个PWA应用
文章详细介绍了如何为“电车充电券规划计算器”创建和配置 `manifest.json`、`service-worker.js` 并更新 `index.html`，以实现离线访问和优化用户体验。
文章详细介绍了如何为“电车充电券规划计算器”创建和配置 `manifest.json`、`service-worker.js` 并更新 `index.html`，以实现离线访问和优化用户体验。
以「电车充电券规划计算器」为例。
{
"name": "电车充电券规划计算器",
"short_name": "充电券计算器",
"description": "电车充电券规划计算器 - 思涯谷",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4CAF50",
"icons": [
{
"src": "./icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
const CACHE_NAME = "e-power-plan-cache"
const urlsToCache = [
".",
"./index.html",
"./index.css",
"./index.js",
"./icon-192.png",
"./icon-512.png",
"/favicon.ico",
"./manifest.json",
]
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).( {
cache.(urlsToCache)
})
)
})
self.(, {
cacheWhitelist = []
event.(
caches.().( {
.(
cacheNames.( {
(!cacheWhitelist.(cacheName)) {
caches.(cacheName)
}
})
)
})
)
})
self.(, {
event.(
caches.(event.).( {
(cachedResponse) {
cachedResponse
}
(event.)
})
)
})
在 HTML 文件中，做以下修改：
在 <head> 部分，添加对 manifest.json 的引用：
<link rel="manifest" href="./manifest.json" />
紧接着 <body> 标签添加注册 Service Worker 的代码：
<body>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('./service-worker.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch((error) => {
console.log('Service Worker registration failed:', error);
});
});
}
</script>
...
</body>
添加图标文件和nginx配置后，大功告成！