如何触发简单的“添加到主屏幕”功能（没有 Service Worker 的功能）

Question

事实上，Android 浏览器上有两个“添加到主屏幕”功能：

• 当满足特定条件时，自动显示在 Chrome Android 底部的弹出对话框（可用、具有此处讨论的 Service Worker 、在 > 5 分钟内至少访问网站两次等）manifest.json

  

• 我们可以为任何网站触发 Chrome 菜单项，即使它没有 Service Worker。这只是在移动设备的主屏幕上创建一个网站的快捷方式：

  

问题：如何在 HTML 页面上添加一个按钮来触发主屏幕快捷方式的创建，就像之前的第二个项目符号一样？（即一个非常简单的 HTML 网站，没有任何 Service Worker）

Answer 1

你需要的是BeforeInstallPrompt事件。

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;
        }
    }
});

这是一篇可能对您有帮助的文章。

https://www.amitmerchant.com/adding-custom-install-button-in-progressive-web-apps/