[譯] 讓你的 Web 應用和移動應用選擇 PWA 的 5 個理由

• 原文地址：5 Reasons to Choose PWA for Your Web and Mobile Apps
• 原文做者：Chameera Dulanga
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：rocwong-cn
• 校對者：Isildur46、Misszhu

我敢確定大家中大多數的人都據說過漸進式網頁應用（PWA）。PWA 是一項使人興奮的技術，它具備顛覆咱們開發 Web 和移動應用的方式的潛力。然而，有些人可能會說 PWA 只是將網站轉換爲移動應用，還有些人則在爭論其功能、安全性以及相較於原生移動應用的性能。

所以，在本文中，我將闡述 PWA 的五個有價值的特性，這些特性對於您未來的 Web 和移動應用會很是有用。

1. 開發 Web 和移動應用只需一種技術

在現代技術世界中，咱們能夠看到不少開發人員給本身貼上 Web 開發人員，移動端開發人員等標籤。

究其緣由，咱們能夠發現技術、工具和不一樣的平臺在分工中發揮了重要的做用。

以原生 App 開發爲例，則須要瞭解一些特定的技術，例如 Java、Kotlin、Swift、Flutter 等編程語言，以及 Android Studio、XCode 等工具包。

相比之下，使用 JavaScript/TypeScript、HTML、CSS 以及 Angular 這樣的框架或 React 這樣的庫是很容易的。2019 年 stack overflow 的調查結果顯示，上述這些 Web 開發語言是最受歡迎的。

這些結果影響着開發人員的技術選型，所以，會有更多的開發人員選擇 Web 領域。

2. 性能可靠

咱們能夠發現，快速、可靠和沉浸式體驗是 PWA 的重要特性。Application Shell 架構是實現這些特性的最佳方法之一。即便用戶處於弱網或離線狀態，該架構體系也能夠爲用戶提供快速、可靠的性能。讓咱們看看該架構的主要優點是什麼。

若是咱們遵循 Application Shell 架構原則，能夠將應用分爲 Shell 和 Content 兩個主要部分。初始化用戶界面所需的最小應用程序內容稱爲 Shell，而其餘須要經過聯網獲取的動態部分稱爲 Content。 所以，Shell 負責經過緩存其內容以供離線環境使用，從而爲用戶提供快速、可靠的用戶體驗。這種方法很是適合單頁面應用（SPA），而且爲用戶節省了數據流量，帶來了可靠和快速的性能以及原生的交互體驗。

3. 使用 Service Worker 提供最佳的用戶體驗

若是您是 Web 開發人員，那麼我相信您必定已經使用或據說過 Service Worker。Service Worker 在您的 Web 應用程序的後臺運行，並處理大量不須要用戶關注的任務。這些 Service Worker 一般在新的 Web 應用程序中使用，也能夠在 PWA 中使用。讓咱們看一下 Service Worker 爲 PWA 提供的主要功能。

離線運行

與原生應用相比，離線運行是 PWA 的頗具競爭力的特性之一，PWA 藉助 Service Worker 來實現此功能。使用 Service Worker，您能夠緩存應用的 Shell，當用戶再次訪問時它將當即加載。這些後臺操做可改善應用的用戶體驗，由於用戶不會看到在線和離線模式之間有任何重大差別。可是隻有在聯網後，動態內容纔會刷新。咱們可使用 telegram（一個通信平臺）來舉例，該應用程序將照常打開，即便您處於離線狀態，您也能夠查看和閱讀之前的聊天記錄。聯機後，應用程序將刷新並顯示新消息。

後臺同步

後臺同步是 Service Worker 提供的另外一項功能，它使應用程序能夠在網絡鏈接可用時響應任何關鍵請求，甚至包括您在離線模式發起的調用。例如，若是您在斷網時發送消息，Service Worker 將負責處理並在鏈接可用時完成該請求。後臺同步的 Demo 實現以下所示：

navigator.serviceWorker.register('/service_worker.js');

navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('backGroundSync');
});

self.addEventListener('sync', function(event) {
  if (event.tag == 'backGroundSync') {
    event.waitUntil(yourFunction());
  }
});
複製代碼

如上所述，即便關閉了應用程序，Service Worker 仍被用做事件目標，以使後臺同步工做。 yourFunction() 將返回一個 Promise，該 Promise 將標記活動的狀態爲成功或者失敗。若是成功，則完成後臺同步；若是失敗，則稍後再安排一次同步。另外，請注意 yourFunction() 的名稱對於給定的同步應該是惟一的。

除了這兩項以外，Service Worker 還爲 PWA 提供了許多功能，例如即便應用程序不活躍時也能夠接收推送通知、緩存網絡請求以及緩存靜態內容等。

4. 原生應用的外觀和體驗

簡單地講，Web 應用的 manifest 配置就是爲 PWA 定義原生外觀的 JSON 文件。當咱們從 play store 或者 app store 安裝一個應用時，就能夠在手機上看到一個應用的圖標，這就使得移動應用相較於網站更具交互性。對於 PWA，Web 應用的 manifest 文件是全部用戶交互的入口，而且包含應用的外觀相關配置的元數據。使用此 JSON 文件，咱們能夠輕鬆地更改應用的許多元素，包括應用的圖標、主題色、屏幕橫豎和啓動屏頁面。下面咱們一個實例來更深刻的討論一下這些屬性。

{
  "name": "My Example App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone"  
  "background_color": "#ffffff",
  "theme_color": "red"
  "description": "Demo App.",
  "orientation": "portrait-primary",
  "icons": [{
    "src": "images/logo.png",
    "sizes": "48x48",
    "type": "image/png"
  } ... ],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?..."
  }]
}
複製代碼

一個簡單的 Web manifest JSON 文件如上所示，name，short_name 屬性用於應用程序顯示名稱。在這裏，icon 屬性是一個列表，包含不一樣尺寸的應用圖標。display 屬性能夠具備全屏、獨立、最小用戶界面和瀏覽器這些值，全屏模式會刪除全部瀏覽器元素，併爲您的應用程序提供最佳的原生體驗。start_url 定義了用戶從主屏幕啓動 PWA 時加載的頁面。除此以外，還有許多屬性可用於爲 PWA 帶來原生的體驗。最重要的是，做爲開發人員，您能夠徹底控制應用程序的啓動過程，而且能夠利用這些屬性輕鬆地與原生應用一較高下。

5. 加強安全性以及設備訪問的透明性

安全是咱們須要考慮的另外一個重要方面。隨着全球安全事件的增長，用戶比以往任什麼時候候都更加關注其數據設備是否具有足夠的安全性來防止惡意攻擊。所以，做爲開發人員，咱們必須使用咱們選擇的技術來創建安全的最佳實踐以免這些問題。所以，讓咱們看看如何經過 PWA 向用戶保證安全性。

PWA 強制要求在傳輸層使用安全協議。所以，對用戶而言，敏感信息在傳輸過程當中是加密的，而且只能使用存儲在服務器中的私鑰來解密數據。出於這個緣由，應該使用 HTTPS 爲 PWA 的網站提供服務，而且必須在服務器中安裝 SSL 證書。

另外，未經用戶許可，PWA 不會與設備硬件進行交互，而且在 PWA 應用程序中隱藏任何惡意代碼也不容易。若是咱們遵循最佳實踐，僅在必要時才請求獲取訪問設備的權限，並使用最新的受信任的 JavaScript 庫，則風險將大大下降。

結論

除了這 5 個緣由之外，PWA 還知足了咱們對其餘 Web 或者移動應用的要求，例如響應速度、可靠性以及用戶體驗等。做爲開發人員，您無需承擔語言和框架上負擔，所以開發 PWA 很容易。與原生應用的開發相比，PWA 花費的時間更少。

若是您決定使用 PWA，在業務層面，成本會更低，市場佔有率會更高，而且能夠快速地進行搜索引擎優化。所以，下次尋求 Web 或者移動端的解決方案時，請立刻嘗試 PWA 吧。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。