Chrome 67不会为我的PWA触发“安装前提示”

时间:2018-07-14 23:23:28

标签: html5 reactjs service-worker progressive-web-apps pwa

我正在开发一个示例Web应用程序,希望我的用户能够将其安装到其chrome主屏幕上。据我所知,满足以下所有条件:

  

该网络应用尚未安装

     
      
  • 满足用户参与启发式的需求(当前,用户已与域互动至少30秒)      
        
    • 包含一个Web应用清单,其中包括:   简称或名称
    •   
    • 图标必须包含192px和512px大小的图标   start_url
    •   
    • 显示必须是全屏,独立或最小用户界面之一
    •   
    • 通过HTTPS服务(服务工作者必需)
    •   
    • 已使用获取事件处理程序注册了服务工作者
    •   
  •   
  • 难以衡量
  • 我确实包含清单:

    {     “ short_name”:“反应说明”,     “ name”:“ React Notes Sample”,     “图标”:[       {         “ src”:“ staticAssets / favicon.ico”,         “ sizes”:“ 64x64 32x32 24x24 16x16”,         “ type”:“ image / png”       },       {         “ src”:“ staticAssets / icon-192.png”,         “ sizes”:“ 192x192”,         “ type”:“ image / png”       },       {         “ src”:“ staticAssets / icon-512.png”,         “ sizes”:“ 512x512”,         “ type”:“ image / png”       }     ],     “ start_url”:“ /”,     “ display”:“独立”,     “ theme_color”:“#000000”,     “ background_color”:“#ffffff” }

  • 从清单中可以看到,我正在提供图标。

  • 我正在使用付费的Heroku测功机,因此没有理由通过https投放它
  • 我正在使用提取处理程序注册服务工作者:

    importScripts(“ / precache-manifest.2dbaa71ff348edf029d7ff098089b7cd.js”,“ /workbox-v3.3.1/workbox-sw.js”); workbox.setConfig({modulePathPrefix:“ /workbox-v3.3.1”}); / *禁用eslint * /

    self .__ precacheManifest = [] .concat(self .__ precacheManifest || []); workbox.precaching.suppressWarnings(); workbox.precaching.precacheAndRoute(self .__ precacheManifest,{});

    self.addEventListener('fetch',(e)=> {   console.log(e); });

S,我遇到的问题是,beforeinstallprompt事件从未触发我执行任何操作。我已经在Lighthouse上运行了我的应用程序至少12次,并且每次遇到相同的错误:

  

失败:服务人员未成功提供清单的start_url,没有要提取的起始URL:页面上没有可用的Web应用清单...

而我对这为什么不起作用感到茫然。

4 个答案:

答案 0 :(得分:1)

诊断问题的最佳方法是使用“ Chrome开发工具审核”标签中的“审核”(灯塔)。

尝试运行“ Progressive Web App”移动审核,结果应为您提供需要解决的线索。

答案 1 :(得分:0)

首先,请尽可能在其他设备上尝试。
您有可以分享的网址吗?我可以测试您是否喜欢。

使用灯塔审核工具
在#4下您会看到“系统会提示用户安装Web应用”
有时您会遇到一些错误,但仍然可以使用

答案 2 :(得分:0)

您可能想尝试添加范围属性
看起来好像不存在,看起来是@ start_url

https://www.w3.org/TR/appmanifest/#navigation-scope

我的例子
http://a2hs.glitch.me/manifest.json

答案 3 :(得分:0)

奇怪的是,对我来说Lighthouse显示+结果提示用户安装应用。它无法在chrome 65 Android 6上运行。请查看我的Lighthouse结果的屏幕截图。 https://imgur.com/a/vJxfNAJ

此外,我还添加了范围,start_url,以防万一。

此外,当我从开发工具手动触发“添加到主屏幕”时,它会提示一切正常。叹!已经花了几个小时,已经浪费了时间。

它很好地提示了Firefox。

我的堆栈是标准的 gatsby v2 ,此处有2个插件https://www.gatsbyjs.org/docs/progressive-web-app/