A recent chat with a client about whether to re-create their extranet as a separate native mobile app (an app that gets downloaded through an app store) led to some interesting conversations.
The extranet is mobile responsive. This means that the layout already adapts to work well on phones. But it is lacking functionality that native mobile apps offer. Creating a separate mobile app would be expensive and another overhead to maintain, but with Apple’s decision to support Progressive Web Apps, there is an alternative option.
Progressive Web Apps would still enable us to improve the current extranet, introducing features usually associated with native apps. In fact we already do this on all our websites to some extent by offering an offline version of the website when the user isn’t connected to the internet, rather than defaulting to the browser’s ugly and not very useful “you are offline screen”
What is a progressive web app?
Other articles such as this on A List Apart give a more detailed definition of what a Progressive Web App is. For the purposes of this article, I’m going to define Progressive Web Apps as websites with super powers.
For fun, let’s consider a selection of these powers as a Super Heroes:
“The Incredible Push Notifier”
Push notifications provide a mechanism to alert users to changes on a website, even when users don’t have a browser open. Taking our extranet for example, these could be used to display a badge on the phone when a new article has been published.
“Super Working Offline Woman”
Progressive web apps allow for storage of content that the user can access even if they don’t have an internet connection. A use case for this would be allowing the user to save articles for reading later. The user could then read them at their leisure, even if they are on a train with limited connectivity.
“Flash Lightning Loader”
Progressive web apps can be optimised to load quickly. Not only in terms of what it takes to download, but they also have the ability to check the network speed and load resources based on this. In addition, they can cache some of the site's resources so that they don’t need to keep downloading assets and can refresh content in the background - so perhaps a list of articles can be preloaded ready for reading in the morning.
“Install me on your home screen man”
OK, so I admit that I’m seriously regretting the analogy now…
Progressive web apps can be added as an icon to the home screen on phones. If a user launches the site from this icon we can control how it displays - for example by hiding the address bar. This provides the user with quick access to the PWA, but also feels very “appy” (for want of a better word). It’s worth noting that there is a big difference between how the user does this on different operating systems. On Android there is a prominent “add website to Home Screen” and on iOS it is accessed through the share button. It is however possible to replicate the Android functionality on iOS using additional coding.
In addition to this, progressive web apps will also work on desktops. On a Mac the icon can be added to the dock just like the native mac apps.
Advantages of Native Apps
As you can see there are many advantages to using PWA technology, and these powers are just a selection - I’ve not even touched on functionality that allows the PWA to use a phone's hardware (camera, torch etc).
There are also advantages that Progressive Web Apps have even over Native Apps. Amongst these there are:
- Cost: PWAs are often cheaper to produce than Native Apps
- Publish once: No need to add content to different applications for iOS, Android and a website
- PWAs count towards SEO: Unlike native apps, PWAs exist on the open web so they can be linked to, and they can be found from search engines
- No App Store: App stores can make you jump through all kinds of hoops before they’ll allow your app on it
So what’s the drawback?
Before rushing off to create a Progressive Web App, it’s worth considering these disadvantages:
- Functionality - Some of the super powers may only be partially supported on different devices. This is also true of native apps but it’s fair to say that support for native apps will be added before support for PWAs.
- Discoverability: Not being on the App store can actually be disadvantage, as people will go to the store to discover new things, and there are ways in the store to promote your app
- Hardware integration: Native apps will always be closer integrated with hardware, meaning that you may not have access to all the features of the phone such as accelerometers.
- Storage limit: Generally most devices are allowing about 50mb of storage for each PWA. A useful amount but not suitable for all applications.
Do you need a Native App?
So should you build a native app or a progressive web app? As with most things related to the web “it depends”. Overall if you already have a responsive website and are looking to give it super powers then this is definitely something worth considering. My advice is to start with the idea, then research which features you need before deciding on the technology.
Matt is focused on strategic vision and ensuring this is followed through to exquisite execution. Having been an award winning designer since 2001, he knows how to put the user first while building stakeholder alignment in order to deliver key objectives. It’s this passion for understanding people that enables him to design the best experiences for them. @matsaukeo