PWA & DX Part 1: A Buzzword Demystified

During the last decade providing professional services in Content Management (CM) and Digital Experience (DX) projects, I noticed a lot of need to clarify what a Progressive Web Application (PWA) is and how it can help in CM and DX Projects. I figured that the best way to clear the confusion is to say what it is not - but often confused with:

1. A PWA is not a Single Page Application (SPA).
2. A PWA is not a static website.
3. A PWA is not a native app.
4. A PWA is not a website that contains JavaScript
5. A PWA is not a website based on VueJS, Angular, or React (please add your framework of choice).

The confusion comes from the fact that all of the architectures mentioned above can become a PWA!

Now let’s look at what a PWA is without diving too deep into the academics, but what business benefits it generates:

1. It is a web application provides additional metadata through a manifest with icons and information like the app’s name, description, etc.
2. It contains a Service Worker, a piece of JavaScript that controls the fetch of new data (yes, also other static HTML files).
3. It is optionally installable like a native app.
4. It has capabilities like a native app; for example, it might have access to push notifications, location information, a camera, a local file system, and other storage.
5. It is served securely via HTTPS.
6. It provides good reliability without a good network connection, which means you can use the PWA also offline. For example, the PWA offers you to edit data and store it locally until you have a network connection. Or it allows you to download large documents like videos for offline use. An example is https://pwa.zdf.de.

The business case is to provide Digital Experiences with faster, sometimes more “native” User Experience (UX) and offline capabilities.

Almost any web application can be turned into a PWA. Therefore it is good practice to design the architecture as it fits best and then consider adding PWA capabilities.

For example, I have often seen architects design a SPA for marketing websites - with the idea of making it a PWA. In most cases, a static webpage or “JAMStack” Architecture is here the best fit; it provides the best performance, stability, and better Search Engine Optimization right off the bat. Even Vue.js promotes Static Site Generation for static content.

Adding a manifest, some icons, and a Service Worker that makes internal pages offline available (either automatically or by a user request or setting), turns the static website into a PWA.

If you like to read more about Software Architecture, PWA, DX and CM then feel free follow my social medias for updates. In the meantime I can recommend the following article and website: https://web.dev/what-are-pwas/