轻松把你的项目升级到PWA

avatar
公众号：转转技术
原文链接： mp.weixin.qq.com

什么是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

  1. if ('serviceWorker' in navigator) { 
  2.   // register service worker
  3.   navigator.serviceWorker.register('./service-worker.js', {scope: './'})   // 参数1：注册提供的脚本URL 参数2：导航匹配
  4.   .then(function(registration) {
  5.       // 注册成功
  6.       // registration对象存有对sw所在生命周期的状态及状态变更事件及一些父接口的方法
  7.       // 状态分别有 installing 、 installed 、 waiting 、 activating 、 activated
  8.       if(registration.installing) {
  9.         console.log('Service worker installing');
  10.       } else if(registration.waiting) {
  11.         console.log('Service worker installed');
  12.       } else if(registration.active) {
  13.         console.log('Service worker active');
  14.       }
  15.   }).catch(function(error) {
  16.       // 注册失败
  17.   });
  18. }

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

  1. // 缓存静态文件
  2. self.addEventListener('install', function(event) {
  3.   event.waitUntil(
  4.       // 缓存指定文件
  5.     caches.open('v1').then(function(cache) {    
  6.       return cache.addAll([
  7.         '/',
  8.         '/index.html',
  9.         '/style.css',
  10.         '/app.js',
  11.         '/image-list.js',
  12.         '/star-wars-logo.jpg',
  13.       ]);
  14.     })
  15.   );
  16. });
  18. // 缓存接口数据
  19. self.addEventListener('fetch', function(event) {
  20.   event.respondWith(caches.match(event.request).then(function(response) {
  21.     // 匹配到请求
  22.     if (response !== undefined) {
  23.       return response;
  24.     } else {
  25.       return fetch(event.request).then(function (response) {
  26.         // 缓存响应数据
  27.         let responseClone = response.clone();
  29.         caches.open('v1').then(function (cache) {
  30.           cache.put(event.request, responseClone);
  31.         });
  32.         return response;
  33.       }).catch(function () {
  34.         return caches.match('/gallery/myLittleVader.jpg');
  35.       });
  36.     }
  37.   }));
  38. });
  40. // 更新缓存
  41. self.addEventListener('activate', function(event) {
  42.   event.waitUntil(
  43.     caches.keys().then(function(cacheNames) {
  44.       return Promise.all(
  45.         cacheNames.map(function(cacheName) {
  46.           // 如果有更新
  47.           if (cacheName !== 'v1') {
  48.             return caches.delete(cacheName);
  49.           }
  50.         })
  51.       );
  52.     })
  53.     .then(function(){
  54.       return self.clients.claim()
  55.     })
  56.   );
  57. });

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>

  1. webpack.prod.config.js

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

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

2.通过正常逻辑打包~

  1. npm run build ZZSellerTip

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

为了方便调试Service Worker在http://localhost或者http://127.0.0.1 本地环境下也可以跑起来 将打包好的文件通过http-server生成的静态服务器运行 运行结果：  

关掉http-server可以看到依然可以访问  

注意：如果你的静态文件是放到CDN上的，那么服务器一定要开通CORS，因为fetch请求是不支持跨域的~~

致此，项目改造就算完成了，总体来说改造成本还是很低的，所以小伙伴们一起搞起来吧~

——————————————————

长按二维码，关注大转转FE

▼

avatar
文章
阅读
粉丝