Android 智能橫幅 — 原生應用安裝的清單抱怨缺少 Service Workers

Question

我已經閱讀了谷歌的文檔，在谷歌上搜索並瀏覽了 Stack Overflow，但沒有找到這個問題的任何答案。

我需要一個 Android 智能橫幅來為網站安裝本機應用程序，因此（根據 Google 的說明）創建了以下清單（出於隱私原因刪除了詳細信息）：

{
  "short_name": "ShortName",
  "name": "Longer App Name",
  "start_url": ".",
  "display": "standalone",
  "icons": [
    {
         "src": "icon.png",
         "type": "image/png",
         "sizes": "144x144"
     }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
         "platform": "play",
         "id": "com.app.name"
    }
  ]
}

由於這是一個本機應用程序，因此根據 Google 的指南，它不需要任何 Service Worker。 但是，當我打開網站並嘗試添加到主屏幕（通過開發者控制台）時，我不斷收到以下錯誤：

無法安裝站點：未檢測到匹配的 Service Worker。 您可能需要重新加載頁面，或檢查當前頁面的 service worker 是否還控制清單中的起始 URL。

你知道為什么會這樣嗎？ 看起來這不是本地應用程序安裝，但為什么會這么認為呢？

我從一開始就注意到了一些可疑的事情，比如它抱怨我沒有 start_url 和 display，即使指南沒有提到它對於本機應用程序是必要的。

你能告訴我我做錯了什么嗎？

謝謝！

Answer 1

閱讀谷歌文檔，我只能看到一些差異，我將放在這里，以便您可以檢查：

• Png 圖標大小應為 192x192
• 我會刪除“start_url”和“display”
• 在兩周的時間里，在兩個不同的日子里被用戶訪問兩次。 （這也可能很重要）

Answer 2

Service Worker 只是針對 PWA 的警告。 對於本機應用程序，這可以忽略。

文檔中缺少一個標准：需要多種不同的圖標大小。 這些尺寸是36x36 、 48x48 、 72x72 、 96x96 、 144x144 、 192x192 。

下面是一個例子：

{
  "name": "App Name",
  "short_name": "App Name Install Banner Sample",
  "icons": [
    {
      "src": "icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.google.samples.apps.iosched",
      "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
    }
  ],
  "start_url": ".",
  "display": "standalone"
}

提醒一下：

1. 在 chrome chrome://flags/#bypass-app-banner-engagement-checks 中啟用此標志
2. 在您的 Android 設備或模擬器上登錄 Google Play（確保模擬器有 Play 商店）
3. 該應用程序不應已安裝在設備上
4. 遵循此處頂部列出的要求
5. 檢查瀏覽器中的源選項卡以查看清單是否正確提供，並記得檢查控制台是否有任何錯誤（警告很好）