Chrome for Android - 將網絡應用添加到主屏幕

Question

我正在嘗試使用Google Chrome的本機橫幅支持實現“添加到主屏幕”橫幅，此演示作為參考。

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

根據那里的規范，要求是：

• 該頁面使用服務工作者（是的，見下文）
• 該網站正在使用HTTPS（是的，該網站有一個有效的SSL證書，我通過HTTPS加載.rrome顯示該網站是安全的，並有一個綠色的掛鎖，證書中沒有錯誤或警告）
• 該應用程序已聲明一個清單（是的，見下文）
• 清單有一個short_name，144像素圖標和一個'image / png'類型（是的，見下文）

我正在使用的清單如下。

{
  "name": "Web app test",
  "short_name": "Test",
  "icons": [
    {
      "src": "/resources/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

其中包含一個short_name和一個144像素的image / png圖標。

我正在使用的服務工作者是直接復制和粘貼此代碼：

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

本文推薦的內容：

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

服務工作者已注冊，清單正在加載到頁面中，圖像URL正確，但橫幅未顯示。

我也啟用了chrome：// flags /＃bypass-app-banner-engagement-checks，所以這不是我需要明天回來檢查它是否有效的情況。 我已經能夠在我檢查過的所有Chrome演示中查看主屏幕橫幅（這是我從中獲取大部分代碼的地方）並且我的手機安裝了最新版本的Chrome。

還有什么我可能會阻止主頁橫幅出現嗎？

謝謝。

Answer 1

要檢查的幾件事：

• 確保清單中有一個start_url ，用於定義要啟動的頁面。
• 確保您的頁面中有<link rel=manifest>
• 確保圖像URL全部根據清單位置正確解析
• 最好有192px圖標，144是最小值

Mounir Lamouri創建了一個清單驗證器 ，您可以使用它來檢查清單是否正確。

如果您使用的是Chrome，則還應啟用chrome：// flags /＃bypass-app-banner-engagement-checks，以便您更快地收到警告或查看任何問題。 最后，您可以在任何頁面加載時查看Dev Tools控制台，並顯示錯誤，指出橫幅未顯示的原因。

關於developers.google.com還有很多指導

• 使用應用安裝橫幅
  • 創建包含short_name，icons和launch_url的清單文件
  • 鏈接到頁面中的清單文件
• Web App安裝橫幅
  • 可選地包括諸如background_color和theme_color類的額外信息。
• 在App安裝橫幅上收聽活動
  • 了解Chrome何時認為可以提示安裝，然后提供將其推遲到更合適時間的功能。
  • 通過查看onbeforeinstallprompt事件中的響應，了解用戶是否已接受或拒絕提示。

Answer 2

一般情況下，我建議將您的清單粘貼到此以確保它沒有任何錯誤： http ： //mounirlamouri.github.io/manifest-validator/

如果啟用Chrome並啟用Chrome：// flags /＃bypass-app-banner-engagement-checks，則可以在控制台中查看任何頁面加載，並顯示錯誤，指出橫幅未顯示的原因。