Offline for web - Frontend Dev Conf Minsk 2014
-
Upload
jan-jongboom -
Category
Internet
-
view
1.840 -
download
0
Transcript of Offline for web - Frontend Dev Conf Minsk 2014
![Page 1: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/1.jpg)
Of!ine for web
Jan JongboomFrontend Dev Conf 2014
![Page 2: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/2.jpg)
@janjongboomJan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox OS.
![Page 3: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/3.jpg)
@janjongboomJan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox OS.
![Page 4: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/4.jpg)
Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion people out of 7.
![Page 5: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/5.jpg)
4,500,000,000
Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion people out of 7.
![Page 6: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/6.jpg)
4.5 billion people, all on mobileThese people are going to come online on mobile
![Page 7: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/7.jpg)
Don’t break their experience!
Mobile users don’t always have an internet connection! Don’t break their experience, build with offline in mind!
![Page 8: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/8.jpg)
37%Western world, last year. Netherlands already 37% of all traffic is mobile. Will only increase. It’s ALREADY an issue!
![Page 9: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/9.jpg)
Оффлайн важна!
For years we have been developing with online in our heads, but we should stop treating like offline is still a second class citizen
![Page 10: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/10.jpg)
Let’s do it!Let’s do something about it!
![Page 11: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/11.jpg)
Currency converter BYR -> EUR. Price of a beer.- It’s a website. Resources are on a server.- Data comes from Yahoo
![Page 12: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/12.jpg)
Currency converter BYR -> EUR. Price of a beer.- It’s a website. Resources are on a server.- Data comes from Yahoo
![Page 13: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/13.jpg)
Currency converter BYR -> EUR. Price of a beer.- It’s a website. Resources are on a server.- Data comes from Yahoo
![Page 14: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/14.jpg)
When no internet connection -> breaks. Oh noes. We want to fix it.
![Page 15: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/15.jpg)
The shellApp content
Let me introduce some basic concepts here. An application consists of two parts:
1. The shell2. App Content
![Page 16: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/16.jpg)
The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all assets that make up your application. Code files, the user interface, images. It's the part that you would distribute through an app store, or the application that you put up on a web server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to re-release your product.
![Page 17: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/17.jpg)
The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all assets that make up your application. Code files, the user interface, images. It's the part that you would distribute through an app store, or the application that you put up on a web server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to re-release your product.
![Page 18: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/18.jpg)
App content
• Everything your app serves up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app content is everything your app serves up. News items; the facebook feed. Most of the times it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update.
Ergo: We need to distinguish between these two types is because they require different caching strategies and techniques, but you can't make an application available without either of these two.
![Page 19: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/19.jpg)
App content
• Everything your app serves up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app content is everything your app serves up. News items; the facebook feed. Most of the times it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update.
Ergo: We need to distinguish between these two types is because they require different caching strategies and techniques, but you can't make an application available without either of these two.
![Page 20: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/20.jpg)
Part I: The shell
So we have a website, it has HTML/CSS/JS and now we want to cache it. There is a technique called appcache. Already in all major browsers, even IE. So you can use it today.
![Page 21: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/21.jpg)
List all !les, put them in cacheBasically, list all files & put them in the cache.
![Page 22: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/22.jpg)
AppCacheFirst request
Grabbing jan.com/index.html
manifest.appcache
On first request it looks like this. Browser fetches your HTML page. If it has appcache, it fetches that file and loads all resources. No initial performance penalty.
![Page 23: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/23.jpg)
AppCacheFirst request
Grabbing jan.com/index.html
Please cache all these !les manifest.appcache
On first request it looks like this. Browser fetches your HTML page. If it has appcache, it fetches that file and loads all resources. No initial performance penalty.
![Page 24: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/24.jpg)
AppCache2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
![Page 25: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/25.jpg)
AppCache2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
![Page 26: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/26.jpg)
AppCache2nd request
I need foo/blah
200 OK! Browser Cache
Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
![Page 27: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/27.jpg)
Writing AppCache !leStore as currency.appcache
Appcache is a file on your server. Very easy.
![Page 28: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/28.jpg)
Writing AppCache !leStore as currency.appcache
Appcache is a file on your server. Very easy.
![Page 29: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/29.jpg)
Writing AppCache !leStore as currency.appcache
Appcache is a file on your server. Very easy.
![Page 30: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/30.jpg)
Writing AppCache !leStore as currency.appcache
Appcache is a file on your server. Very easy.
![Page 31: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/31.jpg)
Tell the browser there is a cache file with attribute
![Page 32: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/32.jpg)
currency.appcache
JavaScript !le
Browser will ALWAYS show cached version. Updates go by updating the version number in the manifest. Downloads in background.
Javascript APIs available, downloading/progress/noupdate.
![Page 33: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/33.jpg)
Inspecting AppCache (FF)Tools > Developer > Developer Toolbar
appcache list localhost
Dealing with appcache info, to debug
![Page 34: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/34.jpg)
Inspecting AppCache (FF)Tools > Developer > Developer Toolbar
appcache clear
appcache validate http://your.appcache
![Page 35: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/35.jpg)
Inspecting AppCache (Chrome)chrome://appcache-internals/
Chrome has a similar thing under chrome://appcache-internals
![Page 36: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/36.jpg)
Inspecting AppCache (Chrome)chrome://appcache-internals/
Chrome has a similar thing under chrome://appcache-internals
![Page 37: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/37.jpg)
Shit you will do wrong
• Setting wrong MIME type
• Have one !le 404
• Not realizing user will always see old version !rst
• Expiration headers on appcache
• Develop with appcache enabled(tip: set wrong MIME type in dev)
Some stuff you will do wrong
![Page 38: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/38.jpg)
PerformanceAlso useful for performance. Because no need to hit the server. This is data from a web application I built. Pretty simple.
![Page 39: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/39.jpg)
1500 msEmpty cache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
![Page 40: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/40.jpg)
820 msSubsequent reload
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
![Page 41: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/41.jpg)
320 msReload with appcache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript):
And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
![Page 42: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/42.jpg)
250% speed bumpNot just for of"ine
![Page 43: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/43.jpg)
Part II: App contentWe talked about the shell, but what’s equally important is what the shell contains
![Page 44: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/44.jpg)
App content, comes from server. This is calculated using the textbox and data from a server that has currency exchange data.
![Page 45: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/45.jpg)
App content, comes from server. This is calculated using the textbox and data from a server that has currency exchange data.
![Page 46: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/46.jpg)
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
![Page 47: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/47.jpg)
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
![Page 48: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/48.jpg)
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
![Page 49: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/49.jpg)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
![Page 50: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/50.jpg)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
![Page 51: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/51.jpg)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
![Page 52: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/52.jpg)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
![Page 53: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/53.jpg)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
![Page 54: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/54.jpg)
Something in between to shake up the audience.
![Page 55: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/55.jpg)
Path caching
You can use similar things to make your application perceivably faster for users via path caching. Guess which way they go.
![Page 56: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/56.jpg)
Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t want to wait when we click.
![Page 57: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/57.jpg)
Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t want to wait when we click.
![Page 58: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/58.jpg)
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
![Page 59: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/59.jpg)
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
![Page 60: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/60.jpg)
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
![Page 61: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/61.jpg)
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
![Page 62: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/62.jpg)
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
![Page 63: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/63.jpg)
Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
![Page 64: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/64.jpg)
Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
![Page 65: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/65.jpg)
Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
![Page 66: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/66.jpg)
Part III: The futureLet’s take a peek into the future
![Page 67: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/67.jpg)
AppCache
AppCache sounds pretty amazing right? Well, not everyone agrees... Jake Archibald, anyone heard of this guy?
(Lists some key problems with AppCache)
![Page 68: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/68.jpg)
Give developers !ne-grained control about caching,
without breaking the web
So a new proposal popped up written by Google (and backed up by Mozilla since then). Originally known under `NavigationControllers`, and currently under `ServiceWorkers`. Main goal:
![Page 69: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/69.jpg)
ServiceWorkersFirst request
Grabbing jan.com/index.html
![Page 70: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/70.jpg)
ServiceWorkersFirst request
Grabbing jan.com/index.html
For foo/* please consult me!
![Page 71: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/71.jpg)
ServiceWorkers2nd request
I need foo/blah
Javascript file acts as HTTP proxy now
![Page 72: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/72.jpg)
ServiceWorkers2nd request
I need foo/blah
Javascript file acts as HTTP proxy now
![Page 73: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/73.jpg)
ServiceWorkers2nd request
I need foo/blah
200 OK!
Javascript file acts as HTTP proxy now
![Page 74: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/74.jpg)
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
![Page 75: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/75.jpg)
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
![Page 76: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/76.jpg)
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers.
This is for the whole domain
![Page 77: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/77.jpg)
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
![Page 78: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/78.jpg)
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
![Page 79: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/79.jpg)
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
![Page 80: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/80.jpg)
Spec & playing aroundhttps://github.com/slightlyoff/ServiceWorker
It's testable, there is a polyfill available, but it's really for experimenting only.
![Page 81: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/81.jpg)
OMGAWESOMEWant to see Firefox OS?
OMG AWESOME SHIT. Now you know how to make offline web apps. I know that there will be a bunch of ppl that want to know more about FFOS. Meet me afterwards. I also have devices with me.
Now ONE MORE THING... This is too good not to show. A commercial from Movistar about Firefox OS to get you excited about that.
![Page 82: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/82.jpg)
![Page 83: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/83.jpg)
![Page 84: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/84.jpg)
Thank you!
slideshare.net/janjongboomThank you!
![Page 85: Offline for web - Frontend Dev Conf Minsk 2014](https://reader031.fdocuments.in/reader031/viewer/2022030317/53ed27058d7f721a1e8b7d4d/html5/thumbnails/85.jpg)
slideshare.net/janjongboom
Questions?
Thank you!