UpUp - Kickstarting the Offline First Revolution

UpUp is a tiny JavaScript library that makes sure your users can always access your site’s content, even when they’re on a plane, in an elevator, or 20,000 leagues under the sea.

Mobile-First has become the de-facto standard for building modern sites. But in a world where everyone is mobile, an always-on connection isn’t something we can rely on. It’s time to start thinking Offline First.

With UpUp you control the content your users see, even when they are offline. And you can do it with just a single JavaScript command.

Demo & Tutorial

The easiest path to understanding is to see UpUp in action and try a quick tutorial.

Hello World

Getting started with UpUp is as easy as adding two JavaScript files to your site, upup.min.js & upup.sw.min.js, and defining the content you want your users to see when they are offline.

For example:

<script src="/upup.min.js"></script>
<script>
UpUp.start({
  'content-url': 'offline.html',
  'assets': ['/img/logo.png', '/css/style.css', 'headlines.json']
});
</script>

Now every time your users return to your site and their connection is down, they will see the contents of offline.html instead of an error.

Check out some live demos and a full tutorial. Once you’re up and rolling, you can read the full API Docs.

HTTPS Requirement

UpUp requires a secure connection to your site (this is a requirement of service workers, the technology at the heart of UpUp). So make sure your users visit your site over HTTPS (an SSL certificate is free with Let’s Encrypt or via CloudFlare).

Browser Support

UpUp works in any browser that supports service workers. Currently this means:

• Chrome 40+
• Opera 27+
• Firefox 41+

If your users are using a different or older browser, they will simply be unaffected by UpUp. Nothing will break, and they simply won’t notice anything different.

Technical Documentation and API

Docs and full API reference

Author

Tal Ater: @TalAter

License

Licensed under MIT.