Progressive Web Apps are Web Applications, which meet the technical requirements defined in the official Checklist you can find here. Even tough they are Web Apps, they behave and feel like a native app, because they have implemented features like:
- Usable when offline
- Service Worker
- Shows install prompts
- Can be added to the home screen
- Sends Push Notifications
The basis of PWA are fast loading times. Specifically: loading time for the first visit should be <10s, even on a 3G network. This can be achieved by optimizing the webpage or with tools like AMP, which can help to reduce the page loading time to 3s. In order to test, if your website verifies as fast enough, you can check it with the Chrome extension “Lighthouse” in the Developer Console.
The PageSpeed Insight Tool can help you to recognize what is to improve and what steps you can take to a better performance.
The Lighthouse Tool can run an overall performance test on your web app. Lighthouse generates an extensive Report for you, including PWA, SEO and Accessibility.
Usable when offline
The most significant factor of PWA is that they can be accessed and used while being offline. This is achieved with the Service Worker, which will download the page in the background. When the user now visits the page again while not being connected to the internet, he can still view and interact with it.
The Service Worker
A Service Worker is a programmable network proxy that lets you control how network requests from your page are handled. With a Service Worker, you can do the following:
- Using the Fetch API, so we can serve resources from the cache when the user is offline
- With the Push API we can display the Push
- Notifications to the user
- Background Sync API to send data when online, but saved in the PWA when offline
It’s nice to be able to use a page when being offline, but no one types in a URL when being offline – because users are simply not used to that. That’s why they should be able to install the app – and that’s what they can do.
With the installation prompt, they can download the app for offline usage and the app icon will be added to the Home Screen – just like a native app.
- Downloads content page
- Prompts user to install the app and to add it to the home screen
- If the user installs it, the app icon will be added to the Home Screen
Launches from the home screen
To make the Web App feel truly native, the Home Screen Icon is a Must. Combined with the Launch screen, this is what sets it apart from websites.
Push notifications are the one helpful tool to get people’s attention.
If you are interested to learn more about the topic, read our second article about Progressive Web Applications.