How to build a Progressive Web App

Mobile now accounts for over half the web's traffic, and web applications enable users to do things in the browser that rival native apps, but there's a problem: the quality of connections and devices varies massively all over the world.

Catering both to users on lightning-fast connections in Seoul, and users in rural India on an outdated phone, is the latest usability challenge, and Progressive Web Apps are the solution.

Your app shell is the first thing that loads – the first thing the user sees. It should be exist entirely in your index HTML document, with inline CSS, to ensure it appears as fast as possible and your user isn't staring at a white screen for longer than necessary. The application shell forms part of the pattern of progressive enhancement. Your app should give the user content as soon as possible, and then progressively enhance it as more data (likely JavaScript) loads.

<!--index.html-->
<body>
<div id="root">
  <div id="container">
  <div class="inner-container">
  <div id="header">
  <img src="/assets/icon.png" alt="logo" />
  <h1>Chat</h1>
  </div>
  <div id="loading-container">
  <img src="/assets/icon.png" alt="logo" id="loader"/>
  </div>
  </div>
  </div>
  </div>
</body>
// index.js
ReactDOM.render(
<App />, 
document.getElementById('root')
);

<script>
  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);
});

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);
  });
})

There's also some configuration for how your application appears when it is launched from the user's home screen: Do you want to show the address bar in the browser or not? What colour do you want the status bar to be? And so on. Note that a proper manifest.json should include a full spectrum of icon sizes for various devices. The code below is a preview of some of the properties your manifest can include.

{
  "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"
}

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;

Performance is the heart and soul of PWAs. Your app should be fast for users on all network conditions. Caching and offline capability helps a lot, but at the end of the day, your application should be speedy even if the user does not have the browser to support service worker technology. This is the definition of progressive enhancement – provide a great experience for everyone, regardless of device modernity or network conditions.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

Scott is a full-stack developer at MuseFind Technologies, author of upcoming book Progressive Web Apps with React and curates the Progressive Web App Newsletter.

How to build a Progressive Web App

01. Serve over HTTPS

02. Create an application shell

03. Register a service worker

04. Add push notifications

05. Add a web app manifest

06. Configure the install prompt

07. Analyse your app's performance

08. Audit your app with Lighthouse

Related articles