沒有原生客戶端的應用，就用 Chrome 幫它做一個

PWA 是什麼

引用自 Harttle.Land 的說法：

PWA(Progressive Web Apps)是 Google 最近在提的一種 Web App 形態 （或者如 Wikipedia 所稱的「軟體開發方法」）。 Harttle 能找到的關於 PWA 最早的一篇文章是 2015年6月 Alex Russell 的一篇博客： Progressive apps escaping tabs without losing our soul， 讓 Web App 從標籤頁跳出來，同時保持 Web 的靈魂。

如 Alex 所述，PWA 意圖讓 Web 在保留其本質（開放平台、易於訪問、可索引）的同時， 在離線、交互、通知等方面達到類似 App 的用戶體驗。按 Google 官方的解釋 PWA 具有這些特性：Reliable, Fast, Engaging。

它比原生應用更輕量，但是卻比現有的 Web APP 的功能更加豐富。最大也是最關鍵的區別是它能夠脫離瀏覽器的「束縛」（雖然依然是基於瀏覽器的技術），能夠把 PWA 網站添加到你的桌面上，不管是 PC 操作系統還是手機操作系統，類似於一個原生應用一樣，並且擁有媲美原生應用的體驗。

它也能擁有原生 APP 應用一般的啟動閃屏，它也能像原生 APP 應用一般能有消息推送——不過要知道，它源自 Web，通常只有傳統 APP 的體積的十分之一甚至更小。它不用等待下載安裝的時間，打開網頁的時候就已經「下載」並且「安裝」完畢。

要想體驗這項技術，如果你是安卓用戶，那最新版的 Chrome 已經支持；如果你是 iOS 用戶，可以等待 3 月份的 11.3 版本更新；如果你是 PC 電腦用戶，那麼來看看怎麼在電腦上也體驗體驗 PWA 吧。

配置 Chrome

首先更新你的 Chrome 版本到 64 或以上。

然後在地址欄輸入 chrome://flags，找到 Desktop PWAs 的選項將其 Enabled了，然後 Chrome 會提示你重啟瀏覽器。

重啟瀏覽器後，PWA 添加到桌面的特性就已經具備了。

將 PWA 網站添加到桌面

我這裡使用的是我的博客（基於自己寫的 hexo-theme-melody 主題搭建的）。打開網站，然後在瀏覽器右側找到設置的按鈕。接下去我針對 Windows 平台和 macOS 平台做分開講解。

Windows 平台

Windows 平台找到 添加到桌面 這個按鈕，點擊，然後會出現一個確認框：

點擊添加。然後你就可以在桌面上看到相應的圖標：

雙擊打開：

你會發現打開了一個沒有瀏覽器痕迹的網頁，或者說是個應用——這就是 PWA 了。PWA 支持離線啟動技術，即使在沒網的情況下也能啟動應用。不過在需要網路條件下才能發送的請求依然需要網路環境。

macOS 平台

相對於 Windows 平台比較簡單的操作，macOS 平台的操作相對有點繞彎，不過也大致相同。macOS 的Chrome 無法一次性就把 PWA 應用添加到桌面。需要先把 PWA 網站生成一個 app 應用，然後你再手動把這個app 應用以快捷方式複製到桌面。

接下來是具體步驟：

打開一個 PWA 網站，此處依然以我的 博客 作為例子，然後再右側找到配置菜單，下拉選中 添加到「應用」文件夾。然後等待幾秒鐘，會出現一個對話框：

此時這個 PWA 應用已經生成完畢了。我們點擊添加。之後你就可以在你的應用列表看到它了：

不過如果你要在你的桌面上添加這個應用的話，還需要找到這個 app 的位置，一般是在 /Users/你的用戶名/Applications/Chrome Apps.localized/這個文件夾下。用 Finder 打開：

然後選中這個應用，按住 alt+command 鍵把它拖拽到桌面上，就會生成一個快捷方式啦。這個方法也同樣適用於其他應用。

注意事項

如果是非 PWA 應用，也會有 添加到桌面 或者 添加到應用文件夾 的選項。不過當你雙擊打開它們的時候依然會調用 Chrome 瀏覽器去打開，跟以前的書籤的作用無差別。

目前 Desktop PWAs 還是實驗性的功能，所以有可能出現不穩定的情況，依照自己的情況作出決定~

結尾

就目前來說，我能想到的比較理想的使用條件是，在一些功能性網站支持 PWA 的情況下，是不用再去下它們的桌面客戶端了，直接通過 PWA 添加到桌面，就能像使用原生應用一樣使用它們啦。比如推特，比如 Medium 等。

下面給出一個別人總結的 PWA 網站列表，可以去體驗一波~