offline first - Speaker Deck

Slide 1

Slide 1 text

offline-first PHPUG Düsseldorf

Slide 2

Slide 2 text

Ola Gasidlo JavaScript / Frontend Developer since 2002 Computer Science Student, FH Dortmund Twitter: @misprintedtype Web: http://antilab.net Mitgründer der OpenTechSchool Dortmund

Slide 3

Slide 3 text

We used to love our desktop...

Slide 4

Slide 4 text

… but we broke up.

Slide 5

Slide 5 text

amount of mobile-only web users is out of reach

Slide 6

Slide 6 text

the problems with mobile applications?

Slide 7

Slide 7 text

why not just built native apps? -

Slide 8

Slide 8 text

WE CAN’T KEEP BUILDING APPS WITH THE DESKTOP MINDSET OF PERMANENT, FAST CONNECTIVITY, WHERE A TEMPORARY DISCONNECTION OR SLOW SERVICE IS REGARDED AS A PROBLEM AND COMMUNICATED AS AN ERROR. Hood.ie - 2013

Slide 9

Slide 9 text

But our bandwith is pretty fine! … is it?

Slide 10

Slide 10 text

OMG! CAN WE DO THAT?! HTML5 - our savior

Slide 11

Slide 11 text

manifest - allows to specify which files the browser should cache - app will load and work correctly, even after the refresh button have been pushed ++ you can use the app offline ++ no trip to the network, so the loading is fast ++ your site is down? no worries! your users will get the full (offline) experience

Slide 12

Slide 12 text

manifest IE8+ / FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ ... specify the right mime-type: AddType text/cache-manifest .appcache “offline & online” are events you can bind a listener to

Slide 13

Slide 13 text

manifest CACHE MANIFEST # 2013-11-13:v3 CACHE index.html stylesheet.css images/logo.png http://cdn.example.com/script/main.js NETWORK: * FALLBACK: /online.html /offline.html /large/bg.jpg /mini.png

Slide 14

Slide 14 text

detect state - detect state by navigator.onLine (online = true, offline = false) - in Firefox the events offline / online are available

Slide 15

Slide 15 text

localStorage / sessionStorage IE8+ / FF 3.5+ / Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+ - replaces cookies - > 4KB - min. 5MB, up to 25 / 50MB - stores key / value pairs (values = Strings) - super simple API

Slide 16

Slide 16 text

localStorage / sessionStorage localStorage.length; // number of items stored localStorage.key(i); // name of key at index localStorage.getItem(“key”); // get itemvalue localStorage.setItem(“key”,”value”); // set itemvalue localStorage.removeItem(“key”); // remove item localStorage.clear(); // drop storage

Slide 17

Slide 17 text

WebSQL gone, gone, gone

Slide 18

Slide 18 text

INDEXEDDB - NoSQL Database like MongoDB / CouchDB - self defined JavaScript ObjectStores - stores key / value pairs - can store any type you want - every ObjectStore has a collection of indexes - thanks to the cursor, we can iterate also just a part of the data

Slide 19

Slide 19 text

INDEXEDDB Datenbank Object Store Object Store Datensatz Datensatz Datensatz Key Value Key Value Key Value

Slide 20

Slide 20 text

INDEXEDDB - ASYNCHRON & TRANSACTION Just call back!

Slide 21

Slide 21 text

YDN-DB // yathit Storage library http://dev.yathit.com/

Slide 22

Slide 22 text

Web File API - supports to write and read sequential data on the local file system - your domain is provided with a complete sand-boxed hierarchical file system to use as it chooses ++ large text and binary files can be created and stored ++ performance should be good -- a very early specification which is subject to revision -- an obvious security risk unless file writing is restricted -- little support in current browsers and polyfills may be impractical -- unstructured data with no transactions, indexing or searching facilties