從今以后，我將不再創(chuàng)建任何原生應用。今后我的所有應用都將是漸進式的 Web 應用。漸進式的 Web 應用是被設計為比原生移動應用更無縫地運行在移動設備上的 Web 應用程序。

這里的“更無縫地”是什么意思？我指的是大部分網絡流量來自于移動設備，用戶平均每個月安裝大約 0-3個應用。這意味著人們不會花太多時間在應用商店中尋找新的應用來試用，但是他們會在網上花大量時間發(fā)現(xiàn)和使用你的應用。

漸進式 Web 應用程序開始時候跟其它 Web 應用一樣，但是當用戶回到應用，通過使用，證明他們對更頻繁使用該應用感興趣時，瀏覽器會邀請用戶將應用安裝到主屏上。PWA 還會像原生應用一樣，從推送通知中受益。

這才是它的有趣之處。與其它原生應用一樣，漸進式 Web 應用會有它自己的主屏幕圖標，當你點擊它時，應用不需要瀏覽器就會啟動。這意味著沒有 URL 地址欄和 Web 導航 UI，只有電話的狀態(tài)欄，你的應用是以幾乎全屏的樣式出現(xiàn)。

這一天總算來臨了。這些技術都不是特別新的 - 除了新興的跨平臺標準值得注意以外。

一些歷史

iPhone 出現(xiàn)的早期是沒有應用商店的。喬布斯想讓開發(fā)者用標準 Web 技術創(chuàng)建 iPhone 應用。有時候有遠見的人是完全正確的，但是往往是提前了十年。回顧一下兩年前，福布斯稱喬布斯推薦的為 iPhone 創(chuàng)建 Web 應用是他犯下的“最大錯誤”，因為原生應用取得了超級成功。

如今再回顧，看起來很明顯，他確實是錯了某些東西 - 只是高估了當時已有的 Web 標準的能力。

十年后，移動 Web 標準現(xiàn)在支持很多在原生應用中才能找到的功能，而喬布斯對移動 Web 應用程序的最初愿景現(xiàn)在正被其他所有人認真地追求。蘋果已經支持了 “apple-mobile-web-capable” Web 應用，幾乎從使用這種 meta 標記幫助 iOS 設備找到像合適的圖標等事情開始，你就可以把這種 Web 應用添加到主屏了。

其它廠商也隨之效仿，每個都創(chuàng)建了自己的 meta 標記集合，來宣告具備移動 Web 應用的能力，但是直到最近，一個跨平臺的規(guī)范才被引入。現(xiàn)在，跨平臺移動 Web 應用才最終成為真事。

實現(xiàn)該標準的應用被稱為漸進式 Web 應用，不要把它與足以導致混淆的相似術語混淆，比如漸進式增強或者響應式應用。

什么是漸進式 Web 應用?

漸進式 Web 應用只是被設計為對移動端友好的 Web 應用程序。如果瀏覽器看到用戶想繼續(xù)使用應用，它會提示用戶將其安裝到主屏幕上、dock 欄上，等等。但是，要有資格安裝到這些地方，應用必須滿足特定條件：

• 必須是 HTTPS (參見 let’s encrypt)

• 帶有所需屬性的有效 manifest（Web Manifest 校驗器）

• 必須有 service worker

• Manifest start_url 必須一直加載，即使在離線時（使用 service worker）

• 必須自帶導航

• 對于不同屏幕大小和方向（橫屏豎屏）必須是響應式的

當然，使用 HTTPS 以及針對離線用戶的 Service Worker 對任何現(xiàn)代應用都是好的實踐。

很多應用創(chuàng)建者看起來忘記的是，如果創(chuàng)建一個漸進式 Web 應用，必須能在沒有瀏覽器邊框以及瀏覽器導航手勢的情況下，也能在應用程序中導航。移動設備假設你已經將自己的導航內置到應用了。

例如，如果有一個 about 頁，該頁必須有一個返回到應用 UI 的鏈接。否則為了回到應用的主界面，用戶就不得不關閉應用，然后重新打開。

漸進式 Web 應用指南

關于創(chuàng)建漸進式 Web 應用程序的很多信息已經遍布網絡了，但是大部分都是過時的，并且很多只包含創(chuàng)建一個漸進式 Web 應用所需知識的一小部分。下面我們來解決此問題。

開啟 HTTPS

要開啟 HTTPS，你將需要：

• 一個 Web 服務器 (我推薦 DigitalOcean)

• 一個 SSL 證書

• 一個強大的 Diffie-Hellman 組（sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048）

• Web 服務器的 TLS/SSL 配置 (Ubuntu 上的 Nginx 指令)

Manifest 文件

manifest 文件被稱為 manifest.json，它很簡單。由名稱（short_name 用于主屏圖標，可選的 name 用于更完整的名稱）、啟動 url、一個大的圖標列表（如果不同平臺需要不同圖標大小，你就可以支持大范圍）組成。對于 Android 和 iOS，將需要：

• 36x36

• 48x48

• 60x60 (iPhone 上的蘋果觸摸圖標)

• 72x72

• 76x76 (iPad 上的蘋果觸摸圖標)

• 96x96

• 120x120 (iPhone retina 上的蘋果觸摸圖標)

• 152x152 (iPad retina 上的蘋果觸摸圖標)

• 180x180 (iOS 8+ 上的蘋果觸摸圖標)

• 192x192

• 512x512

我挑出蘋果觸摸圖標，是因為它們的名稱很有名： apple-touch-icon-180x180.png。

這里的 180x180 可以被任何指定分辨率替換。使用眾所周知的名稱并非必需的，但是如果你忘記了包含這個標記，但是你用了眾所周知的名稱，那么 iOS 依然可以通過在 Web 應用的根目錄搜尋，從而找到該圖標。

iOS 圖標不支持透明度。

示例 manifest.json:

有些功能你應該知道。theme_color 設置在安卓應用之間切換時所用的狀態(tài)欄和窗口標題欄的顏色。

background_color 設置用在閃屏上的顏色。在安卓上，閃屏將是由 name 屬性（長的名字）和 background_color 之上的大圖標組成。

Manifest 并非到處都可以

我第一次創(chuàng)建漸進式 Web 應用程序時，對它按預期在 Chrome for Android 上運行感到興奮不已。但是當我在 Safari/iOS 中運行時，它貌似不能工作了。原因是，盡管移動版的 Safari 用自定義的標記來支持這些功能已經有十來年左右的時間了，但是它依然還沒有支持 Web manifest 規(guī)范。

所以，除了對支持了的瀏覽器使用 manifest 文件外，對于 iOS 你還將需要特殊的 meta 標記，從這個標記開始，會不用瀏覽器邊框就加載 app：

但是，這里有很多標記要記住，可能還有另一種方法做可以實現(xiàn)。這里有一個 web manifest polyfill 可以讀取你的 manifest.json 文件，并且給對舊式移動瀏覽器、iOS、甚至 Windows Phone 和 Firefox OS 添加上廠商特定的標記。

Service Worker

Service Worker 是一個最近的 Web 平臺規(guī)范，允許在本地緩存資源，從而確保應用即使在用戶沒有連接到互聯(lián)網的時候依然可以工作。

其工作機制過劫持網絡請求，在用戶離線時從本地緩存供應響應。不過，Service Worker要做的事情比這個多的多。它是一套相當復雜的低層 API，允許對優(yōu)化用戶體驗做很多事情，不管是在線還是離線。

要入門的話，我打算推薦一個很簡單的較高級的抽象。一個很小的叫做 UpUp 的腳本。使用 UpUp 是很簡單的。這里有一個來自 UpUp 的示例：

content-url 是用戶離線時要加載的 URL。我就用應用的根 URL，而且它工作的不錯。

assets（素材）是為了讓應用正確運行而需要本地緩存的文件。記住要確保包含所有圖像、圖標、CSS，甚至默認的 AJAX 請求響應。正如你所見，任何文件類型都應該工作。

最終，你也許想能對離線資源緩存的控制比 UpUp 提供的更多。當這一天到來時，這里有一些很不錯的教育資源可以幫助你入門：

• 免費的 Google Udacity 課程

• 深入闡述的 Service Worker 手冊。

測試

用 Chrome Devtools 調試物理設備

將設備插到一個 USB 連接線上。在安卓設備上打開 USB 調試功能。查看遠程調試指令。你可能用 Google Around 來解決如何將安卓手機設置為開發(fā)者模式，來啟用遠程調試。

一旦打開開發(fā)者模式，就可以看到設置模式中的開發(fā)者選項顯示出來。打開它，確保 USB 調試是打開的。

訪問 chrome://inspect#devices。按下檢查按鈕，會得到應用的全部開發(fā)工具。

驗證 service worker

訪問 chrome://inspect/#service-workers 來驗證你的 service worker 是否正確運行。

驗證安裝到主頁

如果想略過用戶約定檢查，總是得到安裝到主頁選項，就在 Chrome flags 中打開 “Bypass user engagement checks”:

chrome://flags/

要在桌面上測試的話，還應該選中 “Enable add to shelf”。

原生應用還沒有滅亡

漸進式 Web 應用現(xiàn)在已經有了原生應用的大部分能力，安裝沖突保證也原生應用更低，你將不再需要擔心應用商店把關者，也將不必為在應用商店中的優(yōu)先權向任何人支付 30% 的應用程序銷售稅。

但是可能很長一段時間，原生應用依然具有移動 Web 應用將不具備的一些能力。

尤其是，大多數(shù)傳感器和硬件集成規(guī)格在很多瀏覽器中是受限制的，或者不支持的。并且，即使是基礎功能（比如設備方向 API）也已經經歷了重大修改，不同的瀏覽器中存在有多個版本的規(guī)格，要安全使用的話，需要一些繁瑣的邏輯或者補?。╬olyfills）。

具有諷刺意味的是，盡管蘋果開創(chuàng)了很多漸進式 Web 技術，但是 iOS 貌似是采納漸進式 Web 應用的唯一主要障礙。他們目前不支持 Service Worker，只暗示對添加支持有點興趣。

值得慶幸的是，有一個 Cordova 插件可以給 iOS 上的混合 app 添加 service worker。

即便如此，我也不指望所有 Web 瀏覽器廠商以對用戶特別友好的方式實現(xiàn)安裝提示。用今天的規(guī)范，用戶也許被也許不被提示安裝你的應用，并且如果他們在應用商店中搜索你的應用，除非你也通過傳統(tǒng)的應用商店過程出版了一個混合 app，否則他們是找不到的。

短期內，我們也許要堅持使用 Cordava 或者類似的東西來填補 iOS 設備上這一空白，但是對規(guī)范的良好支持正迅速在安卓設備上鋪開。如果你有臺運行 Chrome 的最新安卓電話，那么這就有一個你的應用不需要求助于 Cordova 構建就能工作的好機會。

如果你認為缺乏蘋果的支持會拖你后退，請記住安卓現(xiàn)在占有 86% 的全球移動操作系統(tǒng)市場。即使你為了對 86% 的世界利用較低的安裝摩擦，而不得不用 Cordova 修補 iOS，創(chuàng)建 PWA 也是值得的。

總結

短期內，你可能依然想開發(fā)混合 APP，這樣就可以利用一些用 Web 標準依然用不了的設備 API。

在創(chuàng)建第一個漸進式 Web 應用程序后，我對未來充滿希望，但是我也意識到它不是完美的。讓一切平滑地跨所有設備平臺運行確實還需要一段時間。你還需要記住，你還會錯失用戶在應用商店中熟悉的可發(fā)現(xiàn)性功能以及熟知的安裝過程。

希望瀏覽器廠商會追上這個愿景，最終對漸進式 Web 應用會有一個比原生應用更好的安裝體驗?？雌饋硎虑檎@個方向走。

當然，原生應用會留存一段時間，但是如果你為了創(chuàng)建原生應用，正忙于學習 Swift 或者 Java，可能要考慮改為學習 JavaScript。