如何显示 PWA 的安装按钮

Question

目前，我在我的新版博客上实现了 site.webmanifest 和一个 service worker。

https://nextjs.marcofranssen.nl/

尽管 Lighthouse 报告我 100% 符合 PWA 要求，包括可安装性，但我在浏览器的地址栏中看不到安装按钮。

在我当前版本的博客上它确实出现了。

https://marcofranssen.nl

下图显示了导航到我当前博客时的按钮。

现在我想知道我缺少哪个要求。

我也审查了这个标准 https://web.dev/install-criteria/。

有人知道我遗漏或过度阅读的内容吗？

请在此处查看清单文件 https://nextjs.marcofranssen.nl/site.webmanifest

head 部分也引用了此清单文件。

我的旧博客完全是静态生成的html。我的新博客是使用 Next.js 构建的，因此不完全是静态页面，但我认为这无关紧要。

Answer 1

Despite Lighthouse reports I'm 100% matching the PWA requirements, including installability, I do not see the install button in the address bar of my browser.

我运行 https://nextjs.marcofranssen.nl/ 和 [PWA] 部分的 lighthouse 测试有一些问题

如上所述，您的网站清单未命中 start_url :

"name": "Marco Franssen - Blog",
"short_name": "MF Blog",
"description": "Blog by Marco Franssen, covering software development!",
"icons": [],
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}

有关清单结构的更多详细信息，请参阅Web app manifests

之后，您需要在后台实施 serviceWorker, and for that you can use next-pwa package or next-offline package and both use google's workbox。

我更喜欢next-pwa package，因为它开箱即用，不需要太多配置。

如何显示 PWA 的安装按钮

How to show the install button for a PWA

progressive-web-apps

next.js