Offline first - using progressive web app technology in website design and development to improve customer experience

The battery-powered mobile world we live in is getting bigger, and the quest and demand for connectivity is more important now than ever. As marketers, it’s easy for us to get complacent, often working with the latest computers, most up to date browsers and the luxury of fast, uninterrupted dual connection Internet. But that’s not always the experience of your users, and it’s certainly not reflective of the multi-platform, on-the-go lives they lead, with temperamental mobile connections, slow speeds and flaky public WiFi.

How many times have you lost connection sat on a train whilst browsing the web? Or been half way through a complicated form submission or checkout and lost signal the very moment you hit send? We’ve all been there; as have your customers.

And performance really does matter as 53% of users will leave a site if it takes more than just three seconds to load, and according to AutoAnything, reducing your page speed by half could boost your sales by up to 12-13%.

Tackling this by taking a mobile first approach is a good start – and a crucially important one – especially with Google’s mobile first index now in play. But, to really start cracking this we must go deeper, and right back to basics.

Its time to start thinking about an offline first approach at the early stages of development.

What currently happens to a customer’s experience when they lose connectivity whilst browsing the web? A simple, but frustrating, error page is served. However, instead of treating offline as an error, we have the technology to start planning offline capabilities into web design and make it much more than just a contingency for an error scenario.

By using the same technologies that are used in progressive web apps (PWAs), we can now bring more native app-like experiences to users via the web, creating a faster and more streamlined, uninterrupted online experience – even when they go offline.

The solution: build from the ground up

If you’re not in the know, PWAs bridge the gap between the web and native apps. They combine the best of both, bringing the functionality and immersive experience of native apps into a quick-loading, fast and reliable web interface.

Like native apps, they can be installed on your homescreen but don’t need to be downloaded. They use caching to load content, even on poor connections, and are able to send push notifications and update dynamically with background sync enabled.

The driving force behind them is the mighty service worker – a clever piece of JavaScript that acts like a client-side proxy that puts your developers in control of the cache and how to respond to resource requests.

By using this technology, you can pre-load information into the cache in preparation for the inevitable offline scenario and eliminate the dependence on the network.

Instead of trying to call the information from the network each time a user taps a button, presses play on a video or hits submit on a form, it will use pre-cached content. So, what was once an offline error is now a seamless experience, as when a user is browsing your site and loses connection, instead of trying to call the information from the network, the data stored in the cache is served, and the session can continue uninterrupted.

We’re very excited about this new technology here at Fresh Egg – introduced to iOS 11.3 only this month – because it unlocks a host of new methodologies to approaching various UX problems.

The possibilities

• Preloading cache – while the user is browsing, the web app can load data in the cache ready for offline.
• Revisiting previous pages – any pages the user visits can be added to the cache ready for offline. The user can scroll back through previously visited pages when a connection is lost.
• Contact form submissions – forms can be queued for sending, and a message displayed to the user that the form will be sent when back online. For further enhanced UX, a push notification can be enabled to complete the action and advise when the message has been sent, as the user may have left the web page since going offline.
• Google Analytics Data still collected – even when offline GA data will continue to be collected for the session.
• Disable, modify or hide features – features that can’t work offline can be disabled or modified.

In the last few years we’ve seen a shift to an evergreen model for web browsers, meaning they update themselves dynamically without us having to install the latest version. This is good news as it means we’re seeing support across the board for service workers - the core technology that supports PWAs and the offline first model.

With Microsoft already indexing PWAs in their app store alongside native apps, and iOS quietly adding PWAs to Safari in the 11.3 update only this month, I think it’s safe to say we’ll see a lot more of this technology in the future, and if you want your business to stay ahead of that curve and truly transform your customer experience from the bottom up, offline first is the way to go.

Need help with your web design, UX or customer experience? Talk to our expert team  to find out how we can help.