On again; Off again

bigbluehat.com  @bigbluehat  

github.com/bigbluehat  

worksFor  

worksAt  

“Books can learn from the Web how to be bounded, but open. The Web can learn from books how to be open, but bounded.”

Hugh McGuire, Medium, April 2016

EPUB

•  made out of bits of Web technology –  HTML, CSS, JavaScript

•  doesn't work in a browser –  deliberately...maybe –  packaged in a zip file

offline “only”

Web Pages, Apps, and Sites

•  not exactly books, per se •  assumes a network connection •  "offline" is considered an error

online “only”

By our powers combined?

Offline First

"Movement" kicked off in the fall of 2013 •  Say Hello to Offline First •  Designing Offline-First Web Apps

Huge list of awesome stuff: •  Everything you need to know to create offline-first web apps

Progressive Web Apps + Offline Storage & Caching

Reasons

•  ignoring the rest of the world is shameful (at best)

•  ignoring our own modalities during travel is naïve

•  ignoring our dependence on power and connection is dangerous

to care

Some hope.

The  Cloud  is  a  lie.  The  Cloud  is  a  lie.  The  Cloud  is  a  lie.  

The Tech

Web App Manifest •  metadata about a Web app •  includes useful content for "installing" (via a browser) •  most useful (currently) on Mobile •  ManifoldJS packages Web apps as standalone desktop or mobile apps { "name": "Donate App", "description": "This app helps you donate to worthy causes.", "icons": [ { "src": "images/icon.png", "sizes": "192x192“ } ] }

manifest.json

Web Storage •  defines simple key/value storage •  sessionStorage - top-level browsing context scoped storage

–  handles data "leakage" across multiple tabs / windows •  localStorage - origin (domain) scoped storage

<div id="count">an untold number of</div> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount; </script>

IndexedDB

“[Web Storage] does not provide in-order retrieval of keys, efficient searching over values, or storage of duplicate values for a key.”

var db, request = indexedDB.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn10"}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Weaving the Web", author: "Tim Beners-Lee", isbn10: "006251587X"}); }; request.onsuccess = function() { db = request.result; };

AppCache CACHE MANIFEST # v1 2011-08-14 # This is another comment index.html cache.html style.css image1.png # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html

deprecated…but interesting.

Service Workers

“Web Applications traditionally assume that the network is reachable. ...This places web content at a disadvantage

versus other technology stacks.

The service worker is designed first to redress this balance by providing a Web Worker context, which can be started by a

runtime when navigations are about to occur.”

Service Workers

navigator.serviceWorker.register("/sw.js").then(registration => { console.log("success!"); if (registration.installing) { registration.installing.postMessage("Howdy from your installing page."); } }, err => { console.error("Installing the worker failed!", err); });

code

File API

“defines an API to navigate file system hierarchies, and defines a means by which a user agent may expose

sandboxed sections of a user's local filesystem to web applications”

…which could be an offline Web app in the future…

Packaging

ZIP

•  Proprietary, but pervasive •  Abundant tooling, but widely varied in use •  Contents can be *anything*, so unpacking is scary •  Not (read) stream-able (last I checked) •  No intrinsic internal referencing system

Packaging on the Web •  based on MIME

–  what email is encoded in •  Web <form>’s with file attachments use something similar •  Streamable!! •  Internally (and externally) referenceable components •  Content Index (for massive documents)

•  Latest iteration is back in development & discussion –  https://github.com/dimich-g/webpackage

aka Web Packaging

Web Packaging

Content-Type: application/package Content-Location: http://example.org/examplePack.pack Date: Wed, 15 Nov 2016 06:25:24 GMT Expires: Thu, 01 Jan 2017 16:00:00 GMT Link: </index.html>; rel=describedby --j38n02qryf9n0eqny8cq0 Content-Location: /index.html Content-Type: text/html <body> Hello World! <img src="images/world.png"></body> --j38n02qryf9n0eqny8cq0 Content-Location: /images/world.png Content-Type: image/png Transfer-Encoding: binary

example

Web Packaging

•  a couple of web pages with resources in a package –  sound like an ebook?

•  a web page with a resources from the other origin •  “encyclopedia in a file” via content index documents •  Signed packages

–  “The signed package ensures the verification of the origin even if the package is stored in a local file or obtained via other insecure ways like HTTP, or hosted on another origin's server.”

Use Cases

Portable Web Publications EPUB + Web = PWP

Web Publication Use Cases

•  Web Publication –  Readers Needs –  Publishers’ and Authors’ Needs

•  Portable Web Publication (extends the above) –  Distribution and Iteration –  Archiving –  Integrity and Authenticity

•  Escalating Trust –  Access to unique device capabilities: camera, mic, etc.

Web Publication

•  a collection of one or more constituent resources, organized together in a uniquely identifiable grouping that may be presented using standard Open Web Platform technologies –  Not just a collection of links –  Publishing involves obtaining & organizing (“manifesting”) the constituents

•  Must provide ordering •  May be packaged (becomes a Portable Web Publication) •  Must be available offline •  Contains it’s own metadata (as the publication is a Thing in itself)

Pieces of a Web Publication

•  Online/Offline •  Addressing and Identification •  Web Publication Manifests •  Metadata Discovery •  Web Publication APIs

–  Document Collection Interface and API –  Publication Object Model and API

•  Styling and Layout, Pagination •  Presentation Control and Personalization

all very in progress

Portable Web Publications

•  Packaging Formats –  More than “just” offline—portable –  “We expect that packaging will not be tightly coupled to

the architecture of web publications, so that different packaging formats can be used for different purposes.”

•  Security Models –  “must incorporate a security model that defines rules for

both the online and portable states”

Thanks.