comeon.jpg
什么是PWA?
PWA即Progressive Web Application，它作为一门比较新的前端技术，在近几年发展比较迅速，其难容也绝对不是一篇文章可以搞定的，本文的主要目的是了解PWA的概念，并通过对PWA的打包了解一些webpack的高级概念和实践。
开始
我们用一个现有的webpack项目为例子开发，我们知道，当打包完成后，我们会将dist目录放到服务器上，完成一个上线，在我们没有服务器的时候，我们将使用http-Server来代替，模拟一个服务器环境
安装http-server
yarn add http-server -D
配置启动命令并运行
我们需要配置一个指令，让http-server把我们打包后的前端项目起起来
package.json
"start": "http-server dist"
启动后，访问对应的端口，我们发现可以正常运行打包后的文件，但我们现在把服务关掉，再去访问那个端口，发现访问不了了。这就是我们传统的技术
而PWA真是解决了传统开发模式下的痛点，在PWA中，第一次访问页面成功后，如果我们停掉了服务，则可以利用第一次访问的缓存，继续对页面做一些操作
实现PWA
实际上facebook或者google早已经有一些比较成熟的解决方案，我们可以借助他们的插件来实现这样的技术。——workbox-webpack-plugin
安装
yarn add workbox-webpack-plugin -D
配置PWA
因为是只有要上线的代码，才需要我们配置PWA，我们只在生产环境的配置文件中配置即可
webpack.prod.js
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
plugins: [
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
]
}
通过上面的配置后，打包，我们会发现生成了一个service-worker.js的文件，但我们还不能实现一个PWA，我们需要在业务代码中加入下面的内容，比如在index.js中加入。
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')
})
})
}
意思是，如果我们有这样的PWA配置，我们就去启动一个service-work的缓存，现在我们重新打包一下，再启动http-server试试。正常访问后，再关掉服务，看一下，页面还能正常访问。我就这样实现了一个简单的PWA。
写在后面
本文，我们通过一个简单的例子和配置，简单介绍了PWA的概念和其在打包中的配置，要是想更深的理解PWA或者业务中用到这样的技术，还是得再去钻研更深的配置，这里只做一个简单的介绍起一个抛砖引玉的作用。
网友评论