Vue项目实现PWA 把网站安装在浏览器和桌面

home 编辑时间 2022/10/11

![](/api/file/getImage?fileId=634515e1da74050013015012)

## 前言
一位热心用户推荐，在极简壁纸支持PWA，经过一番临时抱佛脚，学习了一下发现PWA对于PC端用户，就是把网站安装到Chrome浏览器中，点击浏览器收藏夹栏中的 `应用` 按钮，就可以看到网站入口，同时桌面也会出现一个图标，点击后进入类似小程序的网站界面，在单独的窗口进行访问。非常类似于手机微信的小程序。部分代码会离线储存到本地，加快访问速度。目前已知[V2EX](https://www.v2ex.com/)就使用了这个功能。

## 折腾

后面的教程是基于VUE-CLI的线上项目，版本信息如下
```shell
@vue/cli 4.5.9
vue 2.6.12
```

开始折腾
```shell
# cd 到项目目录
# 安装pwa
vue add pwa 
```

至此项目下多了这几个文件
`public/robots.txt`
`src/registerServiceWorker.js`
`public/icons/xxx.png`

这里需要再手动新建一个文件
`public/manifest.json`

关于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"
  }]
}
```

在 `index.html` 中引入 `manifest.json` 文件
```html
<link rel="manifest" href="manifest.json">
```

`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'
```

最后就是 `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]
 }
 }
 }
 ]
 }
 }
}
```

体验地址：[https://bz.zzzmh.cn](https://bz.zzzmh.cn)
到这里就配置完成了，只有打包后发布到线上，在线上版本可以看到效果，如图，点这2个地方都可以进行安装
![](/api/file/getImage?fileId=63452f85da74050013015023)
点击后 弹出安装提示框， 点确定安装成功
![](/api/file/getImage?fileId=63452f9cda74050013015024)

入口有2个
1 是桌面多了一个图标，打开直接是一个小程序
2 是书签栏的第一个 `应用` 里面就有已安装的程序如图
![](/api/file/getImage?fileId=63453091da74050013015025)

如果你遇到了浏览器地址栏看不到向下箭头，大概率是出bug了
按 `F12` 到 `Application` 中的 `Manifest` 查看有没有报错或者警告
![](/api/file/getImage?fileId=634531ddda7405001301502a)

**需要再次申明，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)

送人玫瑰,手留余香