PWA系列：第一章 PWA使用場景分析

前言

2018年4月份起微軟的應用商店上線第一批PWA應用以來，近一年隨着safari開始支持ServiceWorkers，國內瀏覽器廠商也逐步開始大力加持，到本課程發稿起95%以上的瀏覽器都支持了PWA的橫幅安裝。PWA輕應用也逐漸被廣大站點使用和推廣。

PWA輕應用的在線或離線的環境中更好的模擬Navive App，它充分的發揮了離線緩存，Web Service，Serivce Workers、manifest等技術的綜合應用。它的開發費用低，推廣成本低廉、尤爲版本迭代的維護更容易的特性。使得它更受開發廠商的熱愛，尤爲管理系統beta版，行銷模型、引導APP安裝等場景更有優異表現。
咱們的課程從基礎入手，你只要掌握基礎的**ECMAScript5的基礎**，

課程從零開始梳理各個知識點。從服務端離線緩存實現，用戶代理的脫機緩存，CacheStorage，Web Service，Service Workers，Promise、服務器客戶端消息等專題，共十二章。幫助開發者從零理解PWA的應用。

優缺點

PWA 在2019年看來已是一個不年輕的技術了，PWA全稱Progressive Web App，即漸進式WEB應用。他使用戶在瀏覽網頁的同時，經過用戶代理（瀏覽器）觸發，直接在移動終端主屏生成一個應用。優勢在於：

• 開發成本低，現階段前端打包已經徹底能夠實現三端統一的代碼維護（android,ios,web），但還依賴在市場或store推廣，經過PWA技術，能夠快速在用戶主屏生成應用；
• 推廣成本低廉：能夠經過短信，即時聊天，廣告直接安裝主屏應用。粘性大；
• 版本迭代容易維護，只要處理緩存無需依賴任何設備；
• 經過PWA能夠協助APP安裝和推廣；
• 通知推送，在特定瀏覽器環境中模擬原生的信息推送

缺點在於：

• 沒法主動安裝到用戶系統主屏，根據PWA協議規範用戶須要2次訪問網站，並間隔大於5分鐘。用戶代理將提示用戶是否安裝到主屏。但實際應用測試中這種響應並不能統一。有些瀏覽器在知足PWA條件的頁面能夠直接呼出安裝橫幅，有些則沒法控制呼出時間；
• 用戶使用習慣性，用戶熱度不夠，或不習慣這種操做模式
• iOS系統須要用戶操做，並不能一鍵安裝;
• 更多的原生功能不能被PWA使用，雖然在2017年Google就宣佈PWA將在Android上得到和原生應用同樣的功能體驗，但僅僅Chrome可以使用PWA的功能，其餘瀏覽器仍是可望不可即。像sync同步功能等只有Chrome纔在實現。技術開發中不得不考慮更多兼容性。

功能	Android	iOS
使用內存	>50M	<50M
地理位置	√	√
傳感器	√	√
攝像頭	√	√
音頻輸出	√	√
語音合成	√	√
WebAssembly	√	√
WebRTCWebGL	√	√
訪問藍牙	√	x
Web App Banner	√	x
推送通知	√	x
打開其餘應用	√	x

下面是支持PWA的瀏覽器：

場景應用

隨着手機市場用戶的日益活潑，圍繞着手機開發的各類APP也層出不窮，PWA是一種輕應用的形態存在。它到底更適合哪一種方面的使用和推廣呢：筆者也在近幾年間開發和跟蹤多款輕應用的發展來敘述如下幾種場景：

場景一： 某大型商超管理平臺在2018年要開發基於移動端的管理體系，在梳理業務流程的過程當中，發現業務流程很是複雜，採購模型各地市都有差別，地堆等活動方案複雜並且變化量大，各個權限終端業務模型很是龐大。預計開發beta版的週期可能要10個月以上。初期版本迭代會成爲大問題，iOS可能延後接入。將致使至少有20%的員工是沒法使用管理系統。後期採用了PWA接入的方式。前端採用VUE開發，大大提升的應用速度，定型後使用WEEX生成客戶端。

場景二：中小型企業的定製化管理系統。近幾年隨着微信企業號，釘釘等面向企業管理模型，能夠提供更優秀的企業自動化解決方案。現實中不少企業仍是依賴之前的很是規的管理系統。某地扎啤供應商，2006年自主開發業務管理系統。2014年創建移動端的業務管理系統。2018年採用PWA技術快速的把管理系統生成桌面應用。下降了二次開發成本，作到低投入高產出的管理型回報

場景三：某在線財經網站，用戶訪問WEB,經過PWA技術，快速生成選中的股票到桌面。用戶能夠經過主屏快速訪問單隻股票,處理買入，賣出。大大提升了產品粘性。

場景四：金融貸款平臺，經過大數據的短信精準定位，短信內容點擊後跳轉瀏覽器。直接使用PWA技術在客戶端生成主屏APP。節省APP推廣費用，大大下降客戶跳出率。提高了到達率。

場景五：體驗性子應用，Facebook在PWA計劃後，就推出了本身的PWA。後續新功能業務發展上也大大選用了PWA，從服務或社交媒體平臺得到完整的體驗。開始部署階段就嘗試經過PWA在用戶主屏生成新的入口，慢慢把應用獨立出平臺。

場景六：中小型網站的獨立入口，國內部分中小型網站雖然有獨立的APP，但安裝量和粘性都很低，採用PWA技術，利用現有流量，快速佔領用戶主屏。

經過以上案例不難看出PWA具備快速部署的功能。對於Native App 來講，其最大的問題是要由軟件市場安裝和推廣，當用戶經過搜索找到某個應用時，他須要下載App後才能享受內容。當再次使用內容時仍是須要打開App。下降了用戶熱情，隨着移動互聯網的發展。更個性的桌面應用將成爲時代主流。自定義本身的應用入口，甚至自定義本身的應用市場，和朋友一塊兒分享應用未來到。PWA技術遵循W3C標準，徹底開放。更容易被各個終端瀏覽器接受。打破市場枷鎖。

自2015年以來，PWA 相關的技術不斷升級優化，在用戶體驗和用戶留存兩方面都提供了很是好的解決方案。PWA 能夠將 Web 和 App 各自的優點融合在一塊兒：漸進式、可響應、可離線、實現相似 App 的交互、即時更新、安全、能夠被搜索引擎檢索、可推送、可安裝、可連接。
各大瀏覽器廠商也開始支持PWA，隨着PWA安裝的放開，首次加載便可安裝，國內瀏覽器廠商也紛紛展開全面技術覆蓋。

來源: https://wosclass.com/2019/03/07/%E7%AC%AC%E4%B8%80%E7%AB%A0-pwa%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%E5%88%86%E6%9E%90/