Progressive Web App 教程：創建您的第一個 PWA

已發表: 2020-06-23

PWA 由 Google 自己製造，目前正被推送到 Windows 10 等流行平台上，它可以完成許多以前原生應用程序獨有的功能，包括推送通知、引人入勝的應用程序界面、離線功能、應用程序安裝等功能...... .

這就是為什麼 PWA 的出現不再是暫時的，因為它現在是一場全面的大規模運動，可能從根本上改變我們所知道的 Web。對於新手來說，現在了解這項新興技術還為時不晚，因為現在構建 PWA 的過程比以前簡化了很多，適合像您這樣感興趣的外行。

為了您的最佳學習目的，今天我們將使用 React、Node.js 和 Firebase 創建一個功能齊全的 PWA。

先決條件

Node.js版本 >= 8.10
npm版本 >= 5.6

注意： npm版本應該不是問題，因為您安裝的Node.js總是帶有最新版本的npm包管理器。

1. 使用`create-react-app`創建一個 SPA

首先，我們需要一些紮實的工作，而create-react-app是實現此目的的完美工具。

 npx create-react-app my-PWA
cd my-pwa
npm 開始

上述命令將幫助您創建一個學習的、基於 React 的環境供您使用。

通過 HTTPS 提供服務

HTTPS 是 Web 的新標準，隨著 PWA 的到來，它只會變得更加主流。通常，PWA必須通過 HTTPS 提供服務，因為沒有它，服務工作者本身就無法工作；但由於我們在 localhost 環境中工作，因此沒有必要。

2.使其離線工作

默認情況下，應預先配置create-react-app中的服務工作者，以在用戶沒有連接或後續訪問時處理離線緩存和內容加載。

簡單來說，Service Worker 是一個 JavaScript 腳本，它運行在與頁面不同的線程上，因此，它無法訪問 DOM 結構。這種新方法產生了更先進、性能增強的功能，因為服務工作者現在不僅處理 PWA 的所有典型功能（離線功能、推送通知等），而且在減輕繁重計算方面也發揮了重要作用您的網站在一個單獨的線程上。

要在 PWA 上安裝服務工作者，您需要查看/src/index.js 。

在index.js中，尋找這一行

 serviceWorker.unregister()

將unregister()更改為register() ，當您在生產模式下運行my-pwa時，您的服務人員將自動註冊。不建議在開發模式下啟用 Service Worker，因為它可能導致 PWA 僅加載緩存資產而不包括最新的本地更改的情況。

在生產模式下運行你的my-pwa ：

 npm 運行構建
npx 服務構建

之後，打開 Chrome 並轉到localhost:5000 ，檢查它，您現在將看到 Service Worker 在Application選項卡中正常運行。

在“緩存存儲”類別下，您要檢查您網站的離線內容是否被正確緩存。

注意：有一種解決方法可以在非生產模式下註冊您的服務人員。這是通過從src/serviceWorker.js中刪除行process.env.NODE_ENV === 'production'來實現的。

如果您想深入研究並從頭開始創建自己的服務工作者，而不依賴於 React 的預配置配置，我們可以滿足您的需求。在本教程中，我們將向您展示如何從一個簡單的 Web 應用程序創建一個離線優先的漸進式 Web 應用程序。

3.設置添加到主屏幕

如果到目前為止一切都已正確完成，那麼在啟動my-pwa的生產版本時應該會看到一個小的安裝圖標 (+)。

由於一切都是為您自動完成的，您可能想知道這一切是如何實現的。別擔心，這就是我們在這裡的原因。

為了準備好 PWA A2HS（添加到主屏幕），我們需要manifest.json 。 create-react-app附帶的manifest.json是一個非常基本的 JSON 文件，它決定了應用程序的圖標如何呈現給用戶並定義其啟動屏幕外觀。要自定義這些，請更改/public/manifest.json中的現有文件。

 {
  "short_name": "我的第一個 PWA",
  "name": "創建一個簡單的 PWA",
  “圖標”：[
    {
      "src": "favicon.ico",
      “尺寸”：“64x64 32x32 24x24 16x16”，
      “類型”：“圖像/x-icon”
    },
    {
      "src": "logo192.png",
      “類型”：“圖像/png”，
      “尺寸”：“192x192”
    },
    {
      "src": "logo512.png",
      “類型”：“圖像/png”，
      “尺寸”：“512x512”
    }
  ],
  "start_url": ".",
  “顯示”：“獨立”，
  "theme_color": "#000000",
  “背景顏色”：“#ffffff”
}

這裡的大部分內容都是不言自明的，但是如果您發現自己想要深入了解manifest.json和導致 PWA 安裝的事件，我們已經寫了一篇關於此的文章。別忘了檢查一下。

注意：要使manifest.json工作，您需要將它包含在index.html中。默認情況下， create-react-app應該已經為您完成了這項工作。

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

當您將 PWA 註冊到 service worker 和適當的manifest.json時，一旦用戶啟動您的應用程序，將觸發beforeinstallpromt ，請求他們允許將您的 PWA 安裝到用戶的主屏幕。

但是您應該注意，我們只是觸及了 A2HS（添加到主屏幕）過程的表面，還有很多東西需要學習。我們認為，學習任何東西的最佳方法是從頭開始構建它，這就是為什麼我們為您準備了有關 PWA 的這一特定功能的簡短指南。該指南將引導您了解 PWA 安裝活動中的幾個重要部分。

或者，如果您感到懶惰和沒有動力，我們也在這里為您提供支持。我們的清單生成器旨在為您自動化整個過程。

4.設置推送通知

瀏覽器在支持推送通知方面取得了長足的進步。最近，Chrome 甚至引入了通知觸發器，以便在飛行模式下顯示通知。這是推送通知向前邁出的一大步。

Chrome 通知觸發器 — *Chrome 80 中的新功能，**通知觸發器**即使在飛行模式下也能啟用通知*

現在，您一定想知道本教程中使用 Firebase 的那部分在哪裡。嗯，就是這樣。在這一部分中，您將了解使用 Firebase 將推送通知集成到 PWA 中的過程，特別是其中的雲消息傳遞功能，它允許使用 HTTPS 請求發送消息。

但是由於整個過程有點長，而且為了幫助您更好地跟踪整個事情，我們為您準備了我們自己的推送通知集成教程。通過本教程，您在嘗試向用戶令牌或一組用戶發送推送通知時不會遇到任何問題。

結論

這就是完整的 PWA。如果您對教程的任何部分感到困惑，請隨時向我們提出任何問題，我們將盡力回答！

閱讀更多：
如何在 Magento 2 中集成 PWA