Настройте баннер «Добавить на главный экран».в AMP - PullRequest
Новая
       22

Настройте баннер «Добавить на главный экран».в AMP

0 голосов
/ 24 ноября 2018

В настоящее время я работаю над задачей по настройке «Добавить на главный экран».Наш веб-сайт AMP, и я использую рабочий сервис и манифест = PWA.

Я уже добавил библиотеку AMP, и вот как я устанавливаю рабочий сервис.

Часть AMP.

<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.js 

self.addEventListener('install', function (e) {
   e.waitUntil(
      caches.open('iprice-coupons').then(function (cache) {
         return cache.addAll([]);
      })
   );
});

self.addEventListener('fetch', function (event) {
   event.respondWith(fetch(event.request));
   // or simply don't call event.respondWith, which
   // will result in default browser behaviour
});

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>

Каким-то образом sw.html не применяет свой код.Кнопка все еще появляется в интерфейсе, но она не работает.На мобильном телефоне все еще был баннер по умолчанию.

...