offline

From IndieWeb

This article is a stub. You can help the IndieWeb wiki by expanding it.


offline is anytime you're not online and connected to the internet; on the IndieWeb, a personal site can have offline support by implementing an offline first approach.

It's similar to intermittent connectivity, like using a network with high latency or packet loss, but obviously not quite the same.

An offline first design pattern is emerging, especially for mobile (web)apps, in the same vein as mobile first or notification/text first design. The pattern is to design an app with offline as the primary use case, so that features work offline as much as possible, then add network sync and features that require connectivity as optional extras.

Why

People are often at places without an internet connection, however they may have previously browsed your site when online. Offline support can provide a friendlier experience on your site when readers are browsing it without an internet connection, such as explicitly informing them when a page is unavailable, and providing them with a list of your pages that they previously browsed (like blog posts) that they can read while offline.

How to

Offline page

Perhaps the simplest bit of user visible offline support is an explicit offline page, so when a user is offline and browses to a page on your site that is not cached, they will see a friendlier message from you about being offline instead of the default browser "network unavailable" error message.

In Jeremy Keith’s Minimal viable service worker article, he links to an example minimum viable service worker that also has offline page support (from the 2018 Ampersand event site). Using that example, follow these steps to create a custom offline page and service worker to support it:

  1. Start with a minimal static offline page, like the Ampersand event site offline page:
  2. Customize it for your own site (e.g. with your site banner and footer) and save it somewhere like offline.html.
  3. Use a minimal service worker that has explicit offline page support built-in like:
  4. Customize it at least as follows:
    • Update the offlinePage variable to point to your offline page path, e.g. if you put offline.html at the root of your site, then use "/offline.html".
    • Update the cache.addAll block with resources you want to optionally pre-cache, like perhaps your home page and home page CSS file.
    • ...

...

IndieWeb Examples

Examples of personal sites with offline support.

Jeremy Keith

Jeremy Keith has quite extensive offline support on his site adactio.com since 2015.

Tantek

Tantek Çelik has offline support on tantek.com for viewing pages you’ve already browsed as of 2019

IndieWeb Tools

Quill

As of 2015-05-09, Quill supports offline editing, but will only let you have one offline draft. The post is saved in the browser's local storage while editing, so you can edit offline, close the browser, and when you get back online you can return to Quill and publish the post.

Teacup

As of November 2018, a special version of Teacup is available as an offline-first app. Creating a post will store the post locally and sync when the device is back online.

IndieWeb thoughts

Mobile micropub clients are examples of apps that should ideally work offline as well as online. Ryan Barrett's post Posting to the indieweb from your phone describes one straw man design for this.

Brainstorming

Brainstorming for offline features for a personal site

Offline Reading of Posts

  • Kartik Prabhu enable offline reading of posts using a service worker. When you visit my site, it allows you to cache some article offline. then later you can read my article without network. can also be implemented for readers though. could also be useful in micropub clients for saving drafts of posts offline, so you can write your post without connection (also known as a local first approach), then sync/publish when you get back the network

Behavior when online

  • Lewis Cowles try to get the resource in a set period of time, forwarding server responses regardless of if `response.ok`. This can relieve pressure on a site if many visitors come; if they also have modern ServiceWorker respecting browsers.
  • Lewis Cowles If the request takes too long, which I've set as 500ms or half a second, then try to fallback to cached content if available. If cached content is not available, then I believe the offline version should be served if the resource requested accepts html.
  • Lewis Cowles there could be corner cases for 4XX responses to remove resources from the client cache. This is a very risky data strategy, which could and should probably be handled better by checking for etag or similar expiry on the response.

Behavior when offline

  • Lewis Cowles if something is in cache, then retrieve it and serve it to the user.
  • Lewis Cowles if something is not in cache and indicates via request header that it accepts text/html, then I serve from /offline.html which is deliberately vague about something existing or not [Example]. I actually borrowed the guard on http header from Tantek Çelik implementation.
  • Lewis Cowles My offline html fallback page includes some extra JavaScript and strips some metadata. It's purpose is to communicate to the user what they are seeing and why
  • Lewis Cowles In addition to communicating why the visitor see's the page, my offline page attempts to indicate to the visitor if they are online or offline, using progressive enhancement. If the browser does not support this, then I present the page as offline. If it does support this, then I additionally add an onClick handler which reloads the page.

App examples

in general

text editor

Make sure you have a simple text editor on whatever device you're using offline. Since such apps rarely use any network access for anything anyway, they are ideal for offline usage. E.g.

  • iOS: Notes app

iOS

Apps specific to iOS that work very well offline.

maps.me

maps.me is an excellent offline map program. You have to download the (OSM-based) maps per state/province BEFORE you go offline, but then once you're offline, it can still:

  • show you the map (including zoom in etc., street names etc.)
  • locate you on the map (via wifi-SSID location db which is already on the device)
  • search the map
  • do simple car-based route-planning

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=offline&oldid=86801"