Vue项目实现PWA 把网站安装在浏览器和桌面
2022-12-02
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
## 前言
一位热心用户推荐，在极简壁纸支持PWA，经过一番临时抱佛脚，学习了一下发现PWA对于PC端用户，就是把网站安装到Chrome浏览器中，点击浏览器收藏夹栏中的 `应用` 按钮，就可以看到网站入口，同时桌面也会出现一个图标，点击后进入类似小程序的网站界面，在单独的窗口进行访问。非常类似于手机微信的小程序。部分代码会离线储存到本地，加快访问速度。目前已知[V2EX](https://www.v2ex.com/)就使用了这个功能。
## 折腾
后面的教程是基于VUE-CLI的线上项目，版本信息如下
```shell
@vue/cli 4.5.9
vue 2.6.12
```
<br>
开始折腾
```shell
# cd 到项目目录
# 安装pwa
vue add pwa
```
<br>
至此项目下多了这几个文件
`public/robots.txt`
`src/registerServiceWorker.js`
`public/icons/xxx.png`
这里需要再手动新建一个文件
`public/manifest.json`
<br>
关于icons `public/icons/` 我只保留了几个基本的尺寸，其余手机相关的全部删掉了，只保留了16 32 100 192 512
配置 `manifest.json` 文件
```json
{
"name": "极简壁纸",
"short_name": "极简壁纸",
"start_url": ".",
"id": "index.html",
"display": "fullscreen",
"background_color": "#ffffff",
"theme_color": "#f5f5f5",
"description": "极简壁纸_海量电脑桌面壁纸美图_4K超高清_最潮壁纸网站",
"icons": [{
"src": "img/icons/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}, {
"src": "img/icons/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "img/icons/favicon.png",
"sizes": "105x105",
"type": "image/png"
}, {
"src": "img/icons/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "img/icons/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
```
<br>
在 `index.html` 中引入 `manifest.json` 文件
```html
<link rel="manifest" href="manifest.json">
```
<br>
`registerServiceWorker.js` 和 `main.js`
我这里已经自动配置了默认的 只需要默认就够用
如果你没有这2个，可以按照我这个默认的配
`registerServiceWorker.js`
```javascript
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
},
registered () {
},
cached () {
},
updatefound () {
},
updated () {
},
offline () {
},
error (error) {
}
})
}
```
`main.js`
```javascript
import './registerServiceWorker'
```
<br>
最后就是 `vue.config.js`
```javascript
module.exports = {
pwa: {
workboxPluginMode: 'GenerateSW', // 也可以定义为‘InjectManifest’模式。但是需自己写SW.js文件进行配置
themeColor: '#f5f5f5',
backgroundColor: '#ffffff',
workboxOptions: {
importWorkboxFrom: 'cdn', //从''cdn"导入workbox,也可以‘local’
skipWaiting: true, // 安装完SW不等待直接接管网站
clientsClaim: true,
navigateFallback: '/index.html',
exclude: [/\.(?:png|jpg|jpeg|webp|gif|svg)$/], //在预缓存中排除图片
// 定义运行时缓存
runtimeCaching: [
{
urlPattern: new RegExp('^https://cdn'),
handler: 'NetworkFirst',
options: {
networkTimeoutSeconds: 20,
cacheName: 'cdn-cache',
cacheableResponse: {
statuses: [200]
}
}
}
]
}
}
}
```
<br><br>
体验地址：[https://bz.zzzmh.cn](https://bz.zzzmh.cn)
到这里就配置完成了，只有打包后发布到线上，在线上版本可以看到效果，如图，点这2个地方都可以进行安装
点击后 弹出安装提示框， 点确定安装成功
入口有2个
1 是桌面多了一个图标，打开直接是一个小程序
2 是书签栏的第一个 `应用` 里面就有已安装的程序如图
<br>
如果你遇到了浏览器地址栏看不到向下箭头，大概率是出bug了
按 `F12` 到 `Application` 中的 `Manifest` 查看有没有报错或者警告
<br>
**需要再次申明，vue-cli的项目跑serve是出不来的，必须build后文件放在域名下访问才会出来**
## END
参考：
[如何创建一个PWA应用代码篇(bilibili)](https://www.bilibili.com/video/BV12t4y1J75H)
[如何在vue项目中使用PWA - 掘金 (juejin.cn)](https://juejin.cn/post/6844904033522548743)
[Vue项目PWA化 - 简书 (jianshu.com)](https://www.jianshu.com/p/7845a13a67d7)
[Web App Manifest | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/Manifest)
沪公网安备31010602005070号