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 來渲染的，環境有 iOS8、iOS9、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/
文章列表
留言列表
