我正在开发一个示例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” }
从清单中可以看到,我正在提供图标。
我正在使用提取处理程序注册服务工作者:
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应用清单...
而我对这为什么不起作用感到茫然。
答案 0 :(得分:1)
诊断问题的最佳方法是使用“ Chrome开发工具审核”标签中的“审核”(灯塔)。
尝试运行“ Progressive Web App”移动审核,结果应为您提供需要解决的线索。
答案 1 :(得分:0)
首先,请尽可能在其他设备上尝试。
您有可以分享的网址吗?我可以测试您是否喜欢。
使用灯塔审核工具
在#4下您会看到“系统会提示用户安装Web应用”
有时您会遇到一些错误,但仍然可以使用
答案 2 :(得分:0)
您可能想尝试添加范围属性
看起来好像不存在,看起来是@ start_url
答案 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/