引言
随着移动端崛起，越来越多的应用需要支持离线访问和缓存，这就要求我们使用 PWA 技术来开发。Vue 作为当今流行的前端框架之一，也提供了很好的支持。本文将分享我在使用 Vue 开发 PWA 过程中遇到的一些问题以及解决办法。
开发工具
做 PWA 开发首先需要确保本地开发环境的 HTTPS 协议，否则浏览器会跳出安全提示。可以考虑使用 ngrok 工具将本地环境转发到 HTTPS 环境，或者使用 vue-cli-service 内置的 serve 命令，该命令在默认情况下会自动启动 HTTPS 环境。
# 开启 HTTPS 环境 npm run serve -- --https
离线访问
PWA 技术最核心的部分就是 offline caching，即缓存应用程序的资源使得离线状态下能够访问。在 Vue 中实现离线访问可以复用 Service Worker 技术。下面是一个简单的 Service Worker 脚本：
// javascriptcn.com 代码示例
const CACHE_NAME = 'my-pwa-cache-v1';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([
'/index.html',
'/js/app.js',
'/css/app.css'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});在这个例子中，Service Worker 在安装时缓存了三个资源：index.html、app.js 和 app.css。在后续的页面访问中，Service Worker 会优先从缓存中读取请求所需的资源，如果缓存中不存在则向服务器发起请求。
需要注意的是，在 Service Worker 安装时为了避免缓存污染，应该清理旧版本缓存：
// javascriptcn.com 代码示例
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.filter(name => {
return name !== CACHE_NAME;
}).map(name => {
return caches.delete(name);
})
);
})
);
});Manifest 配置
PWA 技术中还有一个必不可少的部分就是 Web App Manifest，它是一个 JSON 文件，描述了应用程序的各种元数据（如名称、图标、主题色等），浏览器会根据此文件来显示应用程序。下面是一个简单的 Web App Manifest 配置：
// javascriptcn.com 代码示例
{
"name": "My PWA",
"short_name": "MyPWA",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#000000",
"icons": [
{
"src": "/img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}在 Vue 中，可以将 Web App Manifest 配置放在 public 目录下的 manifest.json 文件中。需要注意的是，在使用自定义图标时，应该将其放置在 public/img/icons 目录下，并在 Manifest 配置文件中指定相对路径。
总结
PWA 技术作为现代 web 应用的基础之
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529e1517d4982a6ebc45323