webpack配置使用PWA

Posted 万年打野易大师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack配置使用PWA相关的知识,希望对你有一定的参考价值。

pwa离线应用缓存使用APP在实际应用中很多会用到

重要插件:workbox-webpack-plugin

下载安装

在webpack.config.js文件配置引入使用

plugins中添加

new WorkboxWebpackPlugin.GenrateSW({clientClaim: true, skipWaiting: true})

使用,在入口文件引入service-worker

// 判断浏览器是否支持,需要添加对应的逻辑
if(\'serviceWorker\' in navigator) {
  window.addEventListener(\'load\', fucntion() {
    navigator.serviceWorker.register("/service-workre.js").
    then(
      ()=>{},
      ()=>{}
    )
  })
}

service-worker需要运行在服务器端
serve插件
serve -s (目录)暴露目录文件,并创建一个服务,访问项目

以上是关于webpack配置使用PWA的主要内容,如果未能解决你的问题,请参考以下文章

PWA

PWA

万字总结webpack实战案例配置

webpack优化环境配置

webpack优化环境配置

Webpack 工程的 PWA 实战