如何为 pwa 添加自定义安装按钮

Question

我想在网站内为我的渐进式网络应用程序添加自定义 install 按钮。我红了很多文章并尝试了他们提供的答案。他们使用 beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});

但我面临的问题是我希望按钮直接安装 pwa 而不是触发安装提示。有可能吗，如果可以，我该如何实现。提前谢谢你。

Answer 1

试试下面的代码，

第 1 步 - 创建按钮或任何控制器

<button id="installApp">Install</button>

第 2 步 - 在 serviceworker 的脚本中添加以下 js 代码

let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
        deferredPrompt = e;
    });

    const installApp = document.getElementById('installApp');
    installApp.addEventListener('click', async () => {
        if (deferredPrompt !== null) {
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            if (outcome === 'accepted') {
                deferredPrompt = null;
            }
        }
    });

Answer 2

答案是，你不能。根据 manifest spec:

By design, this specification does not provide developers with an explicit API to "install" a web application.

如何为 pwa 添加自定义安装按钮

how to add custom install button for pwa

javascript

reactjs

next.js

progressive-web-apps

next-pwa