Breaking News: Grepper is joining You.com. Read the official announcement!

create progressive web app [PWA] website

sumer5020 answered on June 19, 2022 Popularity 10/10 Helpfulness 2/10

answer create progressive web app [PWA] website

create progressive web app [PWA] website

Comment

<!--step 1 - your website most work over HTTPS-->


<!--step 2 - simple website index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    this is my simple pwa
</body>
</html>


<!--step 3 - Register a service worker name it [service‑worker.js]-->
  if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
  navigator.serviceWorker.register('service-worker.js').then(function(registration) {
  // Registration was successful
  console.log('Registered!');
  }, function(err) {
  // registration failed :(
  console.log('ServiceWorker registration failed: ', err);
  }).catch(function(err) {
  console.log(err);
  });
  });
  } else {
  console.log('service worker is not supported');
  }
  </script>
// service-worker.js
self.addEventListener('install', function() {
  console.log('Install!');
});
self.addEventListener("activate", event => {
  console.log('Activate!');
});
self.addEventListener('fetch', function(event) {
  console.log('Fetch!', event.request);
});


<!--step 4 - Add push notifications-->
navigator.serviceWorker.ready.then(function(registration) {
  if (!registration.pushManager) {
    alert('No push notifications support.');
    return false;
  }
  //To subscribe `push notification` from push manager
  registration.pushManager.subscribe({
  userVisibleOnly: true //Always show notification when received
  })
  .then(function (subscription) {
  console.log('Subscribed.');
  })
  .catch(function (error) {
  console.log('Subscription error: ', error);
  });
})


<!--step 5 - Add a web app manifest-->
{
  "short_name": "Chat",
  "name": "Chat",
  "icons": [
  {
  "src":"/assets/icon.png",
  "sizes": "192x192",
  "type": "image/png"
  }
  ],
  "start_url": "/?utm_source=homescreen",
  "background_color": "#e05a47",
  "theme_color": "#e05a47",
  "display": "standalone"
}


<!--step 6 - Configure the install prompt-->
window.addEventListener('beforeinstallprompt', e => {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();
  // Stash the event so it can be triggered later.
  this.deferredPrompt = e;
  return false;
  });
// When you want to trigger prompt:
this.deferredPrompt.prompt();
  this.deferredPrompt.userChoice.then(choice => {
  console.log(choice);
  });
this.deferredPrompt = null;

<!--step 7 - Analyse your app's performance-->

<!--step 8 - Audit your app with Lighthouse-->

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: progressive web whatever

Link to this answer
Share Copy Link

Contributed on Jun 19 2022

sumer5020

0 Answers Avg Quality 2/10

create progressive web app [PWA] website

Contents

More Related Answers

create progressive web app [PWA] website

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.