webpack3 + vue 添加 serviceWorker
新的vue脚手架已经可以自带pwa了,本文主要针对旧版的webpack。
先装三个插件:
$npm i register-service-worker sw-precache-webpack-plugin webpack-pwa-manifest --save-dev
因为pwa主要用于生产,我们来动手改造 build/webpack.prod.conf.js,
首先在头部引入两个插件:
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const WebpackPwaManifest = require('webpack-pwa-manifest')
在 plugins 加入:
plugins: [
new SWPrecacheWebpackPlugin({
cacheId: 'my-project-name',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
}),
new WebpackPwaManifest({
name: 'My Progressive Web App',
short_name: 'MyPWA',
description: 'My awesome Progressive Web App!',
background_color: '#ffffff',
crossorigin: 'use-credentials', //can be null, use-credentials or anonymous
icons: [
{
src: path.resolve('src/assets/icon.png'),
sizes: [, , , , , ] // multiple sizes
},
{
src: path.resolve('src/assets/large-icon.png'),
size: '1024x1024' // you can also use the specifications pattern
}
]
}),
// ...
]
这个时候打包出来的代码根目录里面多了个 service-worker.js ,html文件里面 pwa 相关元素也加上了。
添加一个文件用来注册 serviceWorker,(眼熟吗?抄的vue-cli 3 ^_^)
// serviceWorker.js
import { register } from 'register-service-worker' if (process.env.NODE_ENV === 'production') {
register('service-worker.js', {
ready () {
console.log(
'App is being served from cache by a service worker.'
)
},
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.')
window.location.reload(true) // 这里需要刷新页面
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
在入口 main.js 引入该文件:
import './serviceWorker'
至此,改造完成。
webpack3 + vue 添加 serviceWorker的更多相关文章
- vue添加背景音乐
vue添加背景音乐需要用到HTML中的标签 参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp *在iOS端autopl ...
- vue添加页面键盘事件
我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...
- Vue添加请求拦截器
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
- 百度地图API示例:使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
- vue 添加vux
1.命令添加vux npm install vux --save 2.在build/webpack.base.conf.js中配置 const vuxLoader = require('vux-loa ...
- vue 添加过滤器-以格式化日期为例
vue的filter和angular的pipe管道类似,是过滤器 官网:https://cn.vuejs.org/v2/guide/filters.html 添加格式化日期的全局过滤器 在main.j ...
- vue添加新属性不更新原因
一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后 ...
- vue 添加axios解决post传参数为null问题
本文主要参考: https://www.npmjs.com/package/axios http://jingyan.baidu.com/article/29697b916d6a7bab20de3cf ...
- vue添加swiper的正确方式亲测---切图网
在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...
随机推荐
- 2014年国内最热门的.NET开源项目TOP25
编者按:在2014年初时,微软宣布成立.NET基金会,全面支持开源项目.如今将过一年的时间,目前国内的开源项目到底如何了?下面我们就来细数一下国内25款比较优秀的.NET开源项目. 作者:acdoma ...
- 怎么样关掉红米note开发者选项
进 系统设置\应用 ,找到“设置”点进去,清一下数据,再打开“设置”查看,就没有“开发者选项”了
- Spark 2.2.0 分布式集群环境搭建
集群机器: 1台 装了 ubuntu 14.04的 台式机 1台 装了ubuntu 16.04 的 笔记本 (机器更多时同样适用) 1.需要安装好Hadoop分布式环境 参照:Hadoop分类 ...
- 短链接及关键字过滤ac自动机设计思路
=============:短链接设计思路:核心:将长字符转为短字符串并建立映射关系,存储redis中.1.使用crc32转换为Long 2.hashids将long encode为最短字符串.作为短 ...
- php 批量检测bom头,去除bom头工具
<?php //有些php文件由于不小心保存成了含bom头的格式而导致出现一系列的问题.以下是批量清除bom头的代码 if (isset ( $_GET ['dir'] )) { //confi ...
- 二分搜索poj106
Cable master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 49944 Accepted: 10493 De ...
- 二分查找 HDOJ 2141 Can you find it?
题目传送门 /* 题意:给出一个数,问是否有ai + bj + ck == x 二分查找:首先计算sum[l] = a[i] + b[j],对于q,枚举ck,查找是否有sum + ck == x */ ...
- 242 Valid Anagram 有效的字母异位词
给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词.例如,s = "anagram",t = "nagaram",返回 true ...
- js中将html文档写入静态界面当中
1.静态界面当中: <div id="test"></div> 2.在js当中写入 $("#test").append(html文档内容 ...
- jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...