Progressive Web Apps Part 1: Installable Web Apps
Previously, 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 these traits in more detail. Today we are starting with installable web Apps.
What are Installable Web Apps?
Installable web Apps are progressive web Apps (PWA) that are 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 and without much change to the code. These Apps have the same feel and aesthetic as native Apps do. The degree to which this is achievable will depend on your web browser and operating system.
You can tell if your PWA is installable via certain indicators which can include the following:
- An install button within the address bar.
- An install menu item in the overflow menu.
Also, the majority of browsers will give a beforeinstallprompt event which will directly enable installation from your PWA.
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.
How Do I Install A PWA App?
There are different methods for installing PWA Apps, depending on what device you are trying to install the PWA App on. We explain the method for installing progressive web Apps on iOS, Android, Windows 10 and Mac:
Progressive Web Apps 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 progressive web Apps iOS is relatively simple compared to other devices:
- Instead of using the App Store, go to the PWA web site in Safari on iOS and tap the “share” button.
- Then click 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.
Progressive Web App 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 Web Apps 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 installation, 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 we advise against most users changing the default Chrome configuration, as it may lead to unexpected behaviour in the future.
By using standard progressive web App techniques, you can have your users install your web App on their device, via your website 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 website or by using Microsoft’s Store. If you are going to offer a PWA as part of your website, 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. Their previous case studies, speak for themselves, as does their longstanding reputation as an expert bespoke software development company.