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

王下邀月熊發表於2017-08-29
前端

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

相關文章