Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

On Again; Off Again - Benjamin Young - ebookcraft 2017

1,356 views

Published on

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

Published in: Technology

On Again; Off Again - Benjamin Young - ebookcraft 2017

  1. 1. On again; Off again
  2. 2. bigbluehat.com   @bigbluehat   github.com/bigbluehat   worksFor   worksAt  
  3. 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. 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. 5. Web Pages, Apps, and Sites •  not exactly books, per se •  assumes a network connection •  "offline" is considered an error online “only”
  6. 6. By our powers combined?
  7. 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. 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. 9. Some hope.
  10. 10. The  Cloud  is  a  lie.   The  Cloud  is  a  lie.   The  Cloud  is  a  lie.  
  11. 11. The Tech
  12. 12. 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
  13. 13. 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>
  14. 14. 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; };
  15. 15. 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.
  16. 16. 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.”
  17. 17. 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
  18. 18. 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…
  19. 19. Packaging
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Portable Web Publications EPUB + Web = PWP
  25. 25. 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.
  26. 26. 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)
  27. 27. 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
  28. 28. 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”
  29. 29. Thanks.

×