PWA 全称为 Progressive Web App，中文译为渐进式 Web APP。
其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。也就是说，只要你使用浏览器，就可以实现免除下载或者是快速下载就能直接使用软件。比如微博、淘宝等。
PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。
PWA 特性
PWA 优、缺点
优点：
缺点：
知识拓展：应用程序新方式，不用下载就能使用的“PWA”
https://baijiahao.baidu.com/s?id=1728601920743815348&wfr=spider&for=pc
参考：如何在vue项目中使用PWA
https://blog.csdn.net/z858466/article/details/120973969
1.安装依赖
vue add @vue/pwa
会自动在src下生成registerServiceWorker.js文件、自动在main.js中导入，不用管
import './registerServiceWorker'
registerServiceWorker.js的代码如下：
/* 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 () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
2.vue.config.js配置pwa
module.exports = {
pwa: {
workboxOptions: {
skipWaiting: true,
clientsClaim: true,
importWorkboxFrom: 'local',
importsDirectory: 'js',
navigateFallback: '/',
navigateFallbackBlacklist: [/\/api\//]
}
}
}
3.public下创建manifest.json文件，pwa的添加至桌面的功能主要就是依赖于这个文件
{
"short_name": "短名称", // 用来描述应用的短名字。当应用的名字过长，在桌面图标上无法全部显示时，会用short_name中定义的来显示。
"name": "iDL-科研平台", // 用来描述应用的名称，会显示在各类提示的标题位置和启动画面中。
"icon": [ // 用来设置Web App的图标集合。
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "index.html", // 用来描述当用户从设备的主屏幕点击图标进入时，出现的第一个画面。
"display": "standalone", // 用来指定 Web App 从主屏幕点击启动后的显示类型
"background_color": "#002140", // 用来设置Web App启动画面的背景颜色
"theme_color": "#002140" // 定义和background_color一样的CSS颜色值，用于显示Web App的主题色，显示在banner位置。
}
更错manifest.json文件详细配置请参考：
https://juejin.cn/post/6844903543615258632
4.public/index.html下添加
<meta name="theme-color" content="#00142A">
5.build一下，看看生成的dist文件夹下的index.html有没有引用manifest.json
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4DBA87">
如果有，则基本配置已完成。下面就是看实际效果了：
上述步骤可能会遇到的问题：
（1）Unexpected token / in JSON at position
解决办法：新增的manifest.json去除所有//注释
（2）手动新增的manifest.json有eslint红色报错
解决办法：将VScode右下角的JSON with Comments 即可
3.F12查看Application时，Service Workers没有内容
解决办法：说明没有正确的注册Service Workers，注意registerServiceWorker.js下的register(${process.env.BASE_URL}service-worker.js路径问题，看看你的代码下process.env.NODE_ENV的值以及有没有process.env.BASE_URL
最终看效果需要到https下看，所以部署上线的时候这个地方要注意
注册成功时应该是这个样子：
4.localhost下看不到下载安装图标？
听别人说localhost是可以，但我遇到的实际是不行，需要项目部署到https下
5.可以愉快的看效果了，https访问你的项目，可以看到有安装按钮了
更多文章参考：
1.渐进式 Web 应用（PWA）
2.PWA(Progressive Web App)入门系列：（一）PWA简介
3.PWA(Progressive Web App)入门系列：（二）相关准备
4.PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest
5.PWA(Progressive Web App)入门系列：（四）Promise
6.PWA(Progressive Web App)入门系列：（五）Web Worker