Progressive Web Apps (PWA’s) are one of the most exciting innovations to arise in the web development space recently, and it is becoming more and more important to understand why they are so great. You can think of a PWA as the best of both a website and a mobile app. A website that can be accessed normally via a desktop, but also mimics an app interface and format when accessed using mobile devices. They allow users to install shortcuts to the site onto the home screen of their phone, and can even be accessed offline.
Why Use a PWA
User retention is already hard enough, and if you have to direct your users to the app store to then download your native app you will have an even harder time. There are quite a few steps on that path where you will inevitably see some drop off in users, as they have to firstly open the store, find your app and then download/install it. PWA’s have the advantage of not needing to redirect your users away from the website. They will simply be prompted to install the shortcut when they load the site for the second time, and after that will be able to access the app from a shortcut on their home screen. This is a much more seamless process and should result in higher user retention. Another huge factor is that a PWA benefits from being able to send push notifications directly to the users’ phone, which is a great way of getting return customers. This is a great advantage for ecommerce sites and is one of the reasons ecommerce giants Alibaba changed over to a PWA
Website maintenance becomes easier when using a PWA. Whereas in the past a company may need 3 separate applications to cover the web, android and ios, now they only need 1 single application. Only needing to do a third of the development has the obvious benefit of saving development time and money, but is also great for the users too! Instead of needing to download updated versions of the app, all updates to the code will be available for them whenever they access the app.
What Makes a PWA
To be a PWA, an application has certain criteria it needs to meet. Luckily for us, when the term Progressive Web Application was coined, the characteristics that the app must meet were also defined.
1. Responsive
A simple one, the app must scale to the devices viewport size, which is something all websites should be doing these days anyway.
2. Connectivity Independent
Accessible without an internet connection – This is achieved via a Service Worker.
3. App-like Interactions
Use a shell+content application model to create a web app that looks, and feels, like a native application.
4. Fresh
New changes to the app are available instantly without the user having to redownload anything.
5. Safe
Basically just means that it needs to be served over SSL. This is a requirement over the Service Worker as well.
6. Discoverable
The PWA needs to be identifiable as an Application, which can be achieved with a manifest file and a Service Worker letting search engines discover them.
7. Re-Engageable
A PWA needs to be able to access the reusable parts of the phones UI – for example, the push notification functionality.
8. Installable
Being able to install the application as a shortcut on the phones home page is a key component in being a PWA.
9. Linkable
This means that the app can be shared via a link. It doesn’t sound like a big deal, but being able to link someone an application where they then have the choice to download it and access it that way OR just using the URL is an important difference between a native app and a PWA.
Turn Your Website Into a PWA
It’s actually pretty easy to turn most websites into a PWA, assuming the UI already looks similar to an application. You only need to check 3 things.
Firstly, your site needs to be served over https. This has been standard for more than a few years now, so this one should be checked off by default. If it isn’t, go change that now.
You also need something called a ‘Manifest’ File. This is a simple JSON file, that is used to pass some data about the PWA to the browser. You specify the icon and name of the shortcut in this file. Your manifest.json needs to follow the W3C’s specification.
Lastly, add a service worker. These are used to access the application offline, and come in the form of a relatively simple javascript file. You can even get code snippets from google to get yourself set up quickly.
In Conclusion
Progressive Web Apps are an interesting innovation that has almost no downsides, but lots of benefits for your users. If you are building any sort of web application, dashboard or business solution that will be used primarily by mobile users, turning it into a PWA is a no-brainer. Interested in how we can build a PWA for you? Reach out today and call us on 0115 971 8908, we’d love to get to know a little more about your project and how we can help. Even if you just need some free advice!
By
Charlie
