5.1. Progressive Web Apps

5.1.1. What Are PWAs?

Progressive Web Apps (PWAs) are a modern approach to building applications that provide native application like experiences using web technology. They combine the reach of the web with features that are traditionally associated with native apps, like offline functionality, fast load times, and the ability to be installed on a user’s device.

One of the major advantages of PWAs is that they re-use the existing browser engine so that you don’t need to download a large application.

Attention

PWAs follow a loose collection of specifications and are not widely supported by browsers.

Similar Technologies

There are competing alternatives to PWAs such as Electron, which is used by Discord and Slack amongst others. They share some similarities with PWAs but often differ in that they bundle a browser engine with the application.

5.1.2. Examples of PWAs

• https://open.spotify.com/: A lightweight, web version of Spotify, which is locally installable.

• https://music.youtube.com/: The youtube music site is designed as an app which can be run in the browser or locally.

• https://m.uber.com/: Uber provides a PWA version of their native apps to support a variety of devices.

When you visit any of the above examples with a PWA compatible browser such as Google Chrome, you will be prompted to download and install it as a local application.

5.1.3. Principles of PWAs

PWAs are built on three main principles:

• Progressive Enhancement:

  • The app should work on any device with a compatible browser, but modern browsers will provide enhanced functionality.

  • For example, older browsers might not support offline capabilities, but the app should still function.

• Responsive Design:

  • The layout and functionality of the app should adapt to different devices and screen sizes, from phones to desktops.

• Connectivity Independence:

  • The app should function, at least partially, even when the user has no internet connection.

5.1.4. Comparison of App Types

The table below summarises the differences in usage and features between traditional web apps, native apps and PWAs.

Feature	Traditional Web Apps	Native Apps	PWAs
Installation	No installation needed	Download from app store	Add to home screen from browser
Offline Support	Limited or none	Full offline functionality	Works offline using caching
Performance	Browser-dependent	Optimised for the device	Native app-like
Updates	Manual updates by user	Via app store	Automatic updates via the web
Cross-Platform Support	Universal across browsers	Platform-specific builds	Universal via modern browsers

5.1.5. Technology of PWAs

PWAs rely on three key technologies, the first two will be covered in detail in the following pages:

1. Web App Manifest

   • A JSON file that describes the app’s metadata (e.g., name, icons, theme color), which are used to present the PWA to users like a native app.

2. Service Workers

   • Background scripts that enable caching, offline functionality, and background tasks.

3. HTTPS

   • All PWAs must be served over HTTPS to ensure security and protect user data.

[TODO] Add a section and graphics explaining how PWAs use existing installed browser engine.