为什么Android版 Chrome不会提示安装我的网页应用?
我的网页应用有一个manifest的最小集合:name、icons、start_url、display。
桌面Chrome的工作情况
桌面Chrome(Chromium在 Linux 上)在地址栏显示了一个小小的安装图标。
点击该图标达到了我的预期,应用被安装:网页作为新窗口弹出,URL收起(display: standalone),图标与manifest中指定的相同,我在启动器菜单的“Other”中获得了一个启动器。
我期望在Android上能工作
来自 MDN:Making PWAs installable:
"On Android, Firefox, Chrome, Edge, Opera, and Samsung Internet Browser all support installing PWAs."
来自 Chrome for Developers:Blog:How Chrome helps users install the apps they value:
"Research at Google has shown that users also want to install any web experiences, even if they don't meet the install criteria or offer a customized install flow… For such cases, Chrome offers a manual way to install a page as a "manual" app… On mobile, tap More ⁝ > Add to home screen > Install app。"
我的问题
On Chrome on Android the Install app part never appears.
Add to home screen asks for a name, and the launcher created does not use the provided icon.
manifest.webmanifest:
{
"name": "Test App",
"icons": [
{
"src": "/icons/logo512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
},
{
"src": "/icons/logo192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "any"
},
{
"src": "/icons/logo144.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
},
{
"src": "/icons/logo.svg",
"type": "image/svg+xml",
"sizes": "any",
"purpose": "any"
}
],
"start_url": "/index.html",
"display": "standalone"
}
解决方案
Android Chrome仍然需要一个带有fetch处理程序的 service worker,才能提供“Install app”的选项。桌面端Chrome已经放弃了该要求。这是两者之间的根本差异,也解释了为什么桌面端可以安装而Android端不能。
你的manifest已经完整(这也是桌面端能工作的原因)。如果没有一个具备fetch处理程序的service worker,Android版 Chrome无法生成WebAPK,因此它回退到传统的Add to home screen路径:一个普通书签,请求你输入名称,并使用一个生成的图标来替代manifest图标
尝试添加并注册一个最小的service worker:
self.addEventListener('fetch', () => {});
// a no-op handler is enough to pass the installability check
// in your page
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');
通过https提供它,希望这能解决你的问题。