添加网页到桌面快捷启动

103 阅读1分钟
  1. manifest.json文件
{
    "name": "TEST1", 
    "description": "超精美修仙大作,一起暢遊仙路成為三界至尊吧!",
    "start_url": "./index.html",
    "background_color": "#FFFFFF",
    "display": "fullscreen",
    "icons": [
        {
            "src": "https://s3.wakool.net/games/cde18e2b913cbe1deb49c170278d68776c78e41d.png",
            "type": "image/png",
            "sizes": "152x152"
        }
    ],
    "screenshots": [
        {
            "src": "https://s3.wakool.net/y5/bd8f679cb67ca5ee1fd90e4e16888ad02b90ddc1.jpg",
            "type": "image/jpeg",
            "sizes": "640x360",
            "purpose": "any",
            "form_factor": "wide"
        }
    ]
}

2.html以及js

<button id="install" hidden>Install</button>

<script>
    let installPrompt = null;
    const installButton = document.querySelector("#install");

    window.addEventListener("beforeinstallprompt", (event) => {
        event.preventDefault()
        installPrompt = event
        installButton.removeAttribute("hidden")
    })

    installButton.addEventListener("click", async () => {
        if (!installPrompt) {
            return
        }
        const result = await installPrompt.prompt()
        console.log(`Install prompt was: ${result.outcome}`)
        installPrompt = null
        installButton.setAttribute("hidden", "")
    })
</script>