网页添加到桌面应用

<!----------------------HTML开始------------------------>

<head>

<link rel="manifest" href="/static/admin/pwa/manifest.json">

</head>

<body>

    <a href="javascript:;" class="tk weChatCode add-desktop-button">

        <i class="icon-adv icon-desktop"></i>

        <p class="downa">桌面端</p>

        <div class="downbox click-desktop">

            <p class="ap">添加到桌面</p>

            <img src="/static/admin/pwa/desktop.png" style="width: 100px;height: auto" alt="" class="erwei">

        </div>

    </a>

</body>

<!----------------------HTML结束------------------------>

<!----------------------JS开始------------------------>

// 检测浏览器是否支持SW

    if(navigator.serviceWorker != null){

        navigator.serviceWorker.register('/admin.php/union/unionSys/sw')

            .then(res => {// console.log('注册成功') })

            .catch(error => { // console.log('注册失败') })

    }else{

        // console.log('不支持sw')

    }

    let deferredPrompt;

    const addBtn = document.querySelector('.add-desktop-button');

    addBtn.style.display = 'none';

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

        // console.log('beforeinstallprompt')

        // Prevent Chrome 67 and earlier from automatically showing the prompt

        e.preventDefault();

        // Stash the event so it can be triggered later.

        deferredPrompt = e;

        // Update UI to notify the user they can add to home screen

        showInstallPromotion()

    });

    function showInstallPromotion(){

        addBtn.style.display = 'block';

        const clickBtn = document.querySelector('.click-desktop');

        clickBtn.addEventListener('click', (e) => {

            // hide our user interface that shows our A2HS button

            addBtn.style.display = 'none';

            // Show the prompt

            deferredPrompt.prompt();

            // Wait for the user to respond to the prompt

            deferredPrompt.userChoice.then((choiceResult) => {

                if (choiceResult.outcome === 'accepted') {

                    //安装成功

                    // console.log('User accepted the A2HS prompt');

                } else {

                    // console.log('User dismissed the A2HS prompt');

                }

                deferredPrompt = null;

            });

        });

    }

    function hideInstallPromotion(){

        layer.msg('安装成功')

    }

    window.addEventListener('appinstalled', () => {

        // Hide the app-provided install promotion

        hideInstallPromotion();

        // Clear the deferredPrompt so it can be garbage collected

        deferredPrompt = null;

        // Optionally, send analytics event to indicate successful install

        // console.log('PWA was installed');

    });

<!----------------------JS结束------------------------>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值