Progressive Web Apps Part 1: Installable
At the start of December, we ran a short article introducing you to Progressive Web Apps. In that article we discussed several common traits of Progressive Web Apps. In a series of articles, we are going to drill into this traits in more detail. Today we are starting with “Installable”.
What Does Installable Mean?
This one is pretty easy! It means that a Progressive Web App (PWA) should be installable on your local computer or mobile device. That is, the user should be able to easily make your PWA appear in your Start menu or your Desktop or Applications with a minimum of fuss. The degree to which this is achievable will depend on your web browser and operating system.
We’re going to save a detailed description of the JSON manifest file for a later article. For now, all you need to know is that for your PWA to be installable, you must meet the following minimum criteria:
- Have a JSON manifest file in your PWA
- Securely serve your PWA using HTTPS
- Include at least one icon in a well-known format
Optionally, you also have to include a service worker if you want your PWA to install on Chrome / Android.
Installing On iOS
iOS is the oldest platform to support some kind of installation for web applications. In fact we built an installable web app for a client many years ago for iOS when Apple refused their App for competitive reasons! In iOS 11.3 Apple “secretly” added much better support for PWAs. The process for installing a PWA is pretty easy on iOS. Instead of using the App Store, go to the PWA web site in Safari on iOS and tap the “share” button followed by the “Add To Home Screen” option. A popup will ask you to confirm, so just click “Add”. Now take a look at your home screen and you’ll see a new icon. Tapping the icon, you’ll see that your PWA opens up in a “frameless” window just like a native App!
Installing On Android
Adding a PWA to your Android device is very similar to the iOS process. You will need the latest version of the Chrome web browser for this to work! Go to the PWA web site in Chrome and you will probably see a banner popup (in the example at the bottom of the screen). If you don’t see the banner, tap the menu button (the three stacked dots in the top right corner). Either tap the “Add Xxxx to Home screen” banner or the “Add To Home Screen” option from the menu and you’ll see a confirmation popup. Tap “Add” and wait for a little while… There is very little in the way of feedback while the installation is taking place, other than an entry in your notification bar. Eventually, the App should appear on your desktop!
Installing On Windows 10
There are two main methods of getting your PWA installed on Windows 10. The easiest from a user’s perspective is to submit it to the Microsoft Store so that the experience of finding and installing it is very similar to that of any other store App. If you don’t want to (or can’t meet the guidelines for the store) submit your PWA to the Microsoft Store then you can still distribute it through Chrome on Windows 10. The user will follow the same procedure as for Android outlined above. The PWA will appear on the desktop and in the user’s Start menu just like any other App!
Installing On A Mac
If you want to install a PWA on a Mac, the best thing to do is wait! No browser currently supports PWAs on MacOS out of the box. You can configure Chrome to work as described above. It’s not difficult to do, but I advise against most users changing the default Chrome configuration as it may lead to unexpected behaviour in the future. For now, just tweet Apple and keep nagging them to add it to Safari!
You can see from this that using standard Progressive Web App techniques you can have your users install your web app on their device via your web site and by the Microsoft Store. This will allow a more App-like experience on their device, but be aware that the PWA is still subject to the limitations of the device’s web platform and may not have access to all device features (e.g. Augmented Reality features). It’s also not too easy for users to find your PWA at the moment other than by stumbling across your web site or by using Microsoft’s Store. If you are going to offer a PWA as part of your web site, make sure that you use a big banner that makes it noticeable until browser developers decide to come up with a more obvious mechanism for indicating that a PWA is available!
Get In Touch
Fill in the contact form below if you are interested in having McKenna Consultants develop a Progressive Web App for your organisation.