Vodafone x Google PWA hackathon š·
Yesterday a group of three keen developers from Vodafone Digital headed to Googleās Kingās Cross campus to attend a one day hackathon on PWAs.
The day was focused around learning what a PWA (or progressive web app) is, how to use it to improve an existing piece of code and networking with other companies also on their digital journey.
What is a PWA?
A PWA is the next phase in web development, it focuses on a few major areas:
- Page load speed š¤
- Offline experience āļø
- App experiences (for example: adding to homescreen, notifications) š±
By using the power of service-workers it is possible to cache content on your website. This can improve the load time of your application and allow users to use your site when offline.
For more information on PWAs and Service-workers visit: https://developers.google.com/web/progressive-web-apps/
What we focused on?
With only a day to hack, we kept our scope limited ā focusing on our checkout journey for several reasons:
- Architecturally it is quite a new piece of code and so has been built in a modular way, this made it easier to hack.
- We felt that the impact of an offline checkout experience could greatly improve the user experience.
- Adding notifications for an abandon basket could be beneficial.
What did we deliver?
Offline notifications:
We added a sticky top bar to the checkout that informed users when their connection dropped.
We also modified the existing āContinueā button texts to say āSaveā to give the users the understanding that they were not actually submitting the data, but saving it (for submission later).
We also modifying the submitted panels, with a small notification to let the user know that the data was not actually submitted, but would be sent later when the network became available.
Both these changes would allow a user to continue through the journey in a positive way until their connection was back up and running!
Offline Cache
Using service-workers we also cached the majority of our calls for images, javascript, HTML, css and HTTP API calls. This meant that if the user refreshed the page whist offline instead of seeing this:
They would see a partial checkout experience. This paired with the offline saving of the form data (as above) would enable a user to continue the journey even whilst offline.
Notifications
Service-workers allow you to request for the browser to provide notifications. We implemented a simple notification system that would enable us to inform a user when they had not interacted with the checkout for a certain amount of time.
As with all invasive communications, permission from the user is required before we can just spam them with notifications.
And the winner isā¦
As with most hackathons, there are winners. Our ideas were put against 6 other teams from across the industry, some implementing offline marketing pages, others looking at the performance of their web-apps.
After we all got to vote for our favourite, the winner was: Vodafone UK (thatās us by the way).
We were really pleased that our efforts paid off, and were thrilled to be presented with a Google Mini (cheers Google!).
Whatās next?
Coming back to work, we have brought all of our learnings from Google and will be looking to put into production soon the changes to the checkout. Alongside this, we are also going to look at our other journeys to see if we can leverage PWAs and the technology behind them to improve our customers experience online!
Want to know more?
If this article has inspired you, and you want to know more please reach out to us on our various social media channels.
If you want to work with us, find us on LinkedIn and drop us a message, we would love to hear from you! āļø
