Updated: 2016-08-03: Removed link to obsolete demo

"A progressive web app uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction." So in simpler terms, a progressive web app is a website which looks and feels like a mobile app. This has only become possible with the recent advancements in the web browser, which now supports features such as service workers, manifests, push notifications and for a few years already, single-page applications.

A progressive web app is:

  • Progressive - In-line with the concept of progressive enhancement, a progressive web app work on any device and include improved features and interactions based on their availability. Therefore, if at the time of writing web apps are only installable on Android devices; then the website and it's content should still be available for iOS or desktop devices but would simply miss out on the features included in Chrome and Android.
  • Discoverable -  Since a progressive web app is a website, then it should also be discoverable through search engines. This is a major advantage over native applications which still lag behind websites in terms of searchability.
  • Linkable - Being a website, a well designed website should use the URI to indicate the state of the application. This will allow a user to bookmark or share the URL and the web app would retain or reload the state.
  • Responsive - Of course a progressive web app should display well on all devices, preferable using responsive web design.
  • App-like - Apart from being responsive, it should also look and feel like an app. The app should be built on the app shell model and minimize page refreshes in the form of a single-page application.
  • Connectivity Independent - Through service workers, a progressive web app should work in areas of low connectivity or offline.
  • Re-engageable - Progressive web apps should take advantage of mobile apps greatest advantage over web apps, retention. Mobile app users are more likely to re-use the app and progressive web apps aim to achieve the same goals through features like push notifications.
  • Installable - Progressive web apps could be installed onto your device's home screen without having to go through an app store.
  • Fresh - Always updated through service worker updates.
  • Safe - Served through HTTPS to prevent snooping

Service workers

Service workers are a new browser feature that provide event-driven scripts that run independently of web pages. Unlike other workers, service workers can be shut down at the end of events, note the lack of retained references from documents, and they have access to domain-wide events such as network fetches.

Service workers also have scriptable caches. Along with the ability to respond to network requests from certain web pages via script, this provides a way for applications to “go offline”.

Manifest

The manifest is a JSON file which is placed in the root directory of a web application. Through the manifest, it is possible to create an installable web application with a gorgeous splash screen.

EXAMPLE 1: typical manifest
{
  "lang": "en",
  "dir": "ltr",
  "name": "Super Racer 2000",
  "description": "The ultimate futuristic racing game from the future!",
  "short_name": "Racer2K",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}


The manifest will be responsible for prompting the user if they want to 'Add to Home Screen' which will allow a user to access your website directly from their device's home screen. This is an extremely powerful feature as users are more likely to return to your app.

To be able to get the "App Install Banners", you are required to have a correctly setup manifest.json, utilise service workers and the user must have returned to your website twice with at least 5 minutes between each visit.

 

Push notifications

Push notifications are the envy of web developers when comparing web apps to mobile apps. A study by Localytics shows that app retention is doubled for push-enabled mobile apps and increased by 278% for e-commerce apps,, making them the key feature for getting users back to your app.

Push notifications can be used in a myriad of options, either to inform the user, for example to remind you your next calendar appointment or to notify you of a received message; or to ask the user for an interaction, for example to accept or decline an offer.

Unfortunately it is still very early days of push notifications on the web, with support only on Chrome, Firefox and Chrome for Android.

 

Building next-generation Web apps

Using a combination of the above technologies together with a fantastic user interface and a high performance web app, it is possible to create the next-generation web apps which engage the user, work offline and work seamlessly on all devices. At Incredible Web we have already taken this approach and our clients are enjoying fantastic results, with growth in user retention and conversion. But we won't stop here; as we intend to push the bar even higher to keep developing truly award-winning solutions that deliver results.

 

Pizza4U's Progressive Web App

Below is one of the many progressive web apps we have developed for our clients, which makes use of the manifest and service workers. Unfortunately it does not implement push notifications yet. You may visit the site on https://www.pizza4u.com.mt

 

  

Thank you for reading.