Categories: Technology

Instant Loading – Developing Offline First Websites With Service Workers

By developing websites with the use of Offline First mantras businesses are able to better engage and reach users, they gain the option of skipping the native mobile apps in favor of progressive web apps and offers their visitors a seamless experience regardless of internet access.

Keep users engaged when they lose internet access
Serious alternative to native mobile applications
Seamless user experience for offline/online visitors

Why Offline First

For some businesses, their main demographics are located in areas with shoddy internet access, while other target groups browse their website from 2G or 3G networks.

Add to those users the daily commuters on flaky public networks, those losing internet while passing through tunnels, using underground metro systems, hotel WiFi and other unreliable and often unavailable internet connections.

[pullquote]By developing a website which functions well under all these circumstances businesses stand to gain improved conversion rates as a direct result of increased availability.[/pullquote]

eCommerce stores can also offer customers a complete offline catalog of their inventory, which will allow visitors adding products to their cart, and only once online submit for purchases.

By developing an offline-first website in combination with a service worker script, it’s possible to keep users engaged for longer, and in the process eliminate the previous boundary between internet access and offline availability.

Ways To Develop Offline First

Google has been championing a new concept known as Progressive Web Apps, which is a term that covers a few individual technologies bundled together.

There are plenty of other routes, however, often involving AngularJS or Node.js, but progressive web apps have also been shown to have a positive effect on a number of other aspects such as:

Better performance compared to both desktop and mobile users
The ability for push notifications directly from websites
Several large browsers, including Google Chrome and Firefox, are prompting users to install a PWA enhanced website on devices.

Because of these added benefits, we’ll focus on progressive web apps and their components, but whether you use a service worker or a cache manifest or something else entirely is less important than having an offline first site itself.

Service Workers

One of these concepts is known as service workers, which is a relatively new feature implemented in a majority of the most popular browsers, allowing developers to create a complete offline experience for their website visitors.

This works by having the service worker capture all client requests coming from the browser before the requests reach the web server. The service worker script will then check if the user has internet access, and if not, it will not request the pages from the web server, but instead serve a set of cached pages.

App Shells

Another of the concepts bundled in progressive web apps is known as an app shell, which is a way of combining both CSS files, images and scripts used on all web pages, which will be stored locally on a website visitor’s device, and thus contain everything except the page specific content.

By combining a service worker and an app shell, developers can create the entire website design within an app shell and have only the content update through the service worker, cutting down significantly on load times and page sizes in the process.

Learning From Mobile Apps

Native mobile applications have been working offline since 1994 if we’re going to get technical about it, ever since IBM released the world’s first “smartphone” called Simon. While Simon only had a few basic applications, such as a contact list and text composer, it still worked without any internet.

While there have been many advancements to mobile apps over the past 22 years since then, we’re still living in a world where offline availability is paramount to good user experience.

Most apps developed these days are being developed to function offline first, and only once they have some level of basic functionality, network capabilities are added as an extension to that, improving content and user interactions where necessary.

Going Further Than Just Offline First

While developing an offline first website is a great first step, there are many other avenues opening up for web developers these days. One of which is layering scripts between the web server and client, allowing for synchronizing data if the browser crashes, or if the internet connection is lost mid-purchase.

By having scripts monitor this behavior, and act accordingly, we can shift back the focus from cool looking functions and gadgetry to building worthwhile user experiences.

Some of the ways we can think about offline first as being more than just a placeholder until we get an online connection is as follows:

Saving user inputs in offline mode, caching the data until an online connection occurs, and then submit the inputs once online.
Resuming an instance from a previous session, either on- or offline. By having a state manager script built into the app shell or caching of a web app, we can develop conditions wherein we save content automatically, and in connection with the above point, if the user input was not completed the first time, we can let users resume their form submissions when needed.
Move scripting and functions from the web server to the cache. By going serverless where possible, and moving all calculations and algorithms to the client cache, we can still let website visitors calculate their mortgage or purchase a product in offline mode. Synchronizing with the web server once the user connects to the internet again allows for the purchases to go through or the mortgage request to be submitted.
It’s even possible to store specific datasets and databases locally as well, allowing the user to query various parameters and metrics.

Rounding Off

With all major browsers adding support for offline first functionality, we’re beginning to see a new era in web development, that doesn’t just stop with the possibility of having an offline version of a website.

Instead, we’re moving towards a time where users will expect their app or website to function regardless of where they are in the world, and whether they’re connected to the internet or not.

And while it is a cost for businesses to develop these additional functions, empowering users and providing a better user experience for customers can hardly be said to be a bad investment. For now, it’s a question of whether the website or app in question will benefit enough to warrant this investment, or whether to wait a year or two until the market starts to demand these features themselves.

Author Bio: Mark has been developing for the web since 2001, always with a penchant for open-source technologies such as PHP. Since 2010 he has been working full time with app development, these days being employed at Nodes, a leading European app agency. He also regularly contributes to WordPress and other open-source projects.