一、讲讲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