如何將添加到主屏幕集成到您的 PWA 中

已發表: 2021-05-13

添加到主屏幕（簡稱 A2HS）是漸進式 Web 應用體驗的基礎，因為它允許完整的原生應用體驗，包括從用戶的主屏幕啟動應用。

 推薦閱讀：PWA vs Native：哪個更適合你？

作為您的 PWA 如此重要的功能，您肯定不能不集成它，這就是為什麼今天在 SimiCart PWA 教程中，我們將討論為什麼需要 A2HS 的原因，如何使用它以及如何製作 PWA A2HS 就緒，可在移動設備和桌面設備上使用。

支持瀏覽器

A2HS 非常接近於成為瀏覽器之間的通用功能。目前，Mobile Chrome/Android Webview（從版本 31 開始）、Opera for Android（從版本 32 開始）和 Firefox for Android（從版本 58 開始）目前都支持它。如需更詳細的視圖，請查看 CanIUse 網站。

PWA 添加到主屏幕正在運行

當遇到啟用了 PWA 添加到主屏幕（啟用 A2HS）的站點時，可以在用戶界面的底部看到一個橫幅，通知該站點可以添加到您的主屏幕：

Harlow Bros - 將 PWA 添加到主屏幕 — *Harlow Bros – SimiCart 引以為豪的作品*

這是默認的瀏覽器提供的安裝促銷，在滿足某些可安裝標準時發生。通知本身將在用戶第一次訪問您的網站時顯示，然後在大約 90 天后再次顯示。

如何使您的網絡應用程序在移動設備上啟用 A2HS

可安裝標準

要使您的 Web 應用程序可安裝，它必須：

尚未安裝
滿足用戶參與啟發式（用戶必須與頁面交互至少 30 秒）
通過安全 (HTTPS) 連接提供服務
註冊服務人員
有一個正確配置的清單文件
而且最重要的是，使用的瀏覽器必須支持beforeinstallprompt事件。有關支持beforeinstallprompt事件的瀏覽器的完整列表，請參閱 CanIUse。

入門

出於演示目的，在本文中，我們將使用create-react-app項目作為基礎來創建可安裝的 PWA。 create-react-app 是一個簡單的 React 命令，用於創建單頁應用程序。

注意： create-react-app至少需要 node >= 10.16 和 npm >= 5.6

打開您的Node.js 命令提示符，運行以下命令：

 npx create-react-app pwa-a2hs
cd pwa-a2hs
紗線開始

創建清單文件

通常位於 Web 應用程序的根文件夾深處，您的 Web 清單是一個文件，其中包含您網站的所有必要信息，例如您的應用程序的標題、不同圖標的路徑、背景顏色等，採用 JSON 格式。 Web 清單文件對於功能性 Web 應用程序至關重要，因為它允許在用戶體驗的各個階段正確呈現您的 Web 應用程序。

我們建議使用清單生成器來自動生成文件，以及為您的應用程序大小優化的圖標。

使用清單生成器，您可以擁有一個manifest.zip文件，其內容如下：

你的manifest.webmanifest應該是這樣的：

 {
    "theme_color": "#f69435",
    “背景顏色”：“#f69435”，
    “顯示”：“獨立”，
    “範圍”： ”/”，
    "start_url": ".",
    “名稱”：“PWA-A2HS”，
    “short_name”：“PWA”，
    "description": "用於 A2HS 功能的演示 PWA",
    “圖標”：[
        {
            "src": "/icon-192x192.png",
            “尺寸”：“192x192”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-256x256.png",
            “尺寸”：“256x256”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-384x384.png",
            “尺寸”：“384x384”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-512x512.png",
            “尺寸”：“512x512”，
            “類型”：“圖像/png”
        }
    ]
}

現在將生成的清單文件的內容複製到/public/文件夾，刪除該文件夾中的默認manifest.json文件，然後繼續下一步。

將 HTML 鏈接到清單

完成清單文件的配置後，將其保存在網站的根目錄中，以便稍後使用相對路徑調用它，即/manifest.webmanifest 。要完成清單文件的設置，請在 HTML 標頭中引用它（ \pwa-a2hs\public\index.html ），像這樣：

 <頭部>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <元名稱="主題顏色" 內容="#000000" />
    <元
      名稱="描述"
      content="使用 create-react-app 創建的網站"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

設置安裝流程

Web 應用程序清單並不是使您的 Web 應用程序可安裝所需的全部。您必須進行一些額外的配置才能使您的 Web 應用程序可安裝，從而使其更接近 PWA。

創建服務工作者

Service Worker 攔截您的網絡請求並啟用 PWA 著名的各種類似應用程序的功能。在pwa-a2hs\public中創建一個service-worker.js文件，並填寫以下內容：

 self.addEventListener('fetch', function(event) {
  event.respondWith(
      caches.match(event.request).then(function(response) {
          返迴響應 || 獲取（事件。請求）；
      })
  );
});

在這裡，我們需要監聽fetch事件，因為它對於您添加到主屏幕的體驗至關重要，沒有它，您的 React 應用程序將無法滿足可安裝性要求。

註冊您的服務人員

為了讓我們的service-worker.js工作，我們必須通過在index.html的<body>末尾插入以下代碼來註冊它：

 //index.html
<腳本>
    if ('serviceWorker' in navigator) {
      // 註冊一個託管在根目錄的服務工作者
      // 使用默認範圍的站點。
      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        console.log('Service Worker 註冊成功：', 註冊);
      }, /*catch*/ 函數（錯誤）{
        console.log('Service Worker 註冊失敗：', error);
      });
    } 別的 {
      console.log('不支持服務工作者。');
    }
  </腳本>

是時候測試它了！

您的 PWA 現在應該可以安裝了。刷新您的前端，您應該會在任務欄（桌面）或小通知橫幅（移動）上看到一個安裝按鈕。

單擊安裝將在您的桌面/主屏幕上生成一個 PWA 快捷方式：

A2HS 體驗還有更多內容

以上只是使用瀏覽器提供的安裝推廣的基本添加到主屏幕體驗。為了更上一層樓，您還可以保存beforeinstallprompt 事件以手動觸發具有各種模式的安裝流程，以促進 PWA 安裝。

使用自定義安裝按鈕，您可以通過定位將受益於應用程序安裝的特定用戶來避免中斷用戶的旅程。通過仔細考慮推廣 UI 的放置位置和位置，您的 PWA 可能會比您的競爭對手做得更好，從而獲得更好的應用轉化率。