Javascript “定制”；“添加到主屏幕”；横幅。安培_Javascript_Service Worker_Amp Html_Progressive Web Apps_Homescreen

Javascript “定制”；“添加到主屏幕”；横幅。安培

javascript amp-html

Javascript “定制”；“添加到主屏幕”；横幅。安培,javascript,service-worker,amp-html,progressive-web-apps,homescreen,Javascript,Service Worker,Amp Html,Progressive Web Apps,Homescreen,我目前正在做一项任务，定制“添加到主屏幕”。我们的网站是AMP，我正在使用worker service和manifest=PWA 我已经添加了AMP库，这就是我安装worker服务的方式放大器部分 <amp-install-serviceworker src="/sw.js" data-iframe-src="/pwa/sw.html" layout="nodisplay"> </amp-install-serviceworker> <butt

我目前正在做一项任务，定制“添加到主屏幕”。我们的网站是AMP，我正在使用worker service和manifest=PWA

我已经添加了AMP库，这就是我安装worker服务的方式

放大器部分

<amp-install-serviceworker
   src="/sw.js"
   data-iframe-src="/pwa/sw.html"
   layout="nodisplay">
</amp-install-serviceworker>
<button class="add-button"> add to homescreen </button>

sw.html

<!DOCTYPE html>
<html>
  <head>
    <title>installing service worker</title>
    <script type="text/javascript">
        if('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('/sw.js')
                .then(function() { console.log('Service Worker 
         Registered'); });
        }
        // Code to handle install prompt on desktop

        let deferredPrompt;
        const addBtn = document.querySelector('.add-button');
        addBtn.style.display = 'none';

        window.addEventListener('beforeinstallprompt', (e) => {
            // 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
        addBtn.style.display = 'block';

        addBtn.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;
        });
        });
        });
    </script>
  </head>
  <body>
  </body>
</html>


安装服务人员
if（导航器中的“serviceWorker”）{
navigator.serviceWorker
.register（'/sw.js'）
.then（函数（）{console.log（'服务工作者
注册); ;();；
}
//在桌面上处理安装提示的代码
让延迟提示；
const addBtn=document.querySelector（'.add按钮'）；
addBtn.style.display='none'；
window.addEventListener（'beforeinstallprompt'，（e）=>{
//防止Chrome 67及更早版本自动显示提示
e、 预防默认值（）；
//隐藏事件，以便稍后触发。
延迟提示=e；
//更新UI以通知用户他们可以添加到主屏幕
addBtn.style.display='block'；
addBtn.addEventListener（'单击'，（e）=>{
//隐藏显示A2HS按钮的用户界面
addBtn.style.display='none'；
//显示提示
deferredPrompt.prompt（）；
//等待用户响应提示
deferredPrompt.userChoice.then（（choiceResult）=>{
如果（choiceResult.Output==‘已接受’）{
log（'用户接受A2HS提示'）；
}否则{
log（“用户取消了A2HS提示”）；
}
deferredPrompt=null；
});
});
});

不知怎的，

sw.html

没有应用它的代码。按钮仍显示在前端，但不起作用。在手机上，它仍然是默认的横幅显示

<!DOCTYPE html>
<html>
  <head>
    <title>installing service worker</title>
    <script type="text/javascript">
        if('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('/sw.js')
                .then(function() { console.log('Service Worker 
         Registered'); });
        }
        // Code to handle install prompt on desktop

        let deferredPrompt;
        const addBtn = document.querySelector('.add-button');
        addBtn.style.display = 'none';

        window.addEventListener('beforeinstallprompt', (e) => {
            // 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
        addBtn.style.display = 'block';

        addBtn.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;
        });
        });
        });
    </script>
  </head>
  <body>
  </body>
</html>