前端每周清单半年盘点之 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/pro... )
• 基于 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/... )
• hacker-news-pwas：基于不一样的前端框架实现的符合 PWA 应用特性的 Hacker News APP 的合集，包括了常见的 React、Angular、Vue、Preact 等多个版本，而且均在 Lighthouse 评测中达到 90 以上的评分。( https://parg.co/biQ )