轻松把你的项目升级到PWA

什么是PWA

PWA（Progressive Web Apps,渐进式网页应用）是Google在2015年推出的项目，致力于经过web app得到相似native app体验的网站。

优势

1.无需客户端，少许流量便可安装 2.可添加到主屏并全屏运行 3.离线功能，响应更快，及时更新 4.PUSH能力 5.数据传输必须是https

缺点

1.safari对PWA的态度是考虑中,暂时还不支持 2.PUSH还不够成熟，依赖于Web Push Protocol,Chrome只支持Google私有的GCM（Google Cloud Messaging）/FCM服务进行通知推送。国内的mipush也支持了不少app，在此但愿中国能尽快有一个统一的推送服务出现~

我的观点

PWA属于非侵入式的技术，能够作到降级兼容，而且拥有强大的离线功能，能够更快的响应，因此仍是很是推荐使用的。

网络应用清单

网络应用清单是一个 JSON 文件，主要定义一些启动网址，自定义图标，启动画面，主题颜色，启动样式等等配置信息 这边是在App内的M页，而且国内安卓用户使用的浏览器都不太支持这些定义，因此不详细介绍了。 The Web App Manifest官方文档，介绍的很详细~ webpack-manifest-plugin若是使用webpack也可使用相似这种插件来生成~ Web App Manifest Generator若是手写也有像这样的工具提供~

Service workers

定义： Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也能够在网络可用时做为浏览器和网络间的代理。它们旨在（除其余以外）使得可以建立有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采起适当的动做。他们还容许访问推送通知和后台同步API。

生命周期： 注册→下载→安装→激活

状态 installing 、installed 、waiting 、activating 、activated

主要事件 install 准备sw用于使用，例如建立缓存，放置离线资源 activate 此时能够清理旧缓存及相关的东西以便更新 fetch 响应请求事件，经过FetchEvent.respondWith方法，对这些请求作处理 install、activate事件会触发waitUntil方法

注意： 1.Service workers运行在其余线程，彻底异步，同步API不能在其中使用 2.大量使用Promise

Cache

方法 add()、addAll()、delete()、keys()、match()、matchAll()

基础用法

单首创建一个app.js文件，放到根目录,并在index.html中引用它 app.js ```ecmascript 6 if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('./service-worker.js', {scope: './'}) // 参数1：注册提供的脚本URL 参数2：导航匹配 .then(function(registration) { // 注册成功 // registration对象存有对sw所在生命周期的状态及状态变动事件及一些父接口的方法 // 状态分别有 installing 、 installed 、 waiting 、 activating 、 activated if(registration.installing) { console.log('Service worker installing'); } else if(registration.waiting) { console.log('Service worker installed'); } else if(registration.active) { console.log('Service worker active'); } }).catch(function(error) { // 注册失败 }); }

根目录下建立执行文件service-worker.js

 1 `service-worker.js`
 2 ```ecmascript 6
 3 // 缓存静态文件
 4 self.addEventListener('install', function(event) {
 5   event.waitUntil(
 6       // 缓存指定文件
 7     caches.open('v1').then(function(cache) {    
 8       return cache.addAll([
 9         '/',
10         '/index.html',
11         '/style.css',
12         '/app.js',
13         '/image-list.js',
14         '/star-wars-logo.jpg',
15       ]);
16     })
17   );
18 });

 1 // 缓存接口数据
 2 self.addEventListener('fetch', function(event) {
 3   event.respondWith(caches.match(event.request).then(function(response) {
 4     // 匹配到请求
 5     if (response !== undefined) {
 6       return response;
 7     } else {
 8       return fetch(event.request).then(function (response) {
 9         // 缓存响应数据
10         let responseClone = response.clone();
11 
12         caches.open('v1').then(function (cache) {
13           cache.put(event.request, responseClone);
14         });
15         return response;
16       }).catch(function () {
17         return caches.match('/gallery/myLittleVader.jpg');
18       });
19     }
20   }));
21 });

 

 1 // 更新缓存
 2 self.addEventListener('activate', function(event) {
 3   event.waitUntil(
 4     caches.keys().then(function(cacheNames) {
 5       return Promise.all(
 6         cacheNames.map(function(cacheName) {
 7           // 若是有更新
 8           if (cacheName !== 'v1') {
 9             return caches.delete(cacheName);
10           }
11         })
12       );
13     })
14     .then(function(){
15       return self.clients.claim()
16     })
17   );
18 });

 

webpack项目升级PWA

看到上边n多的API是否是很头疼，以及手动添加静态文件是否是很绝望，那么sw-precache-webpack-plugin这个插件轻松帮你解决全部问题 如今咱们就来升级下以前推过的小型Web页打包优化这片文章中所介绍的脚手架

1.修改文件：

1. index.html

   1 <script>
   2 if ('serviceWorker' in navigator) {
   3   window.addEventListener('load', function() {
   4       navigator.serviceWorker.register('./service-worker.js');
   5   });
   6 }
   7 </script>

    

2. webpack.prod.config.js ```ecmascript 6 var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin') // plugins 数组内添加 new SWPrecacheWebpackPlugin({ cacheId: 'my-vue-app', filename: 'service-worker.js', minify: true, // 其余更多配置请查看官方文档 })

   自动生成service-worker.js并自动完成相关配置

2.经过正常逻辑打包~

npm run build ZZSellerTip

3.启动一个本地静态服务器

为了方便调试Service Worker在http://localhost或者http://127.0.0.1 本地环境下也能够跑起来 将打包好的文件经过http-server生成的静态服务器运行 运行结果：  关掉http-server能够看到依然能够访问  

注意：若是你的静态文件是放到CDN上的，那么服务器必定要开通CORS，由于fetch请求是不支持跨域的~~

致此，项目改造就算完成了，整体来讲改形成本仍是很低的，因此小伙伴们一块儿搞起来吧~

 

若是你喜欢咱们的文章，关注咱们的公众号和咱们互动吧。