前端每周清单半年盘点之PWA篇

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的PWA相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。

教程实践

• 工程实践中的PWA利器清单:本文是Google Chrome团队的Addy Osmani所写，介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的PWA开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用PWA之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。( http://suo.im/1IxGPJ

• 百度搜索对PWA的探索和初步实践:本文是百度搜索资深Web前端工程师沈洲在前端之巅微信群中的分享整理总结而成，介绍了百度天气PWA应用的开发实践，本周还分享了PWA实践：从一个简单的页面开始与PWA实践：理解和创建Service Worker脚本等PWA相关内容 。(http://6me.us/JS85s)

• PWA在饿了么的实践经验：本篇旨在和大家分享饿了么M站(https://h5.ele.me/msite/)在PWA改造中的实践经验。涉及到的方面有：PWA线上部署的准备工作、多页应用的prerender优化、实践过程中踩到的(和推进解决的)坑。( https://parg.co/bO7 )

• Progressive Web Apps：响应式Web设计的延伸：本文是对于Progressive Web Apps概念、设计理念与简单实践的介绍，作者介绍了PWA应用应该具备的基本特性、性能与体验上的要求以及如何将现有站点转化为PWA的简单实践。( https://julian.is/article/progressive-web-apps/ )

• 基于Vue.js、Webpack、Material Design打造PWA应用：PWA应用已经受到了越来越多的关注与实践，而本系列文章则介绍了如何使用Vue.js、Webpack以及Material Design打造PWA应用。本系列文章包含七个部分，分别介绍了基于Vue.js、Webpack与Material Design Lite创建单页应用、使用Vue-Resource与VueFire进行数据交互、使用Service Workers实现离线模式、拍照、上传图片、实现推送、访问设备地址等内容。( https://parg.co/btH )

• 饿了么的PWA升级实践：本文介绍了饿了么利用Vue.js与PWA开发其移动Web端过程中的实践经验，包括PRPL模式的实现、多页面性能优化、用户体验优化等等内容。( https://parg.co/bMz )

• 大前端公共知识梳理：这些知识你都掌握了吗？：近年来，随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。其中特别是Web开发的领域，以单页应用为代表的富客户端应用迅速流行，各种框架理念争妍斗艳，百花竞放。Web技术的蓬勃发展也催生了一系列跨端混合开发技术，希望能够结合Web的开发便捷性与原生应用的高性能性；其中以Cordova、PWA为代表的方向致力于为Web应用尽可能添加原生体验，而以NativeScript、ReactNative、Weex为代表的利用Web技术或者理念开发原生应用。平心而论，无论哪一种开发领域或者技术，他们本质上都是进行图形用户界面(GUI)应用程序的开发，面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以MFC、Swing、WPF为主导的桌面应用程序开发时代，其术不同而道相似。( https://parg.co/byS )

• Progressive Web Apps入门教程：或许你已经对PWA有所耳闻，或者已经真实使用过某个PWA应用；本文并不着眼于详细介绍PWA的内部原理与工作机制，而是希望以简明扼要的语义引导读者构建PWA应用。本文依次介绍了如何测试自身应用的PWA评分、构建图标与说明、添加Service Worker、发布到Github Pages等；更多PWA相关资料参考 https://parg.co/bVh。

• 将现有的Angular应用转化为PWA：本教程将会介绍如何将现有的Angular应用逐步地转化为Progressive Web App，该教程适用于任何基于@angular/cli命令行工具创建的项目。本文首先介绍了Service Worker的作用、如何在项目中集成Service Worker、如何创建自定义的App Manifest；然后讨论了如何管理离线特征，最后说明了如何利用Google LightHouse进行应用的性能、可用性与最佳实践的测试，以及如何提升应用的性能。

• 构建混合渲染的PWA：PWA Directory 最初是采用了纯粹服务端渲染的PWA应用，它对于搜索引擎地支持比较好。不过这种应用并无法很好地进行客户端路由跳转，反而会带来一些额外的性能损耗；本文则依次介绍了如何使用JavaScript来托管路由跳转、如何利用Service Worker来进行数据缓存或者后台操作等内容。更多PWA相关资料参考这里。

#开源项目

• PWA Builder：随着PWA的日渐发展，Manifoldjs也转型成为PWA应用在线构建工具；该工具为用户提供了在线构建Manifest、自动生成多格式Icon、创建Service Worker、发布PWA等多种服务。( http://6me.us/VW9nG )

• Service Worker Mock：在PWA应用的开发中对于Service Worker的测试一直比较麻烦，每个文件都可能通过self.addEventListener产生副作用，并且Service Worker的运行环境也迥异于正常的Web或者Node环境。而本包则是通过注入伪造的Service Worker环境来方便测试。( https://parg.co/bCD )

• pwmetrics：基于LightHouse封装的能够在命令行中使用的PWA应用的性能评测工具。( https://github.com/paulirish/pwmetrics )

• hacker-news-pwas：基于不同的前端框架实现的符合PWA应用特性的Hacker News APP的合集，包括了常见的React、Angular、Vue、Preact等多个版本，并且均在Lighthouse评测中达到90以上的评分。( https://parg.co/biQ )