😆PWA - beforeinstallprompt toplusgames.com (ok)

C:\xampp82\htdocs\html\index.html

<html>
<head>
  <title>Test</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <p>
    If the <code>beforeinstallprompt</code> event fires, there will be a button displayed allowing
    you to use <code>prompt()</code> on the deferred event.
  </p>
  <button hidden>Show Prompt</button>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js');
      window.addEventListener('beforeinstallprompt', event => {
        event.preventDefault();
        var button = document.querySelector('button');
        button.removeAttribute('hidden');
        button.addEventListener('click', () => {
          event.prompt();
          button.setAttribute('disabled', true);
        });
      });
    }
  </script>
</body>
</html>

C:\xampp82\htdocs\html\manifest.json

{
  "short_name": "PWA Test",
  "name": "PWA Test",
  "icons": [
    {
      "src": "https://raw.githubusercontent.com/jeffposnick/create-react-pwa/master/favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone"
}

C:\xampp82\htdocs\html\sw.js

self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());

Áp dụng

C:\xampp82\htdocs\testcom\static\script.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('https://test.com/static/js/sw.js');
  window.addEventListener('beforeinstallprompt', event => {
    event.preventDefault();
    var button = document.getElementById('installApp');
    button.removeAttribute('hidden');
    button.addEventListener('click', () => {
      event.prompt();
      button.setAttribute('disabled', true);
    });
  });
}

C:\xampp82\htdocs\testcom\static\js\sw.js

self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());

C:\xampp82\htdocs\testcom\wp-content\themes\theme-zoki\header.php

<link rel="manifest" href="/media/manifest.json" />

How do you prompt a user to install a PWA?

#100daysofcode#javscript

My lesson of the day. The browser in use: chrome

For a PWA to be installable, you need a registered service worker and a manifest file with the relevant fields.

You also need to attach a click event to an element in the HTML file. I added a button tag as the last element of my HTML file and set the display to none in CSS. Note: The button element is empty.

Next inline is the javascript code: 

let defferedPrompt;
const addbtn = document.querySelector('.btn');

window.addEventListener('beforeinstallprompt', event => {
    event.preventDefault();
    defferedPrompt = event
    addbtn.style.display = 'block';
});

addbtn.addEventListener('click', event => {
    defferedPrompt.prompt();

    defferedPrompt.userChoice.then(choice => {
        if(choice.outcome === 'accepted'){
            console.log('user accepted the prompt')
        }
        defferedPrompt = null;
    })
})

The code explained:

You listen for the beforeinstallprompt event and save the event to a variable. Then attach an event listener to your HTML element and listen for the click event. You also pass in a callback function to the event listener that calls prompt() on the saved event. Prompt displays a dialogue box. Using the User choice property you capture the user's action. User choice is a property that returns the users choice. If the users choice equates to accepted the installation begins else the dialog box is closed. You can only call prompt() on the deferred event once. Lastly, you set the deferred event to null.

That's it for day 68 Lets do this again tomorrow

PreviousSử dụng ajax tạo popup cho các bài viết wordrpess mattervn.com (ok)NextHow to Use the HTML5 Full-Screen API (Again) (ok)

Last updated