來源：眾成翻譯 譯者：網(wǎng)絡(luò)埋伏紀(jì)事

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

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

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

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

這一天總算來臨了。這些技術(shù)都不是特別新的 - 除了新興的跨平臺標(biāo)準(zhǔn)值得注意以外。

一些歷史

iPhone 出現(xiàn)的早期是沒有應(yīng)用商店的。喬布斯想讓開發(fā)者用標(biāo)準(zhǔn) Web 技術(shù)創(chuàng)建 iPhone 應(yīng)用。有時候有遠(yuǎn)見的人是完全正確的，但是往往是提前了十年?；仡櫼幌聝赡昵埃２妓狗Q喬布斯推薦的為 iPhone 創(chuàng)建 Web 應(yīng)用是他犯下的“最大錯誤”，因為原生應(yīng)用取得了超級成功。

如今再回顧，看起來很明顯，他確實是錯了某些東西 - 只是高估了當(dāng)時已有的 Web 標(biāo)準(zhǔn)的能力。

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

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

實現(xiàn)該標(biāo)準(zhǔn)的應(yīng)用被稱為漸進式 Web 應(yīng)用，不要把它與足以導(dǎo)致混淆的相似術(shù)語混淆，比如漸進式增強或者響應(yīng)式應(yīng)用。

什么是漸進式 Web 應(yīng)用?

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

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

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

• 必須有 service worker

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

• 必須自帶導(dǎo)航

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

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

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

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

漸進式 Web 應(yīng)用指南

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

開啟 HTTPS

要開啟 HTTPS，你將需要：

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

• 一個 SSL 證書

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

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

Manifest 文件

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

• 36x36

• 48x48

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

• 72x72

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

• 96x96

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

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

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

• 192x192

• 512x512

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

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

iOS 圖標(biāo)不支持透明度。

示例 manifest.json:

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

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

Manifest 并非到處都可以

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

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

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

Service Worker

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

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

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

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

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

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

• 免費的 Google Udacity 課程

• 深入闡述的 Service Worker 手冊。

測試

用 Chrome Devtools 調(diào)試物理設(shè)備

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

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

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

驗證 service worker

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

驗證安裝到主頁

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

chrome://flags/

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

原生應(yīng)用還沒有滅亡

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

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

想試試一些漸進式 Web 應(yīng)用么？看看 pwa.rocks 吧。

本文由眾成翻譯（zcfy.cc）的譯者翻譯完成，搶先閱讀更多優(yōu)質(zhì)英文技術(shù)文章，歡迎訪問眾成翻譯。