https://github.com/TalAter/UpUp

✈️ Easily create sites that work offline as well as online
https://github.com/TalAter/UpUp

hacktoberfest offline offline-first progressive-web-app pwa service-worker

Last synced: about 2 months ago
JSON representation

✈️ Easily create sites that work offline as well as online

• Host: GitHub
• URL: https://github.com/TalAter/UpUp
• Owner: TalAter
• License: mit
• Created: 2015-03-11T13:20:08.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:57:24.000Z (about 2 years ago)
• Last Synced: 2024-10-16T06:21:13.702Z (about 2 months ago)
• Topics: hacktoberfest, offline, offline-first, progressive-web-app, pwa, service-worker
• Language: JavaScript
• Homepage: https://www.talater.com/upup/
• Size: 29 MB
• Stars: 4,877
• Watchers: 107
• Forks: 264
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-pwa - `UpUp`
• awesome-starred - TalAter/UpUp - ✈️ Easily create sites that work offline as well as online (pwa)
• awesome-pwa - `UpUp`
• starred-awesome - UpUp - ✈️ Easily create sites that work offline as well as online (JavaScript)

README

        
### 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](https://www.talater.com/upup/).

### Hello World

Getting started with UpUp is as easy as adding two JavaScript files to your site, [upup.min.js](https://raw.githubusercontent.com/TalAter/UpUp/master/dist/upup.min.js) & [upup.sw.min.js](https://raw.githubusercontent.com/TalAter/UpUp/master/dist/upup.sw.min.js), and defining the content you want your users to see when they are offline.

For example:

````html

UpUp.start({

  'content-url': 'offline.html',

  'assets': ['/img/logo.png', '/css/style.css', 'headlines.json']

});

````

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](https://www.talater.com/upup/). Once you're up and rolling, you can read the full [API Docs](https://github.com/TalAter/UpUp/blob/master/docs/README.md).**

### 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](https://letsencrypt.org/) 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](https://github.com/TalAter/UpUp/blob/master/docs/README.md)

### Author

Tal Ater: [@TalAter](https://twitter.com/TalAter)

### License

Licensed under [MIT](https://github.com/TalAter/annyang/blob/master/LICENSE).