PWA - 漸進式網絡應用初認識

Progressive Web Apps 簡稱PWA,是一種接近原生用戶體驗的漸進加強的web-app.從瀏覽器演進而來，沉浸式的體驗，改進web的性能低下等。是Google 在2015年提出，今年才推廣開來。其宗旨是漸進加強，再也不有媲美原生應用的想法，而是讓 WebApp 變得更加對移動環境友好，體驗天然順滑。

 

目前移動web網頁的體驗 

1. 手機桌面入口不夠便捷； 固然如今能夠添加到主屏幕
2. 沒網絡就沒響應，不具有離線能力； 
3. 不像APP同樣能進行消息推送。 

 

PWA帶來的新特性

Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. 
Connectivity independent - Service workers allow work offline, or on low quality networks.  能夠離線，使用service worker技術，即便網頁關閉，PWA 仍然能夠在後臺運行獲取數據更新
App-like - Feel like an app to the user with app-style interactions and navigation.  
Fresh - Always up-to-date thanks to the service worker update process.  
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. 
Discoverable - Are identifiable as 「applications」 thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.  能夠推送消息
Installable - Allow users to 「keep」 apps they find most useful on their home screen without the hassle of an app store.  能夠添加到home屏幕
Linkable - Easily shared via a URL and do not require complex installation.  便於分享

 

瀏覽器支持狀況

基於 Chromium 的瀏覽器 Chrome 和 Opera 已經徹底支持 PWA 了，Firefox 和微軟的 Edge 正在開發中，水果公司的 Safari 最近剛剛表達了可能會支持 PWA。從長久的角度看，只要 Google 不斷推進一些網站往 PWA 轉型，其餘的瀏覽器或者競爭對手也就會天然跟風上船。

 

 

怎麼實現？

實現 PWA 所須要的特性，主要是圍繞着 Service Workers 的基於事件的 cache 系統和消息推送的一套新的 API，此外還須要定義 manifest.json 來定義安裝行爲或是樣式等。

 

體驗PWA

首先，將你的chrome升級到最新的55版本

1 合集

https://pwa.rocks/，這個網址有不少pwa應用。其中不乏 The Washington Post，Flip Board，AliExpress，Wikipedia，Gmail，Booking 這樣的大頭

2 阿里巴巴

http://m.alibaba.com

 

和Hybrid App的區別

Hybrid App雖然看上去是一個Native App，但只有一個UI WebView + Native的殼子，裏面訪問的是一個Web App。而PWA是真正的Web App。

 

和微信小程序的區別

在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10
在 Android 上，小程序的 javascript 代碼是經過 X5 JSCore來解析，是由 X5 基於 Mobile Chrome 37 內核來渲染的
在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的

 

小程序入口在微信裏面，並不能添加到主屏幕，不能離線，不能推送。小程序的優點就是龐大的用戶羣，推廣起來很是好。

總而言之，PWA是將來的趨勢。

 

 

參考文章：

1. 咱們真的須要網頁版App嗎？Google PWA的困局

2. https://github.com/hemanth/awesome-pwa#tutorials

3. https://developers.google.cn/web/progressive-web-apps/