Progressive Web Apps入門

標籤：方式   idt   ack   nbsp   入門   site   工作   模型   sbt   

 

 PC和Mobile開發技術演化PC方向，從用戶端到富用戶端，到現在廣泛使用的Web。 移動方向，目前主要還是原生應用和Mobile Web，PWA相關技術是未來發展方向。 PWA的概念Progressive Web App (中文翻譯為：漸進式Web應用)帶來的體驗將網路應用的優點與原生應用的優點相結合。使用者在瀏覽器中第一次訪問時就能體會到它們的好處，因為不需要進行任何安裝。在使用者隨著時間的推移增進與應用的關係後，其功能會變得越來越強大。它即使在不可靠網路上也能快速載入、能夠發送相關推播通知、具有案頭表徵圖，並且可採用頂層全屏體驗的方式載入。 PWA的特點

• 漸進式 - 適用於選用任何瀏覽器的所有使用者，因為它是以漸進式增強作為核心宗旨來開發的。

• 自適應 - 適合任何機型：電腦裝置、行動裝置、平板電腦或任何未來裝置。

• 串連無關性 - 能夠藉助於服務背景工作執行緒在離線或低品質網路狀況下工作。

• 類似應用 - 由於是在 App Shell 模型基礎上開發，因此具有應用風格的互動和導航，給使用者以應用般的熟悉感。

• 持續更新 - 在服務背景工作執行緒更新進程的作用下時刻保持最新狀態。

• 安全 - 通過 HTTPS 提供，以防止窺探和確保內容不被篡改。

• 可發現 - W3C 清單和服務背景工作執行緒註冊範圍能夠讓搜尋引擎找到它們，從而將其識別為“應用”。

• 可再互動 - 通過推播通知之類的功能簡化了再互動。

• 可安裝 - 使用者可免去使用市集的麻煩，直接將對其最有用的應用“保留”在主畫面上。

• 可連結 - 可通過網址輕鬆分享，無需複雜的安裝。

PWA vs Native AppNative App：依賴啟動並執行平台作業系統，比如Android或iOS，需要將應用提交到市集，比如Apple App Store或者Google Play Store，國內各大市集等。PWA：不關係平台作業系統，運行在瀏覽器中，使用標準的Web開發技術，無需提交到市集進行審核，發布即用。PWA vs Web AppWeb App:使用標準的Web技術，但是在處理離線，推送上欠缺，不能產生案頭表徵圖等。 PWA：使用標準的Web開發技術，可以支援離線可用，通過service worker進行更新和緩衝，採用App shell模型基礎開發，介面和互動類似應用。支援推送，未來還支援操作裝置（調用網路攝影機、讀取陀螺儀等）。PWA關鍵技術 Manifest網路應用清單是一個 JSON 檔案，您（即開發人員）可以利用它控制在使用者想要看到應用的地區（例如行動裝置主畫面）中如何向使用者顯示網路應用或網站，指示使用者可以啟動哪些功能，以及定義其在啟動時的外觀。網路應用清單提供了將網站書籤儲存到裝置主畫面的功能。一個PWA的manifest.json樣本：

{  "name": "HackerWeb",  "short_name": "HackerWeb",  "start_url": ".",  "display": "standalone",  "background_color": "#fff",  "description": "A simply readable Hacker News app.",  "icons": [{    "src": "images/touch/homescreen48.png",    "sizes": "48x48",    "type": "image/png"  }, {    "src": "images/touch/homescreen72.png",    "sizes": "72x72",    "type": "image/png"  }, {    "src": "images/touch/homescreen96.png",    "sizes": "96x96",    "type": "image/png"  }, {    "src": "images/touch/homescreen144.png",    "sizes": "144x144",    "type": "image/png"  }, {    "src": "images/touch/homescreen168.png",    "sizes": "168x168",    "type": "image/png"  }, {    "src": "images/touch/homescreen192.png",    "sizes": "192x192",    "type": "image/png"  }],  "related_applications": [{    "platform": "web"  }, {    "platform": "play",    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"  }]}

 

 Service WorkerService Worker 是一段指令碼，與 Web Worker 一樣，也是在後台運行。作為一個獨立的線程，運行環境與普通指令碼不同，所以不能直接參与 Web 互動行為。Native App 可以做到離線使用、訊息推送、後台自動更新，Service Worker 的出現是正是為了使得 Web App 也可以具有類似的能力。頁面注入service worker程式碼範例： 

if (navigator.serviceWorker) {  navigator.serviceWorker.register(‘service-worker.js‘)  .then(function(registration) {    console.log(‘service worker 註冊成功‘);  }).catch(function (err) {    console.log(‘servcie worker 註冊失敗‘);  });}

 

 Responsive Web DesignRWD是一種網頁設計的技術做法，該設計可使網站在不同的裝置（從案頭電腦顯示器到行動電話或其他移動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和滾動等操作行為。第4-6點不在這裡展開，剛興趣的可以尋找相應資料進行學習。瀏覽器對PWA的支援越來越多的瀏覽器支援PWA的技術，特別是行動瀏覽器，比如Chrome，Firefox，UC行動瀏覽器等。 PWA案例欣賞國內的有新浪微博Lite版本：https://m.weibo.cn/beta  餓了麼移動版：https://h5.ele.me/msite/#pwa=true 國外有Twitter移動版本、Pinterest等產品。隨著各大瀏覽器對PWA技術的支援，未來會出現越來越多的PWA的應用。 參考連結 https://codelabs.developers.google.com/codelabs/your-first-pwapp/#01190000008880637https://zhuanlan.zhihu.com/p/25800461https://developer.mozilla.org/zh-CN/Apps/Progressivehttps://openweb.baidu.com/pwa-future/https://lavas.baidu.com/dochttps://zhuanlan.zhihu.com/p/25524382

Progressive Web Apps入門