Stepping into the Offline World

Here’s the question that gets asked by so many that it’s become annoying – what’s the next big thing in web development? React? Angular 2? CycleJS? WebSockets? HTTP2?

Instead of looking into the future for a bit, let’s take a few steps back. The web has developed into an incredible thing since it began - from static, funky looking pages…

justin-timberlake-600

…into a net of apps connecting millions of people in realtime…

facebook-600

Into the Future

…but what are we to expect now?

mystery-600

Well, it’s not really. As Dion Almaer pointed out in his talk at Progressive Web Apps conference (slides are here), at some point desktop applications were hugely popular and web was trying to seem exactly like them. With smart phonesand the popularity of native apps, we can only expect a similar shift in web applications to catch up with these.

There are a few glaring differences between web and native apps that heavily benefit the latter:

• You can use them offline or while on a bad internet connection
• They can send you notifications so as to remind you to use them (which doesn’t have to be as annoying as it sounds)
• It’s easy to access them from your home page without having to open a browser and type in a URL
• They are much more performant

All these points are pretty important given how we’re all lazy as users of any application, and how much we’ve learnt to expect from mobile experience. While checking things out on our phones, we’re quite often in places with horrible mobile internet, abroad on roaming, or we’re juggling morning coffee, opening the office door and chatting on WhatsApp all at the same time. So at the end of the day, it’s not just a matter of comfort for smart phone users - it’s a necessity due to phones’ flexibility.

Service Workers

Although making web apps seem like native apps seems a little bit like a sci-fi, a lot of great features are coming to browsers in the form of Service Workers. These guys can create a layer between the browser and server that lives on the client and can be persistent. That gives us huge power - and also great responsibility. We can push notifications, store our whole websites and databases locally for the user to access them at any point in time, and much much more; doesn’t that sound at least a little bit exciting?

Total Recall - or the New Caching

Let me focus on the point that will make the biggest difference - using web applications offline. As much as every point in the list above is important, using our apps whenever and wherever means a huge difference in the way we perceive the web.

As I mentioned above, Service Workers create a layer between a rendered page and server that can handle a lot of things for us and that we can manipulate using javascript. When a user goes to our website for the first time, it creates a service worker, checks if  have this page cached, and then goes onto the server to fetch it. On its way back, the data gets saved in cache and from this time on, our website can be rendered from cache. In the case that we lose internet connection, the user can still access this page. 

Or we can just always render the same page from service worker to decrease the load on our servers.

offline-first-diagram-600

https://auth0.com/blog/2015/10/30/creating-offline-first-web-apps-with-service-workers/

Dark Side

There are the glaring issues of pages running out of date but that’s something we have to deal with whenever we’re using caching and there are quite a few well known cache busts that we can implement if we need to.

What I see as the biggest potential danger however isn't really related to synchronisation of data. Imagine that every page you visit decides to save incredible amount of data into your phone. Next time you're doing your iOS update or try to download some music, you might find out that there's no space left because all images from imgur are forever saved in your Service Worker cache.

Right now, the system relies on programmers to be reasonable about the demands they make on their users; this can be unintentionally messed up though and easily exploited. I'm quite curious to know how browsers will decide to address these drawbacks as this tech gets widespread.

Progressive Enhancement

One of the famous recent uses of Service Workers was done by The Guardian. It’s a simple but really clever idea - imagine going on the train to work like every morning, reading news… when suddenly you’re on very bad or no internet connection. Infuriating, right? Well now you can play an offline crossword instead of hitting reload every three seconds hoping it’ll come back… at some point… maybe.

This doesn’t solve the issue of actually accessing the content I want to see in the first place but it’s a great first step to take. As this feature is an “extra”, it’s okay that it’s not supported by some browsers. One day, we’ll be able to use it everywhere - and we can walk towards the bright future by using it now without introducing any regression to our apps.

What’s Coming

As if this wasn’t enough, what’s even more exciting is the news of Background Sync coming to the party later on this year. This feature is currently being implemented in Chrome and should allow you to - well, sync data on background.

dontsay

Background sync should allow developers to finally access all important features for creating truly offline-first web apps.

2016 is definitely bringing a lot of exciting new features to web development and we’ll get our toolkit buffed up quite a lot - by streams, Houdini, HTTP2, and many more technologies. It’s definitely bad news to those who already find JavaScript development too complex - but it’s really exciting for us who love to learn and explore new possibilities.

Useful Resources

This article - and my excitement about Service Workers - have been hugely boosted by Enhance Conf and the Progressive Web Apps event.

Here are a few useful links I gathered on these events if you want to learn more about progressive enhancement and what’s ahead of us this year:

• Progressive Web Apps by Google - https://developers.google.com/web/progressive-web-apps
• Jake Archibald’s Offline-First Apps talk - https://speakerdeck.com/jaffathecake/offline-first-progressive-apps
• Udacity Offline web apps course - https://www.udacity.com/course/offline-web-applications--ud899
• Jake Archibald’s rave on Streams - https://jakearchibald.com/2016/streams-ftw/
• Jen Simmons’ podcasts The Web Ahead - http://thewebahead.net/

We love thinking about, talking about and using new tech at Red Badger; if you'd like to join the team here please get in touch!