vue实现server-worker的实现方案

最新推荐文章于 2025-02-25 19:12:36 发布

zhooson

最新推荐文章于 2025-02-25 19:12:36 发布

阅读量2.7k

点赞数 1

分类专栏： server-worker 文章标签： server-worker

本文链接：https://blog.youkuaiyun.com/Zhooson/article/details/85617665

版权

server-worker 专栏收录该内容

1 篇文章

订阅专栏

最近做一个新的官网(没有任何交互) 采用这个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了