Progressive Web Apps — the future of mobile gaming
Progressive Web Apps (PWAs) combine critical features from the mobile web and native mobile apps. They use the best of both to bring an enhanced user experience to consumers and in doing so extend the value of content dramatically for minimal additional cost.
When we started Goodboy Digital almost six years ago we used to talk about ‘app-less apps’. It was our take on using the mobile web as the focal platform upon which we would build all our content. The assertion we made was that internet tech had reached a point where it was powerful enough to deliver high quality games that were a genuine alternative to native, installed apps. Six years on this is truer than ever — the pervasiveness of WebGL means advanced graphics can be created on the mobile web and games made this way offer not just an alternate platform to apps, but can now become apps too.
So far this has meant using technologies such as Cordova to package HTML5 games as apps which are then released into existing App Stores. For games this is great as it expands our browser focussed codebase to create ‘App Store’ versions users can download and keep to play offline. The only issue is that these two delivery platforms currently exist as two very separate entities — the browser and the App Store. But not any longer…
Enter the PWA
So first up, what is a Progressive Web App? PWAs can be thought of not so much as a thing but as a collection of technologies and tools that result in an overall concept. A PWA is effectively an app created with web technologies such as JavaScript that without packaging or user authentication can work offline and be installed in a user’s mobile operating system where it will essentially look and act like any other app.
In short — they let us make and deliver apps to audiences without an App Store
This means the (mobile) web version of a game or experience can essentially become an app without the need for App Stores and their inherent issues of third party approval and user’s needing to enter passwords. PWAs use the mobile browser’s ‘Add to Home Screen’ functionality to not just keep a link to return to it, but actually capture a full offline version of the content. With games in particular this makes the user experience of opening and using the PWA almost indistinguishable from a native app.
Reach and Retention
So what does all this mean? What’s so good about creating App-like experiences this way? First is reach. HTML5 has offered unrivalled reach for years, meaning that desktop, mobile and other platforms are all accessed in-browser from a single codebase. Make a game, put it online, play it on anything! Reach is unrivalled with mobile web games, even as they stand already.
At Goodboy the problem we’ve seen has always been giving the user ownership, by which I mean the ability for them to keep and return to content that they enjoy in a more flexible manner. The awesome thing about Progressive Web Apps is that they take the exact same browser based product that we created to reach the widest possible audience and then add the ability to install and keep the experience for repeat plays at any time.
At a glance, offline play might seem a small thing in an age where we are permanently online, but having to download an entire game every time you wish to play is far from desirable in many occasions. Whether riding the Underground, taking a flight or having run out of data (a big one for kids!) being locked out from content because you can’t access the internet is a big issue and can lead to a game being overlooked altogether. PWAs mean that players not only see your game icon on their home screen, but never experience a situation where they can’t play it.
More Bang For Your Buck
Whether you’re commissioning a game to support a brand or releasing your own IP, the big win with PWAs is that their ‘instant app’ behaviour is achieved with a fairly minimal amount of additional effort (i.e. budget) over just making and releasing a straight HTML5 game. For what they offer users, there’s pretty much no reason not to offer a PWA option.
HTML5 games have always been an extremely cost effective route to delivering games whether for brand support or the creation of new IPs. The PWA completes the picture, adding installation and offline play with zero friction to the user. For games and brands that are aimed at younger players this is absolutely crucial as it means they can keep their favourite titles without having to bug mum or dad to allow them access to App Stores in order to do so.
New Metrics of Success
Another big draw for using PWAs to deliver HTML5 games is that they radically change the metrics of success in measuring user engagement. Typically web games are judged by individual session times and repeat plays, both of which are often quite low even in ‘successful’ games. As an example in one of our games total average user session time was around 25 minutes and return plays were 2.5 per player. And those are really good figures!
Whilst native Apps are seeing a decline in downloads and installs (due in no small part to App Store fatigue) once a user does get a game on their device they are much more likely to play it repeatedly. Offering a game as a PWA means that players can instantly keep it as an App and therefore play times and session times move from web game measurements to the much higher session times and repeat plays of installed games apps.
Increased retention with your game is a very big deal indeed. The Games Industry has for some time eclipsed both cinema and music combined in terms of revenue, and mobile games represent over half of the games industry with a value over $70Bn. Having a more effective, higher retention game means that the commercial potential increases drastically. It’s an unusual truth, but players treat games they access by tapping an app icon in a very different way to one they play within their browser. The PWA becomes thought of as an ‘owned possession’ rather than just a destination to be recalled and revisited.
Summary
Progressive Web Apps offer dramatic benefits and new opportunities all as an evolution of current HTML5 principles, rather than a totally new tech stack to master. As well as offering these benefits to future games, converting legacy titles to PWAs is possible too once again meaning that value from budgets and effort can be maximised. If you’re making or have made an HTML5 game PWAs are becoming a vital tool in getting the most from your efforts.
The Bottom Line
We’ve looked in detail at a number of these benefits, but there are many more beyond. The following is a list of other benefits PWAs offer to HTML5 game producers and owners:
- Cost effective — offers nearly all of the advantages of installed apps using a single code base and can be retro-fitted to previous HTML5 games with a small amount of effort.
- Installable — Allows users to add games they enjoy to their home screen without the hassle of an App Store or the need for parental assistance with passwords etc.
- Compact — being built on web technology means that PWA games are tailored to have a small, rapidly downloadable footprint. If you’re playing the game on your phone browser, you might as well keep it as it’s already downloaded!
- Connectivity independent — The PWA manifest means that all files required for play are downloaded and stored for offline play exactly like a native app.
- Discoverable — HTML5 games are much easier to find as they exist in the browser itself and can be easily searched. This is far more democratic that App Stores where the ‘big hits’ are pretty much the only games players are likely to find organically.
- Sharable — Easily share the actual game via its URL.
- Engageable — Makes re-engagement easy through features like push notifications.
- Responsive — Fits any form factor: Desktop, mobile, tablet, or whatever’s next.
- App-like — Feels like an app, because the app shell model separates the application functionality from application content.
- Fresh — Always up-to-date thanks to the service worker update process.
- Safe — Served via HTTPS to ensure all data is secure and trustworthy.
Hands On
So, time to put our money where our mouth is with a demo! As PWAs get more integrated into the mobile world there are a few discrepancies in how they work. Unsurprisingly, web-based Google (and by extension Android) currently has the most seamless implementation. Here we can show a “Save as an App” panel in the browser content itself that then directly opens the OS’ dialogue box to save the page. iOS on the other hand is currently a little bit more manual, requiring the user to click the browser’s ‘share’ icon, select “Add to Home Screen” and finally accept the given ‘App’ name. One quirk of PWAs is the user can actually give the App a different name to the one specified if they so choose. Whether that is a pro or a con is perhaps a matter of opinion!
So let’s do this — here’s a little Proof of Concept game we made to show a PWA in action. Of course we made sure it’s fun too ;) And remember, the real proof of their potential is to flick on Airplane Mode and see the App startup with no internet connection!
So if you’ve got HTML games of your own or are in the process of creating one, there’s no reason at all why you wouldn’t extend their reach by adding PWA functionality.
And if you’d like a chat about PWA’s, you know who to call!
