前端每週清單半年盤點之 PWA 篇

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 PWA 相關的教程實踐與開源項目的盤點，能夠查看這裏得到往期清單或者其餘盤點篇。

教程實踐

• 工程實踐中的 PWA 利器清單: 本文是 Google Chrome 團隊的 Addy Osmani 所寫，介紹了這兩年來他們團隊開發或者推薦的一系列可以用於生產環境的 PWA 開發工具或者輔助庫。此文做者同時來列舉了目前在不少主流站點應用 PWA 以後帶來的一系列包括離線優先、首屏加載優化等提高用戶體驗的實踐案例。 ( suo.im/1IxGPJ

• 百度搜索對PWA的探索和初步實踐: 本文是百度搜索資深Web前端工程師沈洲在前端之巔微信羣中的分享整理總結而成，介紹了百度天氣 PWA 應用的開發實踐，本週還分享了PWA 實踐：從一個簡單的頁面開始與PWA實踐：理解和建立 Service Worker 腳本等 PWA 相關內容 。(6me.us/JS85s)

• PWA 在餓了麼的實踐經驗：本篇旨在和你們分享「餓了麼 M 站」（h5.ele.me/msite/）在 PWA 改造中的實踐經驗。涉及到的方面有：PWA 線上部署的準備工做、多頁應用的 prerender 優化、實踐過程當中踩到的（和推動解決的）坑。( parg.co/bO7 )

• Progressive Web Apps：響應式 Web 設計的延伸：本文是對於 Progressive Web Apps 概念、設計理念與簡單實踐的介紹，做者介紹了 PWA 應用應該具有的基本特性、性能與體驗上的要求以及如何將現有站點轉化爲 PWA 的簡單實踐。( 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 實現離線模式、拍照、上傳圖片、實現推送、訪問設備地址等內容。( parg.co/btH )

• 餓了麼的 PWA 升級實踐：本文介紹了餓了麼利用 Vue.js 與 PWA 開發其移動 Web 端過程當中的實踐經驗，包括 PRPL 模式的實現、多頁面性能優化、用戶體驗優化等等內容。( parg.co/bMz )

• 大前端公共知識梳理：這些知識你都掌握了嗎？：近年來，隨着移動化聯網浪潮的洶涌而來與瀏覽器性能的提高，iOS、Android、Web 等前端開發技術各領風騷，大前端的概念也日漸成爲某種共識。 其中特別是 Web 開發的領域，以單頁應用爲表明的富客戶端應用迅速流行，各類框架理念爭妍鬥豔，百花競放。Web 技術的蓬勃發展也催生了一系列跨端混合開發技術，但願可以結合 Web 的開發便捷性與原生應用的高性能性；其中以 Cordova、PWA 爲表明的方向致力於爲 Web 應用盡量添加原生體驗，而以 NativeScript、ReactNative、Weex 爲表明的利用 Web 技術或者理念開發原生應用。 平心而論，不管哪種開發領域或者技術，他們本質上都是進行圖形用戶界面（GUI）應用程序的開發，面對的問題、思考的方式、架構的設計很大程度上仍然能夠回溯到當年以 MFC、Swing、WPF 爲主導的桌面應用程序開發時代，其術不一樣而道類似。( 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 等多種服務。( 6me.us/VW9nG )

• Service Worker Mock：在 PWA 應用的開發中對於 Service Worker 的測試一直比較麻煩，每一個文件均可能經過self.addEventListener產生反作用，而且 Service Worker 的運行環境也迥異於正常的 Web 或者 Node 環境。而本包則是經過注入僞造的 Service Worker 環境來方便測試。( parg.co/bCD )

• pwmetrics：基於 LightHouse 封裝的可以在命令行中使用的 PWA 應用的性能評測工具。( github.com/paulirish/p… )

• hacker-news-pwas：基於不一樣的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，而且均在 Lighthouse 評測中達到 90 以上的評分。( parg.co/biQ )