On Again; Off Again - Benjamin Young - ebookcraft 2017

Embed Size (px)

Text of On Again; Off Again - Benjamin Young - ebookcraft 2017

  • On again; Off again

  • bigbluehat.com @bigbluehat




  • 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 nave

    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 } ] }


  • 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

    an untold number of if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount;

  • 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

    deprecatedbut 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); });


  • 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 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: ; rel=describedby --j38n02qryf9n0eqny8cq0 Content-Location: /index.html Content-Type: text/html Hello World! --j38n02qryf9n0eqny8cq0 Content-Location: /images/world.png Content-Type: image/png Transfer-Encoding: binary


  • 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 its 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 offlineportable 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.