Move Over Native Apps, Progressive Web Apps Are Coming For You

TL;DR

Progressive Web Apps (PWAs) are the future of mobile apps and the web. Start building PWAs using a visual no-code/low-code approach with Joget DX.

Introduction

Imagine using an app launched from an icon on your mobile phone, with a user interface that is not only fast and responsive, but also works offline. And you get push notifications when the app isn’t even running. This sounds a lot like a native app, doesn’t it? Not necessarily so, as all this is possible today with Progressive Web Apps (PWA).

What is a Progressive Web App (PWA)?

Progressive Web Apps are web applications that incorporate additional features such as installing to a device, offline support, background push notifications, fast and responsive user experience, and more. A PWA pushes the boundaries of what a web app is capable of, and blurs the lines between a web and native app.

Installable on Mobile and Desktop

By bypassing app stores as well as allowing apps to be discovered and accessed directly via a URL, PWAs make it easier to reach users. PWAs also reduce the steps required between discovering an app and getting it on the home screen, thus reduces the friction in getting an app installed.

Add to Home Screen on Chrome Android
Add to Home Screen on Safari iOS
Add to Home Screen on Chrome Desktop
PWA Icon and Window Appearance on macOS

Fast and Responsive UX with Offline Support

Some of the critical requirements for a PWA are that it is fast and reliable. Not only does it load fast (time to get meaningful content on the screen must be short), it should also work in spotty network conditions or even when offline. Moreover, the user interface (UI) is responsive to user interaction. Overall, a PWA is designed to deliver a native app-like user experience (UX).

PWA detecting when you go offline, and synchronizing form data once you get back online

User Engagement and Background Push Notifications

Push notifications are a critical part of engaging (and re-engaging) users with an app. Without notifications, users will not be informed of content relevant to them (e.g. alerts, task assignments, messages, reminders, etc), so they will be less likely to open the app.

Push notifications showing on an Android phone, which engages the user to open the app

Pros and Cons of PWAs

As an enterprise or a developer, how do you decide whether or not to adopt PWAs when developing your apps? There are many advantages, as well as a couple of drawbacks that are perhaps holding it back.

What Does It Take to Build a PWA?

Let’s have a look at how to audit a web app for PWA features, as well as the steps to develop the PWA itself.

Audit a PWA

Lighthouse is an open-source automated tool for improving the quality of web pages, which is built directly into the Google Chrome browser. With Lighthouse, you can run an audit on a web app to determine the degree of compliance to the Progressive Web App Checklist.

  1. Browse to the desired web app.
  2. Open Chrome DevTools from the Chrome menu “More Tools” > “Developer Tools”
  3. Click on the Audits tab, click on “Run audits” with the “Progressive Web App” Audit selected.
Audit result of a fully compliant PWA
  1. Page load is fast enough on mobile networks
  2. Current page responds with a 200 when offline
  3. start_url responds with a 200 when offline
  4. Installable
  5. Uses HTTPS
  6. Registers a service worker that controls page and start_url
  7. Web app manifest meets the installability requirements
  8. PWA Optimized
  9. Redirects HTTP traffic to HTTPS
  10. Configured for a custom splash screen
  11. Sets an address-bar theme color
  12. Content is sized correctly for the viewport
  13. Has a <meta name=”viewport”> tag with width or initial-scale
  14. Contains some content when JavaScript is not available
  15. Provides a valid apple-touch-icon
  16. Additional items to manually check
  17. Site works cross-browser
  18. Page transitions don’t feel like they block on the network
  19. Each page has a URL

Develop a PWA Using Code

Having seen the requirements to qualify as a Progressive Web App, let’s see what’s needed to actually build one. This section contains some partial code snippets to give developers an idea of what is required to code a PWA.

Step 1: Enable HTTPS

The first thing to keep in mind is that, for security reasons, PWAs require HTTPS. Without a secure HTTPS connection, PWA features will not work.

Step 2: Create a Web App Manifest

The first key component in a PWA is the web app manifest. The web app manifest is a simple JSON file placed in the root of the web app that provides information regarding the web app. The manifest would include information about the app name, icons, splash screen, start URL and more.

{  "short_name": "MyApp",  "name": "My App",  "icons": [{  "src": "/images/icons-192.png",  "type": "image/png",  "sizes": "192x192"},{  "src": "/images/icons-512.png",  "type": "image/png",  "sizes": "512x512"}],  "start_url": "/myapp/",  "background_color": "#338888",  "display": "standalone",  "scope": "/myapp/",  "theme_color": "#338888"}

Step 3: Develop a Service Worker

The next key PWA component, arguably the most important one, are service workers. Service workers are JavaScript code in the web app root that runs in the background. They intercept network requests and act like sort of a client-side proxy.

if ('serviceWorker' in navigator) {  window.addEventListener('load', () => {      navigator.serviceWorker.register('/service-worker.js')    .then((reg) => {      console.log('Service worker registered.', reg);    });  });}
self.addEventListener(‘install’, event => {  // cache core files  event.waitUntil(    caches.open(CACHE_NAME).then((cache) => {      console.log(‘Service worker pre-caching offline pages’);      return cache.addAll(FILES_TO_CACHE);    })  );});
self.addEventListener(‘activate’, event => {  // delete old caches  evt.waitUntil(    caches.keys().then((keyList) => {      return Promise.all(keyList.map((key) => {        if (key !== CACHE_NAME) {          console.log(‘Service worker removing old cache’, key);          return caches.delete(key);        }      }));    })  );});
self.addEventListener(‘fetch’, event => {  event.respondWith(    fetch(event.request).catch(function() {      return caches.match(event.request);    })  );}

Step 4: Add Push Functionality

Push Notifications are performed using two APIs: the Notifications API and the Push API. The former lets the app display system notifications to the user, while the latter allows a service worker to receive messages from a server, even in the background.

  1. Send the subscription object to the server
  1. Encrypt the data with the user public key
  2. Send the encrypted data.

Step 5: Add Offline Functionality

Service workers can make use of 2 types of offline storage.

Develop a PWA Using a No-Code/Low-Code Platform

The previous section shows that although simpler than developing native apps, building a PWA from the ground up is not as simple as it could be. A simpler way of developing Progressive Web Apps is to use a no-code/low-code platform that provides automatic PWA support, such as Joget DX.

Visually design a form in Joget DX
Progressive Web App support and push notifications enabled by default
Offline functionality enabled via checkbox
Lighthouse PWA audit for a Joget DX app on mobile
Lighthouse PWA audit for a Joget DX app on desktop

Should You Adopt PWAs Today?

So, having learned about the promise of Progressive Web Apps, should enterprises and developers adopt PWAs today? The answer should be a resounding yes. PWAs are not perfect yet, especially in terms of cross-platform compatibility, but it is definitely time to start embracing the future if you have not already started on the journey.