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

教程實(shí)踐

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

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

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

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

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

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

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

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

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

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

開(kāi)源項(xiàng)目

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。