Over the past year, the world’s leading browsers have added features enabling web applications and publications to “phase shift” between online and offline states. Surrounding these new features is a growing set of communities broadly coalescing around the term “offline-first.” In this talk, we’ll take a look at some of the key bits of technology being used by these new phase-shifting applications, as well as how the W3C’s Digital Publishing Interest Group is exploring these (and other ideas) for possible use in Portable Web Publications. March 23, 2017

1. On again; Off again

2. bigbluehat.com
@bigbluehat
github.com/bigbluehat
worksFor
worksAt

3. “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

4. 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”

5. Web Pages, Apps, and Sites
• not exactly books, per se
• assumes a network connection
• "offline" is considered an error
online “only”

6. By our powers
combined?

7. 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

8. 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

9. Some
hope.

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

13. The
Tech

14. 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

15. 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>

16. 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; };

17. 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.

18. 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.”

19. 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

20. 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…

21. Packaging

22. 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

23. 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

24. 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

25. 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

26. Portable Web Publications
EPUB + Web = PWP

27. 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.

28. 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)

29. 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

33. 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”

34. Thanks.