Pwa installation own button installation in JS + HTML + CSS

I know how to do a pwa integration and the browser proposes the installation with the message “Add — to the home screen”. My wish is as follows: I would like to set up on the integrated PWA website a personalized button l “Install mobile version” in HTML so that my users can install the progressive web app as needed, especially when they wish. They will not necessarily wait for the browser to offer them the installation. I have already done the PWA integration and the browser already offers the installation. Problem is, I don’t really know how to go about my permanent web app progressive install button in html + javascript that users will see on my website outside of what the browser offers.

Here is my service-worker.js and my index.html

var CACHE_NAME = 'PWA-installation';
var urlsToCache = [
  'index.html',
  './',
  'styles.css',
  'scripts/network.js',
  'scripts/ui.js',
  'scripts/clipboard.js',
  'scripts/theme.js',
  'sounds/blop.mp3',
  'images/favicon-96x96.png'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});


self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

JavaScript
​x
 
var CACHE_NAME = 'PWA-installation';
var urlsToCache = [
  'index.html',
  './',
  'styles.css',
  'scripts/network.js',
  'scripts/ui.js',
  'scripts/clipboard.js',
  'scripts/theme.js',
  'sounds/blop.mp3',
  'images/favicon-96x96.png'
];
​
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});
​
​
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Web App Config -->
    <title>pwa</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
</head>

<body translate="no">
    <header >
      
        <a href="#" id="install" class="icon-button" title="Install PWA" >
             Install PWA
        </a>
    </header>
 
    
    <!-- Footer -->
    <footer class="column">
       
    </footer>
    
    <!-- Scripts -->
    <script src="scripts/network.js"></script>
    <script src="scripts/ui.js"></script>
    <script src="scripts/theme.js" async></script>
    <script src="scripts/clipboard.js" async></script>
   
</body>

</html>

JavaScript
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Web App Config -->
    <title>pwa</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
</head>
​
<body translate="no">
    <header >
      
        <a href="#" id="install" class="icon-button" title="Install PWA" >
             Install PWA
        </a>
    </header>
 
    
    <!-- Footer -->
    <footer class="column">
       
    </footer>
    
    <!-- Scripts -->
    <script src="scripts/network.js"></script>
    <script src="scripts/ui.js"></script>
    <script src="scripts/theme.js" async></script>
    <script src="scripts/clipboard.js" async></script>
   
</body>
​
</html>

Answer

Your code looks fine, you only need to implement this part: https://stackoverflow.com/a/64727286/8716572

First you need to use this code to listen to the beforeinstallprompt event:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', function (e) {

  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();

  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

JavaScript
 
let deferredPrompt;
​
window.addEventListener('beforeinstallprompt', function (e) {
​
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
​
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});
​

Then you need to add the event listener to your button:

var buttonInstall = document.getElementById('install');

buttonInstall.addEventListener('click', function (e) {
  // Show the install prompt
  deferredPrompt.prompt();
});

JavaScript
 
var buttonInstall = document.getElementById('install');
​
buttonInstall.addEventListener('click', function (e) {
  // Show the install prompt
  deferredPrompt.prompt();
});
​

Advertisement

Answer