Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The UnCloud - CloudConf 2016

Marco Cedaro
March 11, 2016
Programming
0
230

The UnCloud - CloudConf 2016

The cloud changed the way we think about our services.But what happens when there isn't one? Is your web client ready to deal with a down or a loss of connectivity?

This talk will explore reasons, the awkward first steps and the current state of art of offline for web application.

note: Jake Archibald's video clip was extracted from https://www.youtube.com/watch?v=cR-TP6jOSQM

Marco Cedaro

March 11, 2016
Tweet

More Decks by Marco Cedaro

See All by Marco Cedaro
Do we need it? The economics of technical choices
cedmax
0
24
React refactoring, off the hook(s)!
cedmax
2
550
Componenti, pattern e altre robette non semplicissime da gestire
cedmax
0
530
Tales after midnight @ webdeldn
cedmax
0
620
Components, patterns and sh*t it’s hard to deal with @ Intersection
cedmax
0
58
Components, patterns and sh*t it’s hard to deal with @ Front Trends 2017
cedmax
2
290
Components, patterns and sh*t it’s hard to deal with
cedmax
2
650
From the Front, 5* years in 5 minutes.
cedmax
0
68
Zombie Code - Dibi London 2016
cedmax
0
300

Other Decks in Programming

See All in Programming
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう！
cocoeyes02
0
410
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.5k
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
430
Thank you <💅>, What's the Next?
ahoxa
1
500
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
690
Amazon CloudWatchの地味だけど強力な機能紹介！
itotsum
0
180
SwiftUI API Design Lessons
niw
1
300
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Do Dumb Things
mitsuhiko
0
440
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
160
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
160
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
530

Featured

See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
90
6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Cult of Friendly URLs
andyhume
78
6.3k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k

Transcript

  1. The UnCloud

  2. Basically UNCLOUD?

  3. Once upon a time… 1980s

  4. …fast forward 2010s

  5. Something happened 1980s 2010s

  6. TL;DR: 2007

  7. @cedmax Front end
 developer since able to grow a beard.

    90s/00s

  8. Basically postAPPSERA

  9. Challenges Privacy Security Design & Ux Context APIs access …

  10. The web? 2004

  11. The web…

  12. …was different

  13. Adapt 2008/9

  14. Adapt 2008/9

  15. “The landscape is shifting, perhaps more quickly than we might

    like.” 
 Ethan Marcotte
 http://alistapart.com/article/responsive-web-design 2010

  16. Flexibility 2008/9

  17. Catch up

  18. “Mobile browsing is expected to outpace desktop-based access within three

    to five years.” 
 Ethan Marcotte
 http://alistapart.com/article/responsive-web-design

  19. Challenges Privacy Security Design & Ux Context APIs access …

  20. Network perception

  21. Internet

  22. “I intend to protect a free and open Internet, extend

    its reach to every classroom, and every community, and help folks build the fastest network.” 
 Barack Obama, President of USA
 https://www.whitehouse.gov/blog/2015/01/20/watch-president-obamas-2015-state-union

  23. offline is a big deal

  24. Application Cache 2010

  25. <!-- index.html --> <html manifest="offline.appcache"> # offline.appcache CACHE MANIFEST assets/v6/script/script.min.js

    assets/v6/style/main.min.css assets/v6/style/font/pro.ttf assets/v6/style/img/sprites.png
  26. None

  27. Biggest 
 problem Cache First Only
 &
 The Cache only

    updates if 
 the manifest itself changes

  28. <!-- index.html --> <html manifest="offline.appcache">

  29. “We all know someone who needs “observing” more than others

    in case they do something really stupid. ApplicationCache is one of those people” 
 Jake Archibald
 http://alistapart.com/article/application-cache-is-a-douchebag 2012
  30. None

  31. Basically current state

  32. you might have heard of

  33. “A service worker is a script that is run by

    your browser in the background, separate from a web page, opening the door to features which don’t need a web page or user interaction.” 
 Matt Gaunt
 http://www.html5rocks.com/en/tutorials/service-worker/introduction/

  34. Pretty powerful

  35. but with great powers…

  36. Can’t access the DOM Can’t hold a state[1] It’s event

    driven 
 can access IndexDB API [1] serviceworker.js
  37. None

  38. self.addEventListener('install', function(event) { //[…] }); self.addEventListener('activate', function(event) { //[…] });

    self.addEventListener('fetch', function(event) { //[…] });

  39. a working example

  40. // script.js if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }

  41. // serviceworker.js var staticCacheName = 'cache-v1'; var urlsToCache = [

    '/', '/styles/main.css', '/script/main.js', '/offline' ]; function updateStaticCache() { return caches.open(staticCacheName) .then(function(cache) { return cache.addAll(urlsToCache); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateStaticCache()); });

  42. // serviceworker.js var staticCacheName = 'cache-v1'; var urlsToCache = [

    '/', '/styles/main.css', '/script/main.js', '/offline' ]; function updateStaticCache() { return caches.open(staticCacheName) .then(function(cache) { return cache.addAll(urlsToCache); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateStaticCache()); });

  43. // serviceworker.js var staticCacheName = 'cache-v1'; var urlsToCache = [

    '/', '/styles/main.css', '/script/main.js', '/offline' ]; function updateStaticCache() { return caches.open(staticCacheName) .then(function(cache) { return cache.addAll(urlsToCache); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateStaticCache()); });

  44. // serviceworker.js var staticCacheName = 'cache-v1'; var urlsToCache = [

    '/', '/styles/main.css', '/script/main.js', '/offline' ]; function updateStaticCache() { return caches.open(staticCacheName) .then(function(cache) { return cache.addAll(urlsToCache); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateStaticCache()); });

  45. // serviceworker.js var staticCacheName = 'cache-v1'; var urlsToCache = [

    '/', '/styles/main.css', '/script/main.js', '/offline' ]; function updateStaticCache() { return caches.open(staticCacheName) .then(function(cache) { return cache.addAll(urlsToCache); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateStaticCache()); });

  46. “When the user navigates to your site, the browser tries

    to redownload the script file that defined the service worker in the background.” 
 Matt Gaunt
 http://www.html5rocks.com/en/tutorials/service-worker/introduction/

  47. // serviceworker.js var staticCacheName = ‘cache-v2'; var clearOldCaches = function()

    { return caches.keys().then(function(keys) { return Promise.all( keys.filter(function (key) { return key.indexOf(version) != 0; }).map(function (key) { return caches.delete(key); }) ); }) } self.addEventListener("activate", function(event) { event.waitUntil(clearOldCaches()) });

  48. // serviceworker.js var staticCacheName = ‘cache-v2'; var clearOldCaches = function()

    { return caches.keys().then(function(keys) { return Promise.all( keys.filter(function (key) { return key.indexOf(version) != 0; }).map(function (key) { return caches.delete(key); }) ); }) } self.addEventListener("activate", function(event) { event.waitUntil(clearOldCaches()) });

  49. // serviceworker.js var staticCacheName = ‘cache-v2'; var clearOldCaches = function()

    { return caches.keys().then(function(keys) { return Promise.all( keys.filter(function (key) { return key.indexOf(version) != 0; }).map(function (key) { return caches.delete(key); }) ); }) } self.addEventListener("activate", function(event) { event.waitUntil(clearOldCaches()) });

  50. // serviceworker.js self.addEventListener('fetch', function(event) { //Where the magic lives });

  51. cache first

  52. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(request) .then(function (response) {

    return response || fetch(request) .catch(handleFailure) }) ); });

  53. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(request) .then(function (response) {

    return response || fetch(request) .catch(handleFailure) }) ); });

  54. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(request) .then(function (response) {

    return response || fetch(request) .catch(handleFailure) }) ); });

  55. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(request) .then(function (response) {

    return response || fetch(request) .catch(handleFailure) }) ); });

  56. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(request) .then(function (response) {

    return response || fetch(request) .catch(handleFailure) }) ); });

  57. network first

  58. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  59. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  60. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  61. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  62. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  63. // serviceworker.js self.addEventListener('fetch', function(event) { event.respondWith( fetch(request, { credentials: 'include'

    }) .catch(function () { return caches.match(request) .then(function (response) { return response || caches.match('/offline'); }) }) ); });

  64. not a GET?

  65. // serviceworker.js self.addEventListener('fetch', function(event) { var request = event.request; if

    (request.method !== 'GET') { event.respondWith( fetch(request) .catch(function () { return caches.match('/offline'); }) ); return; } });

  66. // serviceworker.js self.addEventListener('fetch', function(event) { var request = event.request; if

    (request.method !== 'GET') { event.respondWith( fetch(request) .catch(function () { return caches.match('/offline'); }) ); return; } });

  67. // serviceworker.js self.addEventListener('fetch', function(event) { var request = event.request; if

    (request.method !== 'GET') { event.respondWith( fetch(request) .catch(function () { return caches.match('/offline'); }) ); return; } });

  68. // serviceworker.js self.addEventListener('fetch', function(event) { var request = event.request; if

    (request.method !== 'GET') { event.respondWith( fetch(request) .catch(function () { return caches.match('/offline'); }) ); return; } });

  69. wrapping up

  70. // serviceworker.js function isHMTL(request){ return request.headers.get('Accept') .indexOf('text/html') !== -1; }

    self.addEventListener('fetch', function(event) { var request = event.request; if (request.method !== 'GET') { return networkOnly(event); } if (isHTML(request)) { return networkFirst(event); } else { return cacheFirst(event); } });

  71. // serviceworker.js function isHMTL(request){ return request.headers.get('Accept') .indexOf('text/html') !== -1; }

    self.addEventListener('fetch', function(event) { var request = event.request; if (request.method !== 'GET') { return networkOnly(event); } if (isHTML(request)) { return networkFirst(event); } else { return cacheFirst(event); } });

  72. // serviceworker.js function isHMTL(request){ return request.headers.get('Accept') .indexOf('text/html') !== -1; }

    self.addEventListener('fetch', function(event) { var request = event.request; if (request.method !== 'GET') { return networkOnly(event); } if (isHTML(request)) { return networkFirst(event); } else { return cacheFirst(event); } });

  73. // serviceworker.js function isHMTL(request){ return request.headers.get('Accept') .indexOf('text/html') !== -1; }

    self.addEventListener('fetch', function(event) { var request = event.request; if (request.method !== 'GET') { return networkOnly(event); } if (isHTML(request)) { return networkFirst(event); } else { return cacheFirst(event); } });

  74. service workers give you control

  75. https://serviceworke.rs/ The Service Worker Cookbook is a collection of working,

    practical examples of using service workers in modern web apps.

  76. Basically WHAT NOW?

  77. demo time https://pokedex.org 2015/16

  78. this is sorted

  79. but is it?

  80. // script.js if (navigator.serviceWorker) { navigator.serviceWorker.register('/serviceworker.js'); }

  81. Progressive enhancement

  82. We’ll fix that

  83. a takeaway note

  84. Does this make any sense?

  85. “ There will always be some alternative that is technologically

    more advanced than the web. First there were CD- ROMs. Then we had Flash. Now we have native apps.” 
 Jeremy Keith
 https://adactio.com/journal/9016

  86. And yet the web persists.

  87. Responsive Web Design Ethan Marcotte 
 http://alistapart.com/article/responsive-web-design Application Cache is

    A Douchebag Jake Archibald http://alistapart.com/article/application-cache-is-a- douchebag Introduction to Service Worker
 Matt Gaunt http://www.html5rocks.com/en/tutorials/service- worker/introduction/ Pokedex.org Nolan Lawson https://pokedex.org https://github.com/nolanlawson/pokedex.org My First Service Worker Jeremy Keith https://adactio.com/journal/9775 Web! What is it good for? Jeremy Keith https://adactio.com/journal/9016 Resources [email protected] http://cedmax.com @cedmax any question?