PWA必須符合Chrome的安裝標準，包括帶有必需字段，註冊服務(wù)工作者和HTTPS交付的有效Web應(yīng)用清單2。需要足夠的用戶參與度，例如互動或多次訪問，以防止過早提示3。如果用戶以前駁回了提示，則除非使用toferinstallprompt event.4手動觸發(fā)，否則不會自動重新出現(xiàn)。 4。存在設(shè)備和瀏覽器限制，例如iOS Chrome上的PWA支持受到限制和桌面上的UI限制。 5。瀏覽器標誌或企業(yè)策略可能會禁用PWA功能。解決，驗證技術(shù)要求，增加參與度並使用燈塔來審核PWA，以確保它符合Chrome的質(zhì)量標準。

Google Chrome中可能缺少漸進式Web應(yīng)用程序（PWA）的“添加到主屏幕”（A2HS）出於多種原因而缺少，其中大部分是有意的，並且基於Chrome Chrome用來確定何時顯示該選項的特定條件。並不是說該功能消失了。它比以前更嚴格。

這就是為什麼您可能不會看到“添加到主屏幕”選項：

1。 PWA不符合Chrome的可安裝標準

Chrome僅顯示W(wǎng)eb應(yīng)用程序滿足一組技術(shù)要求時的A2HS提示。其中包括：

• 有效的Web應(yīng)用清單：必須在HTML中鏈接帶有所需字段的manifest.json文件，例如：

  • short_name或name
  • icons （至少一個192px的圖標和512px之一）
  • start_url
  • display （必須是： fullscreen ， standalone或minimal-ui之一）
  • theme_color和background_color

• 服務(wù)工作者註冊：該站點必須註冊服務(wù)工作者才能啟用離線功能和緩存。

  

• 通過HTTPS服務(wù)：該站點必須安全（Localhost是開發(fā)的例外）。

如果其中任何一個缺失或配置錯誤，Chrome將不認為該站點可安裝。

2。未達到用戶參與閾值

即使?jié)M足技術(shù)標準，Chrome也會等待足夠的用戶參與度，然後顯示提示。這意味著：

• 用戶已與頁面進行交互（例如，單擊，滾動或花了一些時間）。
• 該站點已多次訪問或開放時間為最低持續(xù)時間。

Chrome使用它來防止垃圾郵件或低質(zhì)量站點過早推動安裝提示。

3。提示已經(jīng)顯示（並被駁回）

如果用戶以前刪除了A2HS提示，則Chrome不會自動再次顯示它。瀏覽器假設(shè)用戶不感興趣。

您可以檢查是否觸發(fā)了beforeinstallprompt事件，並保存事件以手動觸發(fā)提示（例如，通過自定義按鈕），但是Chrome不會自行重新觸發(fā)它。

例子：

讓延期推薦；

window.AddeventListener（'tof installPrompt'，（e）=> {
  e.preventDefault（）;
  延期prompt = e;
  //顯示您的自定義“安裝應(yīng)用程序”按鈕
}）;

//稍後，當用戶單擊您的按鈕時：
if（deferredprompt）{
  deferredprompt.prompt（）;
}

4。使用不兼容的設(shè)備或瀏覽器版本

• 在桌面Chrome上，A2HS選項有限，通常僅在三點菜單（不是橫幅）中以“安裝”的形式出現(xiàn)。
• 在iOS上，Chrome不支持真正的PWA安裝（由於Apple的WebKit限制），因此行為模仿Safari（基本上只是“添加到主屏幕”）作為書籤，而沒有完整的PWA功能。
• 較舊版本的Chrome可能具有不同的行為或缺乏更新的PWA支持。

5。標誌或設(shè)置被禁用

在極少數(shù)情況下，用戶或管理員可能會禁用與PWA相關(guān)的功能：

• 檢查chrome://flags是否有任何禁用的PWA或安裝功能。
• 企業(yè)策略可能會阻止應(yīng)用程序安裝。

底線：“添加到主屏幕”選項不丟失 - 它只是被更有選擇地顯示。將其恢復(fù)：

• 驗證您的清單和服務(wù)工作者。
• 確保將該站點提供在HTTPS上。
• 增加用戶參與度（時間，互動）。
• 使用beforeinstallprompt事件來控制提示何時出現(xiàn)。

通過使用Chrome DevTools中的Lighthouse審核PWA設(shè)置，大多數(shù)問題都是可以解決的 - 顯然會告訴您缺少什麼。

基本上，Chrome現(xiàn)在優(yōu)先考慮質(zhì)量和用戶體驗而不是便利性，因此符合標準是關(guān)鍵。

以上是為什麼在Google Chrome中缺少PWA的'添加到主屏幕”選項？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！