Google 2015 年發布的 Progressive Web App 現在怎麼樣了?

前端技術文章精選:每日精選國內外前端技術相關文章,今天是 Progressive Web App 技術專題,大致梳理了 PWA 相關的一些資料和文章。

Progressive Web App 是 Google 在 2015 提出來的下一代一種 Web 應用理念( Next Generation of Applications for the Web ) ,大白話來說就是一個利用現代瀏覽器的能力來達到類似 App 的用戶體驗的技術。

從Google官方網站介紹內容提煉一下,PWA 的一些基本能力分別是:

  • 漸進式:能確保每個用戶都能打開網頁
  • 響應式:PC,手機,平板,不管哪種格式,網頁格式都能完美適配
  • 離線應用:支持用戶在沒網的條件下也能打開網頁,這裡就需要 Service Worker 的幫助
  • APP:能夠像 APP 一樣和用戶進行交互
  • 常更新:一旦 Web 網頁有什麼改動,都能立即在用戶端體現出來
  • 安全:安全第一,給自己的網站加上一把綠鎖--HTTPS
  • 可搜索:能夠被引擎搜索到
  • 推送:做到在不打開網頁的前提下,推送新的消息
  • 可安裝:能夠將 Web 想 APP 一樣添加到桌面
  • 可跳轉:只要通過一個連接就可以跳轉到你的 Web 頁面

關於 Progressive Web App 的一些介紹:

1、Learn How to Develop the Next Generation of Applications for the Web

這是 PWA 的官方網站,裡面非常詳細描述了關於 PWA 的理念,當然是必看啊!

2、下一代 Web 應用模型 — Progressive Web App

@黃玄 寫的關於 PWA 的技術分析以及 PWA 技術在中國特殊環境下的一些擔憂,我簡單抄錄出來:

看看 Google 官方宣傳較多的 PWA 案例就會發現,FlipKart、Housing.com 來自印度;Lyft、華盛頓郵報來自北美;唯一來自中國的 AliExpress 主要開展的則是海外業務。

由於中國的特殊性,筆者在第一次聊到 PWA 時難免表現出了一定程度的悲觀:

  • 國內較重視 iOS,而 iOS 目前還不支持 PWA。
  • 國內的 Android 實為「安卓」,不自帶 Chrome 是一,可能還會有其他兼容問題。
  • 國內廠商可能並不會像三星那樣對推動自家瀏覽器支持 PWA 那麼感興趣。
  • 依賴 GCM 推送的通知不可用,Web Push Protocol 還沒有國內的推送服務實現。
  • 國內 webview 環境較為複雜(比如微信),黑科技比較多。

反觀印度,由於 Google 服務健全、標配 Chrome 的 Android 手機市佔率非常高,PWA 的用戶達到率簡直直逼 100%,也難免獲得無數好評與支持了。筆者奢望著本文能對推動 PWA 的國內環境有一定的貢獻。不過無論如何,PWA 在國內的春天可能的確會來得稍微晚一點了。

3、Progressive Web App Libraries in Production

這是Addy Osmani在今年2月底的分享(作者是 Chrome 團隊員工、TodoMVC 作者, 也是 Progressive Web App 技術的推動者)這個文章介紹了一些大廠商比如阿里巴巴國際版、印度電商 Flickart、華盛頓郵報、打車軟體Lyft 等在 PWA 上面的實踐和一些技術分析。

這是Addy Osmani 最近關於 PWA 的總結性質文章了。

4、PWA 在餓了么的實踐經驗

餓了么員工@王亦斯 的分享「餓了么 M 站」在 PWA 改造中的實踐經驗。涉及到的方面有:PWA 線上部署的準備工作、多頁應用的 prerender 優化、實踐過程中踩到的(和推進解決的)坑。

5、What app to build in 2017? Native, Hybrid or Progressive Web Apps?

國外一個天使投資機構組織的線下分享活動回顧,裡面有一些國外團隊對於 PWA 、原生 App 以及 Hybrid 方案的一些看法和分享。

6、Addy Osmani 2016年 10 月份寫的技術文章:

Progressive Web Apps with React.js: Part I?—?Introduction

Progressive Web Apps with React.js: Part 2?—?Page Load Performance

Progressive Web Apps with React.js: Part 3?—?Offline support and network resilience

Progressive Web Apps with React.js: Part 4?—?Progressive Enhancement

7、國外第一批嘗鮮支持 PWA 的公司寫的開發經驗,看了下時間居然是2015底的了!

  • Flipkart — how they built a progressive web app
  • Nolan Lawson — Pokedex
  • Jeff Posnick — Instant Loading with Service Workers and associated video

用@尤雨溪今天早上的微博總結下:

事實證明 Google 推東西的時候基本是無視中國市場的,印度這種超高 Android 佔有率的發展中國家才是 PWA 的目標

推薦閱讀:

Angular2 相比 React 技術棧有什麼具體的優勢?
深入Angular:組件(Component)動態載入
面向未來的前端數據流框架 - dob
React與Vue有什麼不同?

TAG:前端开发 | 前端框架 | 前端性能优化 |