vue实现server-worker的实现方案
最近做一个新的官网(没有任何交互) 采用这个server-worker的技术,可以秒开或者离线访问具体server-worker的介绍,移步 https://lavas.baidu.com/pwa测试条件: localhost或者https的才能测试具体的介绍自己查阅资料我采用的 offline-plugin 的一个npm包 详见 https://github.com/NekR/offli...
·
最近做一个新的官网(没有任何交互) 采用这个server-worker的技术,可以秒开或者离线访问
具体server-worker的介绍,移步 https://lavas.baidu.com/pwa
测试条件: localhost或者https的才能测试
具体的介绍自己查阅资料
我采用的 offline-plugin 的一个npm包 详见 https://github.com/NekR/offline-plugin
按照上面的方法测试,发现一个的问题的,改了代码也不能在显示当前最新的代码(prodution的环境)
需要修改一个代码:
代码连接:https://github.com/NekR/offline-plugin/blob/master/docs/updates.md
// webpack.prod.conf.js
const OfflinePlugin = require('offline-plugin');
new OfflinePlugin({
responseStrategy: 'cache-first', // 缓存优先
AppCache: false, // 不启⽤appCache
safeToUseOptionalCaches: true, // Removes warning for about `additional` section usage
autoUpdate: true, // ⾃动更新
caches: { // webpack打包后需要换的⽂件正则匹配
main: [
'**/*.js',
'**/*.css',
/\.(png|jpe?g|gif|svg)(\?.*)?$/,
/\.(woff2?|eot|ttf|otf)(\?.*)?$/
],
additional: [
':externals:'
]
},
externals: [], // 设置外部链接,例如配置 http: //hello.com/getuser,那么在请求这个接⼝的时候就会进⾏接⼝缓存
excludes: ['**/.*', '**/*.map', '**/*.gz', '**/manifest-last.json'], // 需要过滤的⽂ 件
autoUpdate: 1000 * 60 / 20,
// 自动更新 // Tell to OfflinePlugin to generate events for ServiceWorker, console.log to some event
ServiceWorker: {
output: './static/sw.js', // 输出⽬录
publicPath: '/static/sw.js?t=' + new Date(), // sw.js 加载路径
scope: '/', // 作⽤域(此处有坑)
minify: true, // 开启压缩
events: true // 当sw状态改变时候发射对应事件
}
})
// App.vue 或者 main.js 等入口文件中。
const runtime = require('offline-plugin/runtime');
runtime.install({
onUpdating: () => {
console.log('SW Event:', 'onUpdating');
},
onUpdateReady: () => {
console.log('SW Event:', 'onUpdateReady');
// Tells to new SW to take control immediately
runtime.applyUpdate();
},
onUpdated: () => {
console.log('SW Event:', 'onUpdated');
// Reload the webpage to load into the new version
window.location.reload();
},
onUpdateFailed: () => {
console.log('SW Event:', 'onUpdateFailed');
}
});
重新测试一下就ok了
更多推荐
已为社区贡献33条内容
所有评论(0)