欢迎光临
我们一直在努力

webpack pwa

一、讲讲PWA

二、通过webpack配置实现PWA

webpack.prod.js:

const WorkboxPlugin = require(‘workbox-webpack-plugin’);plugins: [new MiniCssExtractPlugin({filename: ‘[name].css’,chunkFilename: ‘[name].chunk.css’}),// 使用workbox来进行配置new WorkboxPlugin.GenerateSW({clientsClaim: true,skipWaiting: 美国高防vps true})],

index.js:

console.log(‘hello, this is dell’);if (‘serviceWorker’ in navigator) {window.addEventListener(‘load’, () => {navigator.serviceWorker.register(‘/service-worker.js’).then(registration => {console.log(‘service-worker registed’);}).catch(error => {console.log(‘service-worker register error’);})})}

配置前后对比:
(1)配置之前,当我们关闭服务器之后,在刷新请求页面,页面是挂掉的

(2)配置之后,即便服务器已经关了,但仍旧可以展示缓存的页面

三、如何将dist文件快速运行在服务器上

npm install http-server –save-dev

添加运行脚本

在dist下启动一个http-server的服务器,也即是,将dist运行在该服务器上

71018824

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。