Introduction to progressive web apps

PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.

For example, web apps are more discoverable — it's a lot easier and faster to visit a website than install an application, and you can also share web apps via a link.

On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users love tapping their homescreen icons to easily access their favorite apps, rather than navigating to it using a browser.

PWAs give us the ability to create web apps that can enjoy these same advantages.

It's not a brand new concept — such ideas have been revisited many times on the web platform with various approaches in the past. Progressive Enhancement and responsive design already allow us to build mobile friendly websites. Working offline and installing apps was possible in the Firefox OS ecosystem a few years ago.

PWAs, however, provide all this and more, without getting rid of any of the existing features that make the web great.

It's not that obvious if a web app is a PWA or not from first glance. An app could be considered a PWA when it meets certain requirements, or implements a set of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc.

In addition, there are tools to measure the completeness of an app in percentages. (Lighthouse is currently the most popular one.) By implementing various technological advantages, we can make an app more progressive, thus ending up with a higher Lighthouse score. But this is only a rough indicator.

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

• Discoverable, so the contents can be found through search engines.
• Installable, so it's available on the device's home screen.
• Linkable, so you can share it by simply sending a URL.
• Network independent, so it works offline or with a poor network connection.
• Progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.
• Re-engageable, so it's able to send notifications whenever there's new content available.
• Responsive, so it's usable on any device with a screen and a browser — mobile phones, tablets, laptops, TVs, fridges, etc.
• Safe, so the connection between you and the app is secured against any third parties trying to get access to your sensitive data.