PWA入门：手把手教你制作一个PWA应用

根目录创建 manifest.json

{
    "name": "我是pwa",
    "short_name": "pwa是我",
    "start_url": "/", //启动页面,如果首页是https://www.abc.com/,则直接用“/”即可
    "display": "standalone",
    "background_color": "#fff",
    "description": "哈哈哈哈哈哈哈哈哈哈哈哈",
    "icons": [
      {
        "src": "images/admin_logo.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ]
  }

根目录创建 sw.js

根目录创建 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>标题</title>
    <link rel="manifest" href="/manifest.json" />
</head>
<body>
    <script>
        let deferredPrompt = null;
 
        window.addEventListener('beforeinstallprompt', (event) => {
            // 阻止事件的默认行为
            event.preventDefault();
            // 存储事件以供后续使用
            deferredPrompt = event;
            console.log(event)
            // 可以在这里触发一个显示按钮或提示的操作
            console.log('已提示用户安装PWA');
        });
        
        async function addToDesktop(){
            console.log(deferredPrompt)
            if (deferredPrompt) {
                // 显示添加到主屏幕的提示
                deferredPrompt.prompt();
                // 等待用户响应
                const userResponse = await deferredPrompt.userChoice;
                if (userResponse.outcome === 'accepted') {
                    console.log('PWA已添加到主屏幕');
                } else {
                    console.log('用户选择不将PWA添加到主屏幕');
                }
                // 重置提示
                deferredPrompt = null;
            }
        }
</script>
 
<button onclick="addToDesktop()">点击安装</button>

<script>
    // window.addEventListener('load', async () => {
    //     if ('serviceWorker' in navigator) {
    //         try {
    //             const registration = await navigator.serviceWorker.register('./sw.js')
    //             console.log('注册成功', registration)
    //         } catch (e) {
    //             console.log('注册失败')
    //         }
    //     }
    // })

</script>
</body>
</html>