【发布时间】：2023-03-06 18:39:01
【问题描述】：
我正在开发一个示例网络应用程序，我希望我的用户能够将其安装到他们的 chrome 主屏幕上。据我所知，满足以下所有条件：
该网络应用尚未安装
- 满足用户参与启发式（当前，用户已与域交互至少 30 秒）
-
包括一个网络应用清单，其中包括： 短名称或名称
-
图标必须包含一个 192px 和一个 512px 大小的图标 start_url
-
显示必须是以下之一：全屏、独立或最小用户界面
-
通过 HTTPS 提供服务（服务工作者需要）
-
已向 fetch 事件处理程序注册了一个服务工作者
-
难以实际测量
-
我确实包含了一个清单：
{
"short_name": "React Notes",
"name": "React Notes Sample",
"icons": [
{
"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": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
-
从我的清单中可以看出，我正在提供图标。
-
我使用的是付费 heroku dyno，所以没有理由通过 https 提供它
-
我正在使用 fetch 处理程序注册服务工作者：
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) => { 控制台.log(e); });
S，我遇到的问题是 beforeinstallprompt 事件永远不会触发我做任何事情。我已经通过 Lighthouse 运行了我的应用程序至少十几次，每次我都遇到同样的错误：
失败：Service Worker 未成功提供清单的 start_url，没有要获取的起始 URL：页面上没有可用的 Web 应用清单...
而且我正式不知道为什么这不起作用。
【问题讨论】：
-
我可以看到清单中的起始 URL 指向 /。这将是您的网络应用程序的根路径。除非您提供文件和 URL 的文件夹结构，否则我们无法提供任何具体帮助。
标签： html reactjs progressive-web-apps service-worker