Progressive Web Apps Explained

Progressive web applications are a combination of standard website and mobile applications, offering several functionalities previously only found in native Apps. As drop-off rates for native Apps are high, the reasons why progressive web Apps are rising in popularity is increasingly clear.

This comprehensive guide seeks to explain progressive web Apps, discussing how they work, PWA benefits, progressive web App design and why you should consider moving to a progressive web App.

What are Progressive Web Applications?

Progressive Web Apps Explained

Progressive web Apps are web applications that look like traditional or native mobile Apps to the user but are, in fact, regular web pages or websites. These Apps use features of web browsers and progressive enhancement strategy to bring a traditional App-like user experience to web applications.

Progressive web applications have the same speed, responsiveness and comprehensive capabilities as websites with database access and automatic data. They are capable, reliable and installable, and can reach anyone, anywhere and on any device with a single codebase.

How do They Work?

Progressive web Apps (PWA) 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, 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:

  1. An install button within the address bar
  2. An install menu item in the overflow menu

Also, most browsers will give a beforeinstallprompt event that will directly enable installation from your PWA.

The Manifest

We’re going to save a detailed description of the JSON manifest file for later in this 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 A Progressive Web App

Why Progressive Web Apps?

You should turn your web App into a progressive web App as it significantly improves user experience. From improved customer retention to quicker loading You should turn your web App into a progressive web App as it significantly improves user experience. There are many benefits of progressive web Apps, from improved customer retention to quicker loading speed, particularly compared to native applications. The biggest benefit of using PWAs is that they are more responsive, which significantly impacts user experience.

The Importance of Responsive Web App Design

Responsive web App design is not a new idea. It is sometimes described as “mobile-friendly”, but that is only a part of the story. In reality “responsive” means that the experience that the user has of your App should adapt itself to the environment in which the App is running. You can try this with this blog article on your home computer.

If you are reading this article on a desktop with a nice big, modern monitor, then you are likely to see this article in the centre of the screen, with white space on either side and a complete menu at the top. Additionally, you will be able to see “Categories” and “Latest Posts” shortcuts on the right-hand side of the article.

If you start to reduce the width of your web browsers window, you will see that eventually, the complete menu disappears and the “Categories” and “Latest Posts” also vanish. The menu has collapsed into a “hamburger” in the top right corner, as there is no longer enough space to display it along the top. “Categories” and “Latest Posts” have also moved to the bottom of the page and are now stacked vertically, with the article instead of horizontally. The web page has “responded” to the diminishing horizontal width by reorganising the content into a different order. If you shrink the page down further, you will see numerous other simple tricks, such as shrinking images etc. The smaller views are the views that people reading this article on a mobile phone or tablet might see.

There is more to responsive design than just desktops and mobile though. As the world changes more rapidly, newer platforms for displaying the web are emerging. No-one can predict the future of technology with accuracy and attempting to build a “future-proof” progressive web App will be a frustrating and fruitless endeavour. Still, one should attempt to keep the underlying programming of an App as simple as possible, to make it as easy as possible to adapt for future Augmented Reality, Wearable, Bio-Integrated etc. platforms!

PWA Benefits:

1. Progressive

Progressive web Apps should work on any web browser and progressively enhance themselves for browsers with more features.

2. Installable

You can install a PWA to your desktop or mobile device. The PWA will appear in your Start menu, desktop or applications, with a minimum of fuss and without much change to the code.

3. App-like Look and Feel

The App-like appearance is essential for user experience and functionality. A PWA is added to the home screen in the same way as a native App, and offers many of the same features like offline mode and push notifications. Due to the responsive nature of progressive web applications, they are more user friendly and attractive.

4. Better Performance

PWAs cache and serve text, images and other content in a specific, efficient manner, allowing them to operate like websites which significantly improves the running speed. Better performance has a huge impact on user experience and conversion rates, and as a result, a progressive web App can improve customer retention and customer loyalty. In fact, Google found that when page load times go from 1 second to 10 seconds, the probability of a mobile site user bouncing increases by 123%.

5. Fast Installation

The usage threshold is low as no new App needs to be downloaded from an App distribution service. There is no need to search, download and update a PWA as with a native App; rather, users can download the App quickly and directly to their device. This presents a significant advantage, as it streamlines the process and reduces customer abandonment.

6. Offline Operation

One reason to prefer building a native mobile App over a progressive web App has historically been that a mobile App can work (to some extent) without an Internet connection, using cached data. Whereas websites can only work whilst an Internet connection is present. However, Service Workers have allowed for web Apps to compete with mobile Apps, providing a solution to accessing certain web pages when offline.

Cartoon Of A Progressive Web App Service Worker Connecting A Wire

What Is A Progressive Web App Service Worker?

A Service Worker is a JavaScript file running separately from the main browser thread which can determine how various network requests from a web application are controlled. By caching the results of previous requests, Service Workers allow your App to work with poor or no Internet connection for a specific amount of time.

Another benefit of a Service Worker is that they allow for more advanced platform integration, including the delivery of push notifications and allowing for background synchronisation within a PWA.

The amount of caching time can vary for different types of data. Caching isn’t a panacea to cure all your connectivity problems. Specific programming will still be frequently required to deal with situations where out of data cannot be used. This may include issue warnings to the user, locking out specific functions until connectivity is restored and other novel solutions.

Service Workers allow progressive web Apps to work with varying levels of connectivity. However, it’s worth remembering that the level of poor connectivity that an individual App will tolerate depends entirely on the function of the App.

7. No Dependence on App Distribution Services

App Distribution Services like the App Store, Google Play or Microsoft Store have high requirements for what kinds of Apps can feature. Designing a PWA avoids meeting any complicated procedures that may be unnecessarily time and effort consuming.

At first glance, this appears to be a disadvantage. However, upon closer inspection, a progressive web App provides a great user experience and is great for SEO. That’s certainly worth considering! As progressive web Apps are websites, they are discoverable in search engines. Plus, their safety, fast loading time and relevant and unique content put them ahead of native Apps.

In a similar vein, progressive web Apps link to the web at a specific URL, so there is no need for a complicated installation process or an App store. An improved search ranking is a considerable benefit of switching to a progressive web App design, as it ensures that your App is still discoverable despite a lack of exposure from traditional App platforms.

8. Push Notifications

Progressive web Apps seek to improve engagement with your users using push notifications (just like the ones you get on your iOS or Android phone). For progressive web Apps, this is achieved using two different technologies in combination: Push and Notifications.

Push notifications are very short messages (a bit like text messages) that appear on your progressive web App users’ device when sent from your server. Users must permit your progressive web App to display the Push Notifications before they see them, so they are not a guaranteed method of communication. Use push notifications in your progressive web App design to encourage engagement with your App, and remind users to use your App more frequently.

If you use push notifications incorrectly, then you may annoy your users. Generally, it would be best if you used push notifications sparingly. If you bombard your users with a new notification every few minutes, they will immediately unsubscribe. It would be best if you also avoided pushy sales notifications as this will also lead to users unsubscribing. Finally (especially in the modern GDPR world) you should not include personal data in push notifications. Your users will not be happy if they are giving a presentation on their laptop and a push notification about their bank balance appears on the screen!

How to Create a Good Push Notification

You should seek to make your push notifications short, relevant, useful and content-based. Your notifications should tempt your users to click on them to view a specific piece of content in your progressive web App. Examples of good push notifications are:

  • “Your drive to work is busier than usual.”
  • “We are shutting down the email server at 2 pm today for one hour.”
  • “FTSE rises by 13% this morning. Is it time to trade?”
  • “A new Star Wars article has been published on SciFiNerds.com.”
  • “A new user has registered. Please check their identity.”

Each of these quickly delivers a short message that the user can then act on or ignore appropriately. Short, content-based push notifications that will be useful to your users are much more likely to lead to a maintained push notification subscription and better engagement overall.

Spinning Globe With Speech Text Bubbles Around The Edge

9. Automatic Updates

Progressive web applications automatically update when the user visits them, making it unnecessary to download and install any batch changes. So, without bothering the user with a permission request for updates, you can reserve any push notifications for engaging and re-engaging users with your App.

10. Security

Progressive web applications must be hosted over HTTPS to ensure the secure delivery of data. Therefore, content and interactions are as safe as they can be with as on a secure website.

Progressive Web App Design              

Wooden Figurine Of A Man Climbing Up Stairs

Progressive Enhancement

Progressive web Apps should work on any web browser and progressively enhance themselves for browsers with more features.

One of the first tasks to accomplish when designing a progressive web App is to understand a little bit more about your users, considering the following questions:

  1. What devices do they use?
  2. What operating systems?
  3. What web browsers?

Combine this information with the “art of the possible”, and you will get a good sense of a base set of browsers that you should aim to support with your progressive web App. In general, all other things being equal, we would typically recommend looking at the “evergreen” browsers (Edge, Chrome and Safari) on Windows 10, iOS (11 and 12) and Android (5+) as a good compromise between technology and population coverage. You can always add Internet Explorer 11 to that list, but the usage is very low, and your investment in keeping it supported is unlikely to yield a good return. Similarly, Firefox has a diminishing user base, and we would not recommend making special efforts in supporting it.

Progressive Enhancement Examples

An example of a practical Progressive Enhancement that you might make in your App is syncing of data in the background. Background syncing of data for your progressive web App is not widely supported in different browsers (only Chrome has good support at the moment), but it can improve the perceived response times for your App. If your App contains some commonly used data that changes infrequently, you can use background sync to download this data silently whilst the user is performing other tasks in your App.

Let’s say that you have a large address book in your App. When your App starts, the address book downloads and syncs with your current data in the background. Whilst this is happening, the user wanders around the App, performing some other tasks. When the user then wants to find an address, the finder function in your App can instantly search its local copy of the address book. If the browser does not have background data sync as a feature, then the user can perform all the same actions. Still, when they come to find an address, the App must contact a web service to either download or query the data resulting in a slower but still acceptable experience.

Progressive Enhancement Verdict

The jury is still out on Progressive Enhancement in general. It may prove more economically viable to exclude browsers from your App rather than trying to provide an experience that works on “all” browsers. This is particularly true when your organisation has more control over the target platform for your progressive web App. That being said, progressively enhancing your web App is a great idea, as long as it remains economically viable.

Woman Working At A Desk With A Laptop And A Tablet Beside Her

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 below:

Progressive Web Apps iOS

iOS is the oldest platform to support some kind of installation for web applications. 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 on iOS is relatively simple compared to other devices:

  1. Instead of using the App Store, go to the PWA web site in Safari on iOS and tap the “share” button.
  2. Then click the “Add To Home Screen” option.
  3. A popup will ask you to confirm, so just click “Add”.
  4. 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.
Using A Progressive Web 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!

  1. Go to the PWA website in Chrome, and you will probably see a banner popup (in the example at the bottom of the screen).
  2. If you don’t see the banner, tap the menu button (the three stacked dots in the top right corner).
  3. 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.
  4. Tap “Add” and wait for a little while…

There is 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:

  1. 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.
  2. 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.

Apple Macbook With Dock Icons Showing With A Desktop Background Of A Field Full Of Yellow Flowers

Our Recommendation

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. Check out our recent blog if you are considering creating an App for your business.

Progressive Web App Design Best Practices

1. Optimise for both desktop and mobile

Good user experience should be the priority for your progressive web App design. As a PWA is cross-platform, make sure to optimise for both desktop and mobile devices. The footer is one place, in particular, you may want to keep in mind here. A footer displays the same information on each page and could take up unnecessary space on a mobile device, even though it looks fine on a desktop. Many native Apps do not have footers, so we recommend following their lead by creating an easily navigable menu bar.

2. Keep it simple

Remember: less is more. To enhance the user experience, keep the navigation simple and obvious, to avoid any confusion. Make sure the navigation is fast, too, to allow users the freedom to get where they want to go quickly and easily.

3. Use a back button

Make sure the back button returns to the exact scroll position in the list they were on. If not, the user experience may be inhibited as customers may get frustrated if they have to scroll endlessly.

4. Show interaction

Acknowledge the user’s action on your PWA. Don’t leave your users wondering whether or not their interaction was registered.

5. Ensure smooth page loading

Performance is key to user experience, so scrolling and animation should feel smooth. To avoid content moving around the page, you may consider adding placeholders for images in case of slow loading speed.

6. Create an attractive home screen logo

Similar to native Apps, a user will add your progressive web application to their home screen. Ensure to create an attractive home screen logo that stands out from other Apps.

7. Provide share options

Make it easy for your users to share URLs and content to peers or on social media. This is particularly important when customers are at the end of the sales funnel and are ready to become your promoters.

Take advantage of the latest technologies and convert your web App into a progressive web application. There are many benefits of PWAs, that can be of great advantage to you and your organisation.

Please contact us if you wish us to explain progressive web Apps any further or discuss the PWA benefits in more detail specific to your organisation. Our previous experience speaks for itself, and we pride ourselves on our long-standing reputation, so make sure to view our case studies to see how we can help you with your progressive web App design today.

Nick McKenna
Since 2004, Nick McKenna, BSc, MBCS Biography has been the CEO of McKenna Consultants. McKenna Consultants is a bespoke software development based in North Yorkshire, specialising in Cloud development, mobile App development, progressive web App development, systems integration and the Internet of Things development. Nick also holds a First Class Degree in Computer Science (BSc) and wrote his first computer program at the age of nine, on a BBC Micro Model B computer. For the last 21 years, Nick has been a professional computer programmer and software architecture. Nick’s technical expertise includes; Net Core, C#, Microsoft Azure, Asp.Net, RESTful web services, eProcurement, Swift, iOS mobile development, Java, Android mobile development, C++, Internet Of Things and more. In addition, Nick is experienced in Agile coaching, training and consultancy, applying modern Agile management techniques to marketing and running McKenna Consultants, as well as the development of software for clients. Nick is a Certified Enterprise Coach (Scrum Alliance), SAFe Program Consultant (SAI), Certified LeSS Practitioner (LeSS) and Certified Scrum@Scale Practitioner. Outside the office, Nick is a professional scuba diver and he holds the rank of Black Belt 5th Dan in Karate.