MTA Gamechangers Series: Progressive Web Apps with Tom Cooksey

In our MTA Gamechangers series we will be talking with thought leaders and pioneers from the digital industry and hearing about technology that could quite literally change the game. Today we are hearing from Tom Cooksey from Troop creative who is helping the world to embrace the idea of progressive web app development.

MTA: Tom, first up, we should probably ask you, WTF is PWA?

TOM: PWA stands for Progressive Web App and it is essentially a blend of different technologies provided by web browsers that allow developers to add features to their websites such as offline support, notifications, background sync, instant loading and a fully responsive user interface.

MTA: Could you give an example of how a marketer may want to use a PWA?

TOM: Google made an announcement in 2015 that the two key metrics they would now focus on when indexing websites are; speed and mobile-first.  In this vein, they announced the introduction of Accelerated Mobile Pages (AMP) – this is a proprietary technology developed by Google that allows developers to create web pages that load almost instantly.  It is quite limited in its use however and is mainly used by news websites.  Google now ranks websites that implement AMP higher than an otherwise equivalent site that does not.  At the recent Google Chrome developer conference a few weeks ago, Google made a statement of intent when it started talking about PWA’s and their benefits.  Since one of the benefits of a PWA is almost instant loading Google have inferred that websites integrating PWA’s will start to be ranked higher.


MTA: So why are we all not using PWA’s already?

TOM: Essentially, up to now, the technology has just not been in place.  In a further declaration that this is the direction they wish to go with search, Google’s latest Android release finally supports all of the features of PWA’s.  Firefox have recently made changes to increase support and Safari on iOS already supports many of the required features.  Over the next 12 months we’re going to see a rapid push to increase support and I think we’ll very quickly have convergence across devices.

MTA: How come PWA development is coming to prominence now?

TOM: Whilst support is still in-coming, Google have stolen a march on their rivals with the combination of their Chrome browser and Android operating system. On an Android device you can now have a PWA behave almost entirely like a native app; it can receive notifications, it can update seamlessly in the background, it supports offline working and it has full access to the phone’s native elements such as the camera. It can even be integrated into the app tray, just like a native app. All of this means you can no longer just create an ‘app-like’ experience in the browser, but when coupled with a javascript framework such as React or VueJS, it means we can now create real, fully-fledged apps in the browser.  As developers, we’ve been building single page web apps for some time now, but we too can now start to enjoy the native features that native app developers have had exclusive access to for so long.


MTA: How well adopted is this framework and are there any restrictions to the adoption?

Tom: At the moment, this will not work in all browsers on all platforms. Android is the most used mobile operating system in the world and in its latest versions it contains full support. Firefox has just added some important features to its mobile browser to support some PWA functionality. However, iOS is languishing behind somewhat with both its operating system and native Safari browser, although the missing features just made it into WebKit core which is the engine behind Safari, so it’s only a matter of time.  Its also important to note that Progressive Web Apps are just that; progressive — meaning that if a particular browser does not support a particular feature, this is completely seamless for the user and does not affect their use of the app.

 

MTA: So are we better off waiting until PWA’s are more widely supported?

 

TOM: I would say you have a grace period, it’s not something you must have yesterday, but over the next 12 months support is going to increase substantially and those that are ahead of the curve will benefit the most.  An additional factor is that a lot of customers take the approach of building a single page web app and wrap it natively using Phonegap.  This truly is the best of both worlds as, for now they can provide their users with a native app that has all of the native features, and because it’s been developed with web technologies we can take the web app at any time and roll it out into the browser leveraging PWA functionality.  This would be the approach we would recommend at this exact moment when talking about apps.  In terms of websites, some of these features are reasonably easy to add right now and your users will thank you!  The biggest reason to do this now is that if an organisation does not already have a native app then, on devices that support it, they can start taking advantage of features such as Push Notifications immediately, something they’ve never had access to before.

MTA: if we wanted to understand more about PWA’s and how it could help our business where would we start?

TOM: Google provide a really good, easy to understand guide on PWA’s here: https://developers.google.com/web/progressive-web-apps/

MTA: does this mean we need to completely redevelop our website?

TOM: Yes and No.  This is one of the common misconceptions that we’re finding.  Obviously if your website has not been built in a responsive mobile-first fashion originally then it may already be suffering from an SEO perspective.  However, assuming it has been, it’s possible to retrofit many of the PWA features to an existing website including the instant loading which, in the world of SEO, is probably the most important.  It’s key to understand that a PWA is a blend of technologies – you don’t have to implement all of them.  Obviously the more you do implement, the more it will benefit your users (and the more you’ll fit Google’s definition from the previous link), and therefore your search rank may see some benefits, however this clearly is easier to do if you’re building with that in mind from the very beginning.

MTA: Do we have to use a framework like ReactJS or Angular?

TOM: Frameworks like these aid developers in building an ‘app-like’ experience in terms of the user interface.  They facilitate single page apps where the user does not have page refreshes and instead each screen is drawn in situ.  Using UI frameworks like this is where we truly start to see the power of PWA’s as, combined with everything else, they truly are replacements for native apps in many cases.  However, it’s by no means necessary, it’s possible to implement some of these features on more traditional, multi-page websites.

 

MTA: Could you sum up how marketers should approach PWA’s when planning for their customers over the next 6 months?

 

TOM: My recommendation would be to perform an audit and review of websites right now to see what’s required to bring them up to speed.  With this done it’s possible to plan retrofit work with their customers so that by the middle of the year they’re well on their way to getting things ready.  Similarly if you’re talking about new projects it’s really important that provision is made for a PWA from the very beginning as, like all these things, it’s easier to implement at the start than the end!

 

Tom Cooksey is a highly experienced technologist having held senior positions within Financial, Broadcasting and Logistics businesses.  He is currently managing director of Troop Creative; a development company specialising in websites, web apps and web based software.  He is a hands on director and can still be found working in the code on a regular basis when he’s not evangelising about new technologies.  In addition to his day job, he sits on the board of several other companies providing technical expertise and acts as a technical advisor for an investment fund.

 

If you want to know more about PWA development please contact the MTA or reach out to Tom and the team at Troop Creative.