# pwa2
**Repository Path**: dhzx/pwa2
## Basic Information
- **Project Name**: pwa2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-08-03
- **Last Updated**: 2024-09-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# pwa2
#### 介绍
本仓库尝试使用offline-plugin 插件来手动更新pwa页面，实测是成功的，具体操作如下
## 1、安装插件
git clone 仓库后
`npm i` 即可
如果是其它项目安装则执行：
`npm i --save offline-plugin`
## 2、入口文件添加代码：
require('offline-plugin/runtime').install();
## 2、配置vue.config.js
```js
const OfflinePlugin = require('offline-plugin')
module.exports = {
publicPath: './',
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
//webpack配置
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
},
configureWebpack: config => {
//调试JS
config.devtool = "source-map";
plugins: [
new OfflinePlugin({
responseStrategy: 'cache-first', // 缓存优先
AppCache: false, // 不启用appCache
safeToUseOptionalCaches: true, // Removes warning for about `additional` section usage
ServiceWorker: {
output: './sw.js', // 输出目录
publicPath: './sw.js', // sw.js 加载路径
scope: '/pwatest', // 作用域
minify: true, // 开启压缩
events: true // 当sw状态改变时候发射对应事件
},
caches: 'all',
autoUpdate: 30000
})
]
},
css: {
sourceMap: true // 开启 CSS source maps?
}
};
```
## 3、public下新增mainfest.json
```js
{
"name": "pwa2",
"short_name": "pwa2",
"theme_color": "#550000",
"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" }
],
"start_url": ".",
"display": "fullscreen",
"background_color": "#000000"
}
```
## 4、index.html 引用mainfest.json 并增加ios的图标配置
```html
```