PWA 使用和配置说明

Posted 2023-03-23

参考技术A Progressive Web App， 即渐进式WEB应用，简称PWA。

一个网页添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能，就可以实现PWA应用封装。

作用

最主要的特点:

2.index.js添加beforeinstallprompt处理

通常 sw.js 文件是处于项目的根目录，并且需要保证能直接通过 https: //yourhost/sw.js 这种形式直接被访问到才行。

注：注意cache文件路径，是sw.js的相对路径

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 (目录)暴露目录文件，并创建一个服务，访问项目