Unpoly

Zeroconf Offline Strawman

(This might not work)

Unpoly wants to emulate a browser that is friendly to apps, not documents

Browsers don't work well when internet goes away

Offline links

It's not cool to burn down application state when connection is lost.

Can we do better?

a.up-offline

This class will be toggled automatically on all links as network connection is lost or regained.

Links with this class cannot currently be acccessed due to a loss of network connectivity.

Previously cached pages will remain accessible while the user is offline. Links to cached pages will not be assigned the .up-offline class.

Cache entries don't expire while offline.
 

Default style

a.up-offline {
  text-decoration: line-through
}

Connection state notifications

up.on('up:connection:lost', function(event) {
  $('<div class="toast"></div>')
    .text("Connection lost")
    .appendTo(document.body)
})

up.on('up:connection:restored', function(event) {
  $('<div class="toast"></div>')
    .text("Connection restored")
    .appendTo(document.body)
})

Offline forms

It's not cool to lose form data when connection is lost.

Can we do better?

Rescuing form data

<form method='post' action='/documents' up-rescue>
  <input type="text" name="title">
  <input type="file" name="document">
  <button type="submit">Submit</button>
</form>

up.on('up:request:rescued', function(event) {
  $('<div class="toast"></div>')
    .text("Retry: " + event.request.title)
    .on('click', event.request.retry)
    .appendTo(document.body)
})

Cold acccess when offline

What if the page isn't even open when connection is lost?

By moving the Unpoly cache into a service worker we can make cached pages accessible for new tabs.

Even when the user is offline and hasn't yet opened her browser.

Why this might not work

Offline is hard

• Devices don't actually know if they're online or not
• Being online/offline is not actually a binary state
  Cell switches, moving devices, captive portals, ...
• Service worker is on a different thread
• Need to cache JavaScript, CSS, images, fonts, ...
• Tracking of new app versions

But let's try!

Vielen Dank!