Progressive web apps are essentially web applications that feel and function like a native mobile application. They continue to gain traction due to the positive impact they have on user-experience: advanced capabilities such as offline use and push notifications, and the ability to be “installed” on the user’s device.
PWA’s encompass the best things about a native phone app along with the flexibility and instant nature of the web.
Native vs. Web Apps
An app, or application, is simply a piece of software designed to serve a purpose. This can range from simple applications such as a calculator through to more complex applications such as word processors.
A native application is one that is designed for a specific device. An application designed for a specific device will often have deep access to that device’s functionality and will be able to maximise performance and integration through the device’s API’s.
Modern applications, such as those within the iOS app store, have to follow strict rules in order for them to be available to download on a user’s device. These rules are intended to improve security, performance, and experience. Apps within these stores are there at the whims of the platform owner and rules are not always obvious nor technically motivated (such as whether to allow a competing payment provider).
Web applications are written for browsers. They utilise various platforms and libraries to provide an experience that can be accessed anywhere. A single website application is able to target desktop, mobile, tablets, tv’s, consoles etc all from a single codebase.
Web applications leverage the inherent power of the internet offering high levels of discoverability and a vast ecosystem of 3rd-party providers, tools, and integrations.
For all of the freedom they provide, web applications require launching a browser and typing an address to access them and they typically do not have access to the same device features as a native application (such as the local file system storing your media, camera, microphone, fingerprint scanner etc).
Progressive web applications are intended to close this gap by offering the advantages of a web application whilst behaving more like a native application on a user’s device (such as the ability to be “installed” and access to more device features).
Under the Bonnet
Progressive web applications leverage a variety of technologies to provide an experience as close to native as possible – so it may be best to think of them as a design/development philosophy. There is no single test to prove that a web application is a PWA although there are tools, such as Google’s lighthouse, that will attempt to score the application based on the presence of certain features.
That said, there are a number of features that exist within PWA’s:
Service Workers
A service worker is a script that intercepts requests and allows for the control of functionality such as caching to allow the web application to function whilst offline and background services.
They offer a lot of potential by responding to, and controlling, data even when the user is not actively using the web application – such as push notifications.
Manifest File
This is a file that describes how the web application appears in the context of the device it is on. For example it dictates the icon displayed when the web application is installed on the device.
Secure Contexts
The web application must be served over HTTPS in order to have access to features such as service workers.
A final note
Many modern websites that you visit are actually using progressive web app technologies to provide an experience closer to that of native applications. You can see this when you visit sites like Twitter, Gmail, etc.
If you want to install them, you can simply utilise your mobile browsers built-in functionality. This varies from browser to browser; On Chrome for Android, for example, PWA’s get an “Install app” link in the browser menu. Whilst any site can be added to your home screen, PWA’s can be installed and will provide you with a more immersive experience when you do this (crucially they will launch in their own window with no browser interface, have a nice icon, colours matching the app, etc).
The functionality available to web applications through browser API’s is improving all the time which means that PWA’s will become more sophisticated and able to offer you parity with your native applications. This means you get all of the benefits of the web whilst still being able to offer a great experience on individual devices.
