新的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的更多相关文章

  1. vue添加背景音乐

    vue添加背景音乐需要用到HTML中的标签 参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp *在iOS端autopl ...

  2. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  3. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  4. 百度地图API示例:使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  5. vue 添加vux

    1.命令添加vux npm install vux --save 2.在build/webpack.base.conf.js中配置 const vuxLoader = require('vux-loa ...

  6. vue 添加过滤器-以格式化日期为例

    vue的filter和angular的pipe管道类似,是过滤器 官网:https://cn.vuejs.org/v2/guide/filters.html 添加格式化日期的全局过滤器 在main.j ...

  7. vue添加新属性不更新原因

    一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后 ...

  8. vue 添加axios解决post传参数为null问题

    本文主要参考: https://www.npmjs.com/package/axios http://jingyan.baidu.com/article/29697b916d6a7bab20de3cf ...

  9. vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-s ...

随机推荐

  1. 2014年国内最热门的.NET开源项目TOP25

    编者按:在2014年初时,微软宣布成立.NET基金会,全面支持开源项目.如今将过一年的时间,目前国内的开源项目到底如何了?下面我们就来细数一下国内25款比较优秀的.NET开源项目. 作者:acdoma ...

  2. 怎么样关掉红米note开发者选项

    进 系统设置\应用 ,找到“设置”点进去,清一下数据,再打开“设置”查看,就没有“开发者选项”了

  3. Spark 2.2.0 分布式集群环境搭建

    集群机器: 1台 装了 ubuntu 14.04的 台式机 1台 装了ubuntu 16.04 的 笔记本     (机器更多时同样适用) 1.需要安装好Hadoop分布式环境 参照:Hadoop分类 ...

  4. 短链接及关键字过滤ac自动机设计思路

    =============:短链接设计思路:核心:将长字符转为短字符串并建立映射关系,存储redis中.1.使用crc32转换为Long 2.hashids将long encode为最短字符串.作为短 ...

  5. php 批量检测bom头,去除bom头工具

    <?php //有些php文件由于不小心保存成了含bom头的格式而导致出现一系列的问题.以下是批量清除bom头的代码 if (isset ( $_GET ['dir'] )) { //confi ...

  6. 二分搜索poj106

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49944   Accepted: 10493 De ...

  7. 二分查找 HDOJ 2141 Can you find it?

    题目传送门 /* 题意:给出一个数,问是否有ai + bj + ck == x 二分查找:首先计算sum[l] = a[i] + b[j],对于q,枚举ck,查找是否有sum + ck == x */ ...

  8. 242 Valid Anagram 有效的字母异位词

    给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词.例如,s = "anagram",t = "nagaram",返回 true ...

  9. js中将html文档写入静态界面当中

    1.静态界面当中: <div id="test"></div> 2.在js当中写入 $("#test").append(html文档内容 ...

  10. jquery实现鼠标移入移除背景图片切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...