前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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 )

總結

以上是生活随笔為你收集整理的前端每周清单半年盘点之 PWA 篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。