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

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

這就是為什么您可能不會(huì)看到“添加到主屏幕”選項(xiàng)：

1。PWA不符合Chrome的可安裝標(biāo)準(zhǔn)

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

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

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

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

  

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

如果其中任何一個(gè)缺失或配置錯(cuò)誤，Chrome將不認(rèn)為該站點(diǎn)可安裝。

2。未達(dá)到用戶參與閾值

即使?jié)M足技術(shù)標(biāo)準(zhǔn)，Chrome也會(huì)等待足夠的用戶參與度，然后顯示提示。這意味著：

• 用戶已與頁(yè)面進(jìn)行交互（例如，單擊，滾動(dòng)或花了一些時(shí)間）。
• 該站點(diǎn)已多次訪問或開放時(shí)間為最低持續(xù)時(shí)間。

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

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

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

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

例子：

讓延期推薦；

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

//稍后，當(dāng)用戶單擊您的按鈕時(shí)：
if（deferredprompt）{
  deferredprompt.prompt（）;
}

4。使用不兼容的設(shè)備或?yàn)g覽器版本

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

5。標(biāo)志或設(shè)置被禁用

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

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

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

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

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

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

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