Progressive web apps (PWAs) are trying to close the gap between native device applications and websites to create better user experiences across all devices.
Most browsers have now adopted the new APIs that give PWAs the ability to function and look similar to the native application. For a quick refresh on what a PWA is, check out my article on “What is a PWA?”. This time, we are going to take a deeper dive into some PWA features and how they can be implemented.
Add to home screen
One of the things which makes a PWA feel like a native app is the ability to add it to the home screen of your device. When a user first opens your PWA, they will be invited to “Add to Home Screen”.
Clicking this will download the PWA and add a nice icon to the home screen of your device so that you can launch it in the same way as a native app. Clicking the home screen icon doesn’t open the PWA in a browser window like a standard website but in a separate window, displaying a splash screen while it loads. This is achieved using the Web App Manifest, which tells the browser the name of your app, which icon to display, how the splash page should look and any colour schemes required.
Fast loading on slow or no network connections
When your PWA is added to a user’s home screen, all the app’s files are downloaded to their device. Because the files are local, this means that the PWA will load quickly on slow networks or with no network at all.
And a PWA has another trick up its sleeve – Service Workers.
Service Workers are scripts that run in the background separate from the app, which allow it to respond to events that it’s listening for. They are installed when a user first loads the app and are an extremely powerful tool for the developer. One of the main ones is the Cache Web API which caches all of the resources for the app. This means that the next time the user loads the app, the service worker already has the resources needed and loads them super fast.
Clever App Architecture
Another main feature of a PWA is the application architecture or shell. This is a design principle where the main shell or user interface, such as menus, header and footer, are loaded first (and cached) and then the content is dynamically loaded in afterwards.
This means that the user is able to see some content immediately without waiting and, combined with services workers to cache the app shell, this results in significantly enhanced performance.
This design approach creates a better user experience and also makes your app feel fast and native.
Notifications
Push notifications allow users to sign up for notifications and receive up-to-date information on any device without having to be in your app. This provides businesses with a way to re-engage with users without requiring rigorous sign-up processes or installs.
Using the Push Web API and the Notifications Web API, PWAs ask users as soon as they land on your app whether they want to receive notifications. Once a user accepts, the app can start sending them notifications directly to their browser – even when they are not on your app. There are services such as One Signal and Pusher which help developers to store the details and send the notifications.
In the Notification generator app you can test the different notifications and see how they look in your browser.
Unfortunately, not all browsers have implemented this API yet. Perhaps the most disappointing is the lack of adoption by Safari on IOS (Apple iPhone). While all other evergreen browsers now support Web Push API, Apple has implemented their own version which requires a lot more setup and is only for Safari. However, Apple have adopted most of the other Web APIs and have mentioned that the Push API is in their future pipeline.
More features
While I have outlined the main features that help to make a PWA, there are also a lot of other Web APIs and features that can be implemented. There are even more features planned and in development. To find out exactly what each browser can access and do, check out the What Web Can Do Today site.
If you are interested in developing a PWA or finding out more about how they could work for your business please contact Mogul.
