fbpx Skip to content

Aquent | DEV6

Progressive Web Apps

Written by: Tunji Akinbami

Progressive Web Apps (PWAs for short) are applications that have the look and feel of a typical web application, while taking advantage of native mobile features. In this post I’ll let you know what the features of PWAs are, why you want to use them, and introduce the main building blocks for creating them. In a later post I’ll get into more of the how-to using service-workers.

What are Progressive Web Apps?

It’ll be easier to understand what a progressive web app is by using native mobile apps and traditional web apps in context.

Let’s start by outlining the typical features of a web app:

  • Built using HTML, JavaScript and CSS (focusing on the front end)
  • Installed and hosted on a server
  • Accessed using a URL
  • Requires an internet connection
  • Network latency has effect on performance

For native mobile applications:

  • Usually built with the official SDK of the device (Swift or Objective C for iOS, Java or Kotlin for Android)
  • Fast performance and a high degree of reliability
  • Push notifications and offline storage
  • More friction during app installation since you can’t download from a URL. Typically, you’d have to install it from the official stores of the device (Appstore for iOS and Google Play for Android).

Progressive web apps have the best features of native and traditional web apps. In other words, they are applications with high performance in mind and native-like features like push notifications and offline data storage, while being easy to access and install. The demand for PWAs stem from web developers that have always wanted to provide a native-like user experience to their applications without the restrictions that come with publishing native mobile apps.

Reasons for creating Progressive Web Apps

  1. PWAs are always available, meaning they can work in areas of limited or absent internet connectivity
  2. They can be installed directly onto your device without having to go through an application store
  3. They can be promoted on leading search engines with SEO techniques. This is attractive to businesses with existing web apps looking to rank higher on Google or another search engine
  4. They’re designed with high performance in mind. Studies show that the bounce rate tends to increase when a web app takes a long time to load a page.
  5. If your target audience includes emerging markets where internet connectivity might not be that reliable, integrating progressive features into your application will ensure that your users enjoy an engaging user experience.

Features of Progressive Web Apps

PWAs share a lot of similarities with traditional web apps, in fact it’s very difficult to differentiate between them by just observing at surface level. Ideally, PWAs should be all of the following:

  • Responsive: fit into any screen size whether desktop, laptop or mobile device
  • Connectivity Independent: can work offline or slow internet network conditions
  • App-like: use the app shell model which provides native-like navigations and interactions
  • Fresh: use a service worker to retrieve up-to-date content
  • Safe: served via the Transport Layer Security protocol (TLS) to prevent snooping. Service Workers are required for this
  • Discoverable: users can find content in PWAs with search engines
  • Installable: users can add apps to the home screen of a device without having to go through the app store
  • Linkable: PWAs can be shared by URL; downloading and installing from an application store is not required

Building blocks

Web App Manifest: We use the manifest file to provide information about the web app. It’s a JSON file that contains the necessary information for installing the web application onto the home screen to provide an app-like experience. The information provided usually includes name, author, icons and description.

Service Workers: The Service Worker is a JavaScript file that contains worker scripts that run in the background. They enable the developer intercept network requests, handle push messages, cache resources and perform other tasks. Note however that not all browsers have support for Service Workers or their core functionalities. For instance, the web push notifications feature is implemented using Service Workers and is supported on Chrome but not on Safari for iOS.

Service Workers give developers a lot of tools to use at their disposal, one being intercepting network requests. However, as the saying goes, with great power comes great responsibility. Since the Service Worker layer in vulnerable to attack we must serve the web application using TLS. Meaning its URL has ‘https’ as its prefix and not ‘http’.

Conclusion

The demand for web applications with a seamless user experience continues to grow as more people access the internet to get the information they need. Progressive Web Apps present an opportunity for developers to create these types of applications as browser vendors gradually add more support for progressive features by adding the necessary APIs. In addition, you can transform your existing web application into a progressive web app if they meet the strategic objectives of your business. For more information you can visit here and in a later post I will give an introduction to service workers which are a core part of progressive web apps.