PWA是Progressive Wed Application(渐进式Wed应用程序)的缩写
通常情况下，我们运行npm run build之后，生成dist目录，我们再把dist目录里的代码放到服务器上，然后服务器就可以把我们的页面跑起来了。
但是，有的时候，我们在开发过程中，可能并没有一个后端的服务器，这个时候，我们可以模拟一台后端的服务器，怎么模拟呢？ 借助http-server这个模块
具体步骤如下：
- 安装模块
npm install http-server --save-dev
- 安装好以后，我们在
package.json里，写一个start命令,这样写的意思时，当我们运行npm run start时，会在dist目录下，开启一个http-server
image.png - 命令配置好以后，我们执行命令
npm run start，然后我们可以从下边两个地址的8080端口访问到我们开启的服务器
image.png
我们在业务代码里，打印一句话
image.png
然后我们再访问服务器，看下是否有打印，结果是可以打印出这句话的
image.png
假如，这个时候，服务器关闭了，我们再去访问这个地址，会发现页面访问不到了
image.png
这就是传统的网页，那么PWA是一种什么技术呢？
- 假如我们访问一个网址，第一次我们访问成功了，忽然之间服务器挂掉了，第二次再去重新访问这个网站的时候，它可以在本地有一份缓存，我们可以直接用这个缓存把之前访问到的页面，在展示出来，这样的话，即便服务器挂掉，我们在本地还可以看到之前访问到的页面，这就是
PWA
要想实现这种PWA的技术,在webpack中有一个google已经做过的现成的webpack插件，使用这种插件做代码的打包，我们可以非常便捷的实现这种PWA的技术，配置步骤如下：
- 安装
npm install workbox-webpack-plugin --save-dev
- 本地测试的代码，不用考虑服务器是否挂掉的问题。只有要上线的代码，才需要做PWA的处理，做的更完善，遇到断网等情况，依然可以访问，用户体验更好，所以我们需要配置
webpack.prod.js
image.png - 配置好以后，再运行打包命令
npm run build,可以看到生成的文件多了这两个，通过这两个文件就可以让service-worker正常生效，是我们的项目支持PWA应用的要求，service-worker我们可以理解为另类的缓存,有了这个缓存，我们可以让我们的页面能够被缓存住，即使服务器崩溃，也可以被缓存住
image.png - 当然，光生成这两个文件还不够，实际上，要实现PWA应用要求，我们还要写一些业务代码，
index.js里如下：
console.log('hello , this is LEE YANG')
// 浏览器如果支持serviceWorker，那么我们就可以进行如下操作
if ('serviceWorker' in navigator) {
// 当页面加载好以后，进行如下操作
window.addEventListener('load', () => {
// 如果注册成功的操作，返回的是promise
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('service-worker registed')
}).catch(error => {
console.log('service-worker register error')
})
})
}
- 业务代码修改后，重新打包
npm run build - 打包成功之后，运行
npm run start,控制台会输出
image.png - 这个时候，如果我们关掉服务器
ctrl+c,再刷新页面，还是会输出，这就是PWA的概念
image.png
