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

The UnCloud - CloudConf 2016

Marco Cedaro
March 11, 2016
Programming
0
220

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
18
React refactoring, off the hook(s)!
cedmax
2
460
Componenti, pattern e altre robette non semplicissime da gestire
cedmax
0
460
Tales after midnight @ webdeldn
cedmax
0
530
Components, patterns and sh*t it’s hard to deal with @ Intersection
cedmax
0
51
Components, patterns and sh*t it’s hard to deal with @ Front Trends 2017
cedmax
2
260
Components, patterns and sh*t it’s hard to deal with
cedmax
2
620
From the Front, 5* years in 5 minutes.
cedmax
0
62
Zombie Code - Dibi London 2016
cedmax
0
290

Other Decks in Programming

See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
440
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.4k
WEBエンジニア向けAI活用入門
sutetotanuki
0
310
Realtime API 入門
riofujimon
0
120
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
JaSST 24 九州：ワークショップ(は除く) 実践！マインドマップを活用したソフトウェアテスト＋活用事例
satohiroyuki
0
280
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.7k
Identifying User Idenity
moro
6
8.3k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
220
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
250
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ～俺のやらかしを越えてゆけ～
techouse
52
33k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
290

Featured

See All Featured
Fireside Chat
paigeccino
32
3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
4
380
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing the Hi-DPI Web
ddemaree
280
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k

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?