摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單中的 PWA 相關(guān)的教程實踐與開源項目的盤點，可以查看這里獲得往期清單或者其他盤點篇。

工程實踐中的 PWA 利器清單: 本文是 Google Chrome 團隊的 Addy Osmani 所寫，介紹了這兩年來他們團隊開發(fā)或者推薦的一系列能夠用于生產(chǎn)環(huán)境的 PWA 開發(fā)工具或者輔助庫。此文作者同時來列舉了目前在很多主流站點應(yīng)用 PWA 之后帶來的一系列包括離線優(yōu)先、首屏加載優(yōu)化等提升用戶體驗的實踐案例。 ( http://suo.im/1IxGPJ

百度搜索對PWA的探索和初步實踐: 本文是百度搜索資深Web前端工程師沈洲在前端之巔微信群中的分享整理總結(jié)而成，介紹了百度天氣 PWA 應(yīng)用的開發(fā)實踐，本周還分享了PWA 實踐：從一個簡單的頁面開始與PWA實踐：理解和創(chuàng)建 Service Worker 腳本等 PWA 相關(guān)內(nèi)容 。(http://6me.us/JS85s)

PWA 在餓了么的實踐經(jīng)驗：本篇旨在和大家分享「餓了么 M 站」（https://h5.ele.me/msite/）在 PWA 改造中的實踐經(jīng)驗。涉及到的方面有：PWA 線上部署的準備工作、多頁應(yīng)用的 prerender 優(yōu)化、實踐過程中踩到的（和推進解決的）坑。( https://parg.co/bO7 )

Progressive Web Apps：響應(yīng)式 Web 設(shè)計的延伸：本文是對于 Progressive Web Apps 概念、設(shè)計理念與簡單實踐的介紹，作者介紹了 PWA 應(yīng)用應(yīng)該具備的基本特性、性能與體驗上的要求以及如何將現(xiàn)有站點轉(zhuǎn)化為 PWA 的簡單實踐。( https://julian.is/article/pro... )

基于 Vue.js、Webpack、Material Design 打造 PWA 應(yīng)用：PWA 應(yīng)用已經(jīng)受到了越來越多的關(guān)注與實踐，而本系列文章則介紹了如何使用 Vue.js、Webpack 以及 Material Design 打造 PWA 應(yīng)用。本系列文章包含七個部分，分別介紹了基于 Vue.js、Webpack 與 Material Design Lite 創(chuàng)建單頁應(yīng)用、使用 Vue-Resource 與 VueFire 進行數(shù)據(jù)交互、使用 Service Workers 實現(xiàn)離線模式、拍照、上傳圖片、實現(xiàn)推送、訪問設(shè)備地址等內(nèi)容。( https://parg.co/btH )

餓了么的 PWA 升級實踐：本文介紹了餓了么利用 Vue.js 與 PWA 開發(fā)其移動 Web 端過程中的實踐經(jīng)驗，包括 PRPL 模式的實現(xiàn)、多頁面性能優(yōu)化、用戶體驗優(yōu)化等等內(nèi)容。( https://parg.co/bMz )

大前端公共知識梳理：這些知識你都掌握了嗎？：近年來，隨著移動化聯(lián)網(wǎng)浪潮的洶涌而來與瀏覽器性能的提升，iOS、Android、Web 等前端開發(fā)技術(shù)各領(lǐng)風騷，大前端的概念也日漸成為某種共識。 其中特別是 Web 開發(fā)的領(lǐng)域，以單頁應(yīng)用為代表的富客戶端應(yīng)用迅速流行，各種框架理念爭妍斗艷，百花競放。Web 技術(shù)的蓬勃發(fā)展也催生了一系列跨端混合開發(fā)技術(shù)，希望能夠結(jié)合 Web 的開發(fā)便捷性與原生應(yīng)用的高性能性；其中以 Cordova、PWA 為代表的方向致力于為 Web 應(yīng)用盡可能添加原生體驗，而以 NativeScript、ReactNative、Weex 為代表的利用 Web 技術(shù)或者理念開發(fā)原生應(yīng)用。 平心而論，無論哪一種開發(fā)領(lǐng)域或者技術(shù)，他們本質(zhì)上都是進行圖形用戶界面（GUI）應(yīng)用程序的開發(fā)，面對的問題、思考的方式、架構(gòu)的設(shè)計很大程度上仍然可以回溯到當年以 MFC、Swing、WPF 為主導的桌面應(yīng)用程序開發(fā)時代，其術(shù)不同而道相似。( https://parg.co/byS )

Progressive Web Apps 入門教程：或許你已經(jīng)對 PWA 有所耳聞，或者已經(jīng)真實使用過某個 PWA 應(yīng)用；本文并不著眼于詳細介紹 PWA 的內(nèi)部原理與工作機制，而是希望以簡明扼要的語義引導讀者構(gòu)建 PWA 應(yīng)用 。本文依次介紹了如何測試自身應(yīng)用的 PWA 評分、構(gòu)建圖標與說明、添加 Service Worker、發(fā)布到 Github Pages 等；更多 PWA 相關(guān)資料參考 https://parg.co/bVh 。

將現(xiàn)有的 Angular 應(yīng)用轉(zhuǎn)化為 PWA：本教程將會介紹如何將現(xiàn)有的 Angular 應(yīng)用逐步地轉(zhuǎn)化為 Progressive Web App，該教程適用于任何基于 @angular/cli 命令行工具創(chuàng)建的項目。本文首先介紹了 Service Worker 的作用、如何在項目中集成 Service Worker、如何創(chuàng)建自定義的 App Manifest；然后討論了如何管理離線特征，最后說明了如何利用 Google LightHouse 進行應(yīng)用的性能、可用性與最佳實踐的測試，以及如何提升應(yīng)用的性能。

構(gòu)建混合渲染的 PWA：PWA Directory 最初是采用了純粹服務(wù)端渲染的 PWA 應(yīng)用，它對于搜索引擎地支持比較好。不過這種應(yīng)用并無法很好地進行客戶端路由跳轉(zhuǎn)，反而會帶來一些額外的性能損耗；本文則依次介紹了如何使用 JavaScript 來托管路由跳轉(zhuǎn)、如何利用 Service Worker 來進行數(shù)據(jù)緩存或者后臺操作等內(nèi)容。更多 PWA 相關(guān)資料參考這里。

PWA Builder：隨著 PWA 的日漸發(fā)展，Manifoldjs 也轉(zhuǎn)型成為 PWA 應(yīng)用在線構(gòu)建工具；該工具為用戶提供了在線構(gòu)建 Manifest、自動生成多格式 Icon、創(chuàng)建 Service Worker、發(fā)布 PWA 等多種服務(wù)。( http://6me.us/VW9nG )

Service Worker Mock：在 PWA 應(yīng)用的開發(fā)中對于 Service Worker 的測試一直比較麻煩，每個文件都可能通過self.addEventListener產(chǎn)生副作用，并且 Service Worker 的運行環(huán)境也迥異于正常的 Web 或者 Node 環(huán)境。而本包則是通過注入偽造的 Service Worker 環(huán)境來方便測試。( https://parg.co/bCD )

pwmetrics：基于 LightHouse 封裝的能夠在命令行中使用的 PWA 應(yīng)用的性能評測工具。( https://github.com/paulirish/... )

hacker-news-pwas：基于不同的前端框架實現(xiàn)的符合 PWA 應(yīng)用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，并且均在 Lighthouse 評測中達到 90 以上的評分。( https://parg.co/biQ )