PWA 背景

01-29

首先，PWA 是啥？ PWA 全稱是: Progressive Web Apps。這是 2016 年，Google I/O 大會上提出一個 Next Web Generation 的概念。這並不是描述一個技術，而是一些技術的合集。PWA 是專門應對手機 Web 開發而提出的，通過新技術的成熟，實現最好的 Web + 手機 APP。也就是說，能讓你在使用 Web 的時候感覺像是在使用 APP。

如果是初創公司想推出一款新的產品，首選型是 Native APP，那麼，可以預計該公司在吸引流量的時候，一定會感覺到這真 TM 難。不過，我這也並不是說，你選型使用 Web 就一定容易。本質上還是需要該產品打磨的足夠好才行。不過，我們話說回來，在初期，Native APP 和 Web APP，在傳播上的難度還真不是一回事。

首先，Native APP 需要經過反覆審核，滿足不同平台的各種奇怪機制以後，才能正式上線。然後到用戶端，小白用戶通過公司的宣傳了解到該 APP 之後，他需要經過去各個 APP Store 搜索，找到之後再下載，下載之後再安裝，安裝之後再授權，下了差不過幾十兆(MB)的 APP 之後，才正式的能使用。

那 Web APP 就簡單嗎？恩，相比上面那些繁瑣的步驟來說確實簡單，我們先不說 Web 不需要審核（在中國，有一種痛，叫做備案），最能體現它優勢的地方就在於，只需要一個網址即可（任何平台都會自帶瀏覽器）。那有人可能會問，但，Web 並不能在桌面端創建啥 icon 來直接跳到網址上去啊？不過，這只是針對以前的 Web，PWA 實際上就是幫助我們完成上面提到的事，並且它做的更多。

話不多說，先給大家放一個，將 Web 添加到桌面的 gif 感受一下，並且添加之後，重新打開，會發現 Web 展示的效果變為全屏展示了！

PWA 原則

當然，並不是所有的 Web 都叫做 PWA。根據 google 定義，PWA 應該具有一下特性：

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

可以看出 Web 小弟想要成為 PWA 黑幫老大還是有一定難度。那 PWA 到底又需要哪些技術呢？直接上一張圖吧：

入門指南

相關學習，可以參考 JimmyVV/PWA-cookbook。或者可以直接參閱我的 blog：

PWA guider
響應式開發
Service Worker
Web 推送技術
PWA 實踐指導