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

Logo

前往低代码交流专区

更多推荐