What are PWAs?
Simply put, they are websites that feel more like an app.
They load quickly (no App Store involved), can be added to your smartphone home screen, function offline and can send push notifications – making them much more convenient than a traditional web app.
Unsurprisingly, Google came up with the term, and PWAs are seen alongside Accelerated Mobile Pages as a weapon in the fight for slick mobile UX (fundamentally, quick and reliable loading).
PWAs were made possible by advances in JavaScript and web browsers which now support more HTML5.
How do they work?
App shell
PWA’s use an app shell, which is the minimal HTML, CSS, and JavaScript required to power the user interface.
The first time you load the app, the app shell is cached on your phone.
On subsequent visits, this app shell is loaded very quickly from the local device cache, reducing the volume of data that needs to be freshly downloaded.
Service worker
The work of caching the app shell is done by a service worker.
Service workers are JavaScript files that can control a particular website by modifying navigation and resource requests. These workers decide what is cached and when.
Service workers are not exclusive to PWAs; they already enable features like push notifications.
App manifest
The manifest is a JavaScript file that controls how your website (PWA) appears to the user (for example on the device home screen), and directs what functionality can be launched and how.
Chrome on Android allows PWAs to display a banner to the user, asking them if they would like to add the app to their home screen (similar to a native app download prompt).
What are the benefits?
The benefits of Progressive Web Apps are as follows:
- Fast & reliable: They respond quickly and can work offline
- Engaging: The app-like UX is more enjoyable to use.
- Progressive: The whole point of PWAs, they are designed to work on any browser (and don’t involve an app store).
- Responsive: They are responsive websites, so can run on phone, tablet or desktop.
- Fresh: The service worker allows the app data to be updated ‘behind the scenes’.
- Safe: Served via HTTPS.
- Discoverable: Search engines can find PWAs.
- Re-engageable: Push notifications.
- Installable: Can be added to the home screen.
- Linkable: Sharable via URL.
Do they have any downsides?
Safari has not yet implemented support for service workers, the Push API or web app manifests. That means functionality is severely reduced.
Social media apps may have their own in-app browser which doesn’t support PWAs, and so sharing via social can be troublesome.
Fairly obviously, PWAs are not listed in app stores, meaning people looking there may not find your company.
Give us an example then!
Airberlin has developed a PWA allowing passengers to view their boarding pass and details about their destination.
The Washington Post also released a PWA back in May. It will roll out fully by the end of the year, aiming to be the fastest news site on the web. Check it out.
Finally, Flipkart is one of Google’s most impressive case studies. India’s biggest ecommerce player developed a PWA that resulted in a 70% increase in conversions.
The retailer also saw a 40% higher re-engagement rate and 3x lower data usage.
Comments