The concept of the Progressive Web App (PWA) is gaining momentum and is becoming an increasingly popular way to create apps for mobile devices. Nobody needs convincing of the value of being present on the home screen of your customers’ smartphone devices, but the question of which technology you should use to get there has become a whole lot more interesting with the emergence of a viable alternative to natively developed apps. Marcin Dąbrowski, Chief Innovation Officer at ITMAGINATION, helps us get to the bottom of questions like ‘What is a PWA?’ and ‘What are the benefits of Progressive Web Apps? and ‘Is the PWA approach the right one for your business?’
When browsing the web on your mobile, have you ever noticed a bar appear at the bottom of your screen with the words “Add to Home Screen?” If you’re prompted to do this, there’s a good chance that you’re dealing with a Progressive Web Application (PWA).
The key words here are Web and App (or Application). Essentially, a PWA is a mobile app that is built using the same tools and technologies that would be used in the creation of any modern web page (e.g. HTML5, CSS and, above all, JavaScript). The momentum behind PWA has been driven by Google’s work on the Chrome browser and its advancement to deliver new features and greater integration with the technologies used in mobile devices. The development teams behind Chrome (Google) and Safari (Apple) are working to allow their ‘web’ browsers to access functions such as the device’s camera, the device’s battery level or even additional devices connected to the smartphone via Bluetooth. This is in addition to features that we’ve probably all come access, such as requests to use a user’s location or deliver notifications in much the same way that a natively built app would send a ‘push’ notification.
Progressive Web Apps are not new ‘per se’ and were identified by Gartner as far back as 2017 as a key component of any company’s overall mobile development strategy. Interest, though, has intensified with the latest browser developments (notably the use of Trusted Web Activities or TWAs in Chrome 72) and retail commentators, such as Jason “RetailGeek” Goldberg, who leads the Commerce and Content practice at Sapient Razorfish, recently identified Progressive Web Apps as a trend that would come to prominence in 2019 in a podcast for the National Retailer Federation (NRF). There, the feeling was expressed that Progressive Web Apps can serve as the bridge between desktop experiences and native mobile app experiences and can help reduce the disparity between conversion rates for desktop and mobile.
AT ITMAGINATION, we believe that Progressive Web Applications can be a cost-effective way to implement the first steps of a mobile strategy by avoiding the often-heavy investment sometimes required to develop native apps. Alternatively, they can complement and extend an existing mobile strategy and make services more easily available to users on lower-end devices, suffer from weaker connectivity or who – for whatever reason – are simply more cautious about downloading apps or signing up to services.
When discussing mobile app strategy with ITMAGINATION clients, we’re observing three key reasons for companies to strongly consider Progressive Web Apps. They are:
PWAs have the potential to increase user engagement with your brand. Thanks to the ability for the web app to be added to a user’s home screen, a user can access the web app in much the same way that they would access a native mobile app, and in a way that is much quicker than opening your favored web browser and then typing in a specified URL or selecting from a list of bookmarked sites. Also, once within the web app, tell-tale signs that you’re on the ‘normal’ web – such as the address bar – disappear, leaving you with the look, feel and experience of a native mobile app. Furthermore, within the web app, you might be invited to accept notifications from the app’s publishers, meaning that a brand can ‘push’ notifications in much the same way as it would with a native mobile app.
A large part of the reason for Progressive Web Applications becoming more viable is the advancement and increased use of Service Workers. Servicers Workers are a type of Web Worker, and are essentially JavaScript files that run separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages (source: Google). This allows the main interface or app experience to be delivered irrespective of whether a network connection is detected or not. From the perspective of the user, this means that any screens or data that they’ve accessed on previous interactions with the web app will remain visible and accessible if they access the app when offline. Furthermore, using technologies like service workers enable the delivery of a number of functions that were typically only possible within native mobile apps, such as:
At ITMAGINATION, we and our clients recognize that users are becoming increasingly demanding and the apps we build must be convenient to use, and sufficiently flexible to meet the on- and off-line (e.g. travel) lifestyles and needs of these users. A failure to recognize and accommodate user’s needs can be the difference between taking your user to a whole new level of engagement or losing them to a brand that can offer them exactly what they expect from their mobile experience – regardless of whether they’re online or offline.
Another advantage of the Progressive Web App delivery method is that the app loads almost immediately. In much the same way that having an app already downloaded from the store allows for a large part of the user experience to already be loaded (and thus available immediately), Progressive Web Apps store the majority of files needed for the app’s operation directly to the device (e.g. CSS, JavaScript, data in JSON format). Rather than re-loading or refreshing these files each time the app is loaded (and thus causing longer load times), files are only updated when it’s absolutely necessary for this to happen. This can result in the app loading in less than half the time it would take for a similar webpage to load in a browser.
While the price of data transfer has come down dramatically and speed has increased in recent years, this has happened in line with an overall decrease in user patience and heightening of expectations. Users expect their experiences to load and requests to be fulfilled almost immediately. At ITMAGINATION, we recognize that the time taken to load the experience is as important – if not more important –than the experience itself. We can’t simply assume that users will wait several seconds or more for an app to load if there’s a rival app out there that responds more quickly. If you’re stuck in the cold and wet and you need to hail a ride home, you’ll reach for the app that will get the job done fastest. The same is probably true if you’re looking to order takeaway, check when the next bus leaves, get directions while you’re out and about. Don’t be fooled into thinking you can build experiences so satisfying that they’re worth waiting longer for.
PWAs offer a whole host of benefits and are particularly worthy of consideration if your business depends on a high number of visitors and high level of engagement (i.e. longer sessions) with your online experience. In such instances, the ability to deliver the experience faster, and with less drain on data and battery can be a compelling reason to increase focus on Progressive Web Apps as an app-delivery method. Let’s consider Tinder as an example. When comparing the native version of the app on Android with the Progressive Web App version, it was observed that the PWA version loaded in less than half the speed of the native version. Furthermore, with the ‘distribution’ package, the native version weighed in at a hefty 30mb, while the PWA version was just 2.8mb – less than 10% of the native version.
The improvements in loading times can lead to dramatic business benefits. Pinterest’s browser-based experience was struggling to deliver any form of user satisfaction and was failing to encourage users to sign up, sign in or download the native mobile app. By rebuilding the existing mobile web experience using React, Redux and webpack, Pinterest was able to reduce the Time to Interactive (i.e. the time it takes for a page to become interactive and for a meaningful interaction to take place) from 23 seconds to just 5.6 seconds. Furthermore, the size of the data package needed to deliver the core home feed experience was dramatically smaller for the Progressive Web App version of Pinterest than for the iOS and Android versions – the former was able to deliver the core home feed experience in just 150k, compared to 9.6mb for Android and 56mb for iOS. These weren’t just achievements for the technical team to be proud of – the new Progressive Web App experience delivered significant business benefits over the ‘old’ mobile web experience, including:
Pinterest: PWA Performance Case Study
The Pinterest example shows us that a well-constructed Progressive Web App can be effective in e-commerce and other websites where visit duration is important in contributing to some form of ‘conversion’ (e.g. buy or sign up), reduced incidence of abandoned transactions, higher basket value, etc. Similarly, media sites (such as news portals, online newspapers or magazines and blog platforms) that rely on being able to deploy ads in front of users, and so require for experiences to load quickly and for users to be on the site for as long as possible (every second counts) can also reap dramatic benefits in session time and user engagement. At the same time, companies that provide ticketing, reservation or travel services can provide compelling user experiences to users thanks to their ability to work well with limited connectivity. This opens a world of opportunities for those brands seeking to grow in geographies were high-quality connectivity cannot be taken for granted. Uber, available at m.uber, is a great example of this – it claims to be able to deliver the core ride request instance of the app in just 50kb, which means it will load super-fast even on 2G networks, which enables the brand and service to reach markets that might otherwise be out of reach.
The good news is that if you built your website or web service in the last two years, and if you did it according to modern industry standards, then there’s a good chance that you have a solid base on which to build a Progressive Web App. For a good start in building a PWA, check if your website:
Even if your current website isn’t built in line with the aforementioned criteria, all is not lost. In fact, given the accessibility to popular and powerful frameworks like JavaScript, we know that building a high-quality, efficient application can be done relatively quickly. And, if building a new website with one of the aims being that it be available as a Progressive Web App, then knowing this at the start of the process will result in little impact on overall cost. Based on our experience at ITMAGINATION, we know that building a Proof of Concept Progressive Web App for the majority of types of project should be achievable within three months.
It’s becoming easier and easier for Progressive Web Apps to make it onto your (and your customers’) smartphone home screen. With Google Chrome on Android and Safari for iOS (i.e. the default browsers for Android and Apple devices, respectively), adding a Progressive Web App to your home screen is a case of just one or two taps, and is often quicker than finding and downloading an app from the app store. Furthermore, with the launch of Chrome 72 and the addition of Trusted Web Activity (TWA), it’s now possible for Progressive Web Apps to be listed in the Google Play store. Microsoft – perhaps in part to boost the number of apps on its store – had already begun the process of scouring the internet, identifying services built to PWA standards, and listing them in the store without any need for action by the developer. Apple’s App Store still requires the most work (it requires a form of ‘packaging’ in the distribution pack), however, it’s still possible to build the appropriate packaging around your Progressive Web App and get it into the app store.
If you’re currently considering how to take your mobile strategy to the next level, Progressive Web Apps could be a cost-effective way to get your apps onto your users’ home screens, to get them to interact with your brand for longer and in a more meaningful way, and to realize your business objectives for mobile.
Learn it. Know it. Done.
The article was also published on websites:
.svg){kind=small}
