Offline is the new black

Video thumbnail (Frame 0) Video thumbnail (Frame 1838) Video thumbnail (Frame 2406) Video thumbnail (Frame 3796) Video thumbnail (Frame 4496) Video thumbnail (Frame 12202) Video thumbnail (Frame 19908) Video thumbnail (Frame 25975) Video thumbnail (Frame 34899)
Video in TIB AV-Portal: Offline is the new black

Formal Metadata

Offline is the new black
Title of Series
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Heard a lot about ServiceWorker, but unsure about what it does, how it works and why you should use it? Also, what AppCache is, why it sucks but why you still have to understand and use it? This talk is for you. Afterwards, you'll be able to build cross-browser compatible offline web applications. This allows your users to always use your application, no matter where they are and how their network is treating them.
Open source Software developer Multiplication sign Software developer Feedback Open source Lie group Information security Logic gate Exception handling
Building Mobile app Visualization (computer graphics) Content management system Interface (computing) Moment (mathematics) Website Stack (abstract data type) Front and back ends Library (computing) Element (mathematics)
Building Planning Right angle System call
NP-hard Building Structural load Multiplication sign Real-time operating system Open set Software bug Web 2.0 Facebook Medical imaging Fluid statics Roundness (object) Blog Computer configuration Single-precision floating-point format Category of being Information security Service (economics) Touchscreen File format Structural load Web page Open source Electronic mailing list Fitness function Bit Connected space Internetworking Phase transition Website Software testing Right angle Quicksort Cycle (graph theory) Spacetime Web page Laptop Point (geometry) Metre Mobile app Service (economics) Computer file Divisor Software developer Real number Web browser Heat transfer Event horizon Power (physics) Wave packet 2 (number) Number Revision control Latent heat Goodness of fit Regular graph Cache (computing) Internetworking Profil (magazine) Energy level Message passing Form (programming) Information Interface (computing) Planning Computer network Spiral Line (geometry) Cartesian coordinate system System call Shareware Cache (computing) Number Event horizon Software Web-Designer Personal digital assistant Speech synthesis Video game Codec Game theory Online game Family
Android (robot) Code State of matter Logarithm Direction (geometry) Multiplication sign 40 (number) 1 (number) Combinational logic Price index Mereology Perspective (visual) Web 2.0 Casting (performing arts) Different (Kate Ryan album) Fiber bundle Office suite Service (economics) Theory of relativity Software developer Computer file Moment (mathematics) Attribute grammar Bit Connected space Process (computing) Hard disk drive Website Right angle Quicksort Navigation Reading (process) Spacetime Reverse engineering Web page Point (geometry) Digital filter Game controller Mobile app Functional (mathematics) Personal identification number Service (economics) Computer file Image resolution Flash memory Web browser Event horizon Computer icon Power (physics) Sic Internetworking Natural number Queue (abstract data type) Video game console Software testing Metropolitan area network Dependent and independent variables Dialect Matching (graph theory) Server (computing) Cellular automaton Line (geometry) Cartesian coordinate system Shareware Graphical user interface Voting Software Web-Designer Personal digital assistant Speech synthesis Game theory Musical ensemble
Web page Service (economics) Thread (computing) Computer file Link (knot theory) Multiplication sign Web browser Event horizon Bookmark (World Wide Web) Web 2.0 Latent heat Goodness of fit Different (Kate Ryan album) Videoconferencing Ideal (ethics) Electronic visual display Address space Physical system Task (computing) Touchscreen Information Bit Line (geometry) Cartesian coordinate system Limit (category theory) Connected space Category of being Subject indexing Web application Graphical user interface Message passing Network topology Website Right angle Game theory Quicksort Asynchronous Transfer Mode Spacetime
the army.
the easiest little flies the black but many people coming in and its original story because this is by far been my worst experience flying ever as for the first time my back at last i flew there on wednesday evening and i know many all i'd like to actually almost always only thing hand luggage and i only have had. unlike edge and a backpack and a suitcase and somehow i managed to lose my suitcase. on the way from security to the gate. because when i entered the airplane i realize they wait after my backpack where the hell it my suitcase go and so on wednesday i had to go by on thursday i have to go but honestly on wednesday i think of lies and clothes and except for this and my jeans and the shoes so everything you don't see. these new people because i didn't have anything with me kind of bad and how money is max i think we can start now is no not that many more people coming and pleased with any questions comments and feedback you have about the still to me and access to be our i work as an open source developers think men think mill we are a an.
fooled stack javascript and visual agency from australia i am not from australia and from austria which is not the same country and we used hundred ninety s. in the back end and then react and wreck native to build websites and mobile applications which is why they hired me because i take care of keystone jess which is on.
i know jess content management system which might have heard about and i was take care of elemental eli which is our reactor s. use interface library and i've got sick is for them so if you've ever heard the used in combining afterwards and i can even stick is a pretty good enough for everybody in the room. i was the creator of recall a plate which is one of the most popular weeks allocated the moment in two thousand and fourteen.
i went to his nice tiny little country called cambodia. now can produce a country you think about so little that you still haven't realized that dies in cambodia this is a. specifically i went to this tiny island called call wrong right of south coast of cambodia. this island it actually is telling us to beaches harbor a few buildings like to host cells three restaurants and that it but it's absolutely paradise on earth it's got beautiful ocean beautiful waiver really nice people food is great and the to spend i recently went there and i thought i spend maybe the.
we can bear to three days at the very next and then go on and see the rest in bahia and i ended up having to rush after eight days of being there because i had a plane from bangkok back to vienna. the coal wrong absolutely is paradise on earth. with one small downside koran gets about two hours of electricity per day.
italy power koran gets. there's no lines connecting into the mainland so the round of have a generator and out they don't want to carry that much fuel over to the island and they probably also one of the night to see what they do is stay just carry a time of the fuel over the and power generator every evening. let me rephrase that slightly koran is absolutely paralyze an f. but it only gets two hours network they sold internet koran gets because obviously if there is no power campaign intense is an island there's no mobile data either. so what happens is that everybody gets there at the evening when there's like these two hours of wife i may be russia's to restaurants games and wife and the first thing that is the sky with the hands of friends and like that with everybody and catch up and then they want to read the news but catching up on twenty four twenty two hours of news that happened all around the world. quite a bit of a fit so what they do is stay open news articles and they go and went to click a link for sensing hey that's interesting screens at the first page school speech at the second page school teacher the third page right next article it's going to the first page and it goes on and on in the end the end of with one hundred fifty o two. hundred screen shots and him and his wife i turned off again average just sits there for half an hour an hour just going like ok first first page read read read the lead screenshots next page read read read the screen shot next phase really really really read and just that's just what we do there. this is what i like to cool the lowly spinner of death is endless cycle of bubbling up and down the just never stops has anybody here never seen these people i would have been very surprised the thing is even we people in some of the richest countries the world have seen this isn't some absorbed. q a problem that some people somewhere at the other end of the world have that promise that we experience every day. every single day when i go out of my apartment and i going to stay cation want to go than i lose connectivity so early in the morning i'm really tired of reading the latest in a just get thirty grant on me and i are here that's kids it's going to take a lincoln i going to stay because unlike fact not again because every single day at nine make the same mistake right i lose. every single answer connectivity i have just drops it must be some sort of free think a guy cage i don't actually know but it's really annoying and so exciting is thing way real articles and don't read them walk to the staircase get into the staircase and then start reading because i know i was in the pressing the lincoln it's going to be gone. the thing is network coverage isn't there. not even here like having hundred percent coverage is not going to happen for a very very long time. the who the team while their creators of the offline first movement they put this great article explaining their ideas basically and as his great causing geography is non-negotiable. when you're in a towel or in a cave or in my staircase right you can say you can't tell the mountain or the building around me to just go away because i want to look at facebook it is more like you can't argue with geography and one network coverage is excellent in our country's it's not even million hundred percent there's tons of problems with network coverage. and i've actually speak about the rest of world. in reality we as web developers and you as a web developer he need to be there when you're uses need you. the web its essence is information everything we do all day long. his transfer information and information is only really useful ways there at the right place at the right time in the right form and why we've got the format it's really something like and takes or images or is invidious right and we've got the place because that's our phones around our laptops as something but the right time. it's useful knowing that my train left two hours ago. but it's a lot more useful knowing that my train is going to leave in an hour three hours ago right. and it is in the new problem this problem is has existed for quite awhile and so few years back some very smart people came together and they said hey we should change this we should give were developed as an option to sort of work around this and they created at cash which shows that the case in cash at cash was the first idea to provide developers which. you that we with a very high level with a very high level obstruction over often behavior so will allow you to do is create manifest far which is ellis a farce and he would space to find the right i want my in its original five cash i want my main thousand pounds cash i want my spouse cash i want my local cashed and then the browser will automatically go and cash. those fast write it all sounded really really good in in theory because as a web developer everything it is keeping up with a list of all the files my cash and if that's what you know the price just take care of the rest of the problem is apt cash its huge back as a something that's a quote by jacob people who used to work it langer now.
our school and it was the title of an article and on his the plan which should definitely look up if you buy the user after all about using up cash because app cash has a bunch of pitfalls that a very very weak one of the prime examples is apt cash to for for users to get a new version of the application using at cash. the manifest file has to change that means users will only get the new version of your application when the least of files you want to cash has changed even get a new version of people of your application when the files themselves as changed right abkhaz doesn't care about that the only thing he cares about his has the manifest housing. just how much sense does that make it now also invited in cash is a hard problem in science right is not an easy thing to do but that's really weird way to do it and you can work around it buying things like version numbers or dates into your abkhaz manifest far and the comment but you have to be aware that it happens otherwise you end the just push. up new version of the application and uses to still reporting the same bugs you just fix because well they still have the old version of the application. that's why very recently a few months ago firefox when and said. forget this this with that this was not a good idea it worked for a very simple use cases but it doesn't work for many of them which didn't appreciate it also is a bunch of security issues and stuff then chrome say actually they just disabled that we should probably do that through and said they now removing application insecurities and they're probably going to be. did we soon entirely. a big factor be behind this deprecation has been his new spec call service work which the same guy who wrote the and cash to buy article chargeable with a bunch of other people wrote and released and seven implement an increment bunch of other prizes. the idea behind service workers is that it allows as web developers to specify how we want our application to behave when it's of line we no longer rely on an age old specification telling us how it's going to happen we can do it on our own and that fundamentally makes a lot more sense because if you think about it. the of cash behaviour might work for something like a new site where you can cash like you know the common styles and like maybe some continents and images and that's it but real time came real time online game imagine if a cache of the assets for your real time online game in these offline opens the game to game loads and then this and then just nothing happens they just move. iran is like nothing happens that's the worst experience ever lets western not having connectivity with service workable what we can do is we can go in and say we can tell the zinger interface a user your offline the game doesn't work when one year of line it's a real time game of a story right just doesn't work but we can still give you access to the leaderboard. we can still be easy access to your profile we can still give you access to all the sort of static things that we've cash previously that means that even when some men country halfway around the world a real time gay meter you can still compare your school with other people right. now that's all very nice and dandy but was actually look like in real life so this is the behaviour we going to build we have our browse and we have a seven. and the browser as it was the use and to some sort of your elder brother goes to seven days a week even fossella goes us are here they are and sends them over right there's a bunch of steps in between that and worry about and we don't care and more the president this is stars passing those files and as it passes javascript files it passes the what i call my. decline navigated says work at the register right now as the mall ok they want me to slow service worker probably a good idea let's do that and goes and installs service working and the thing is from this point on woods what this says what it does is entirely up to our country. all this doesn't mention specification this is a job as get far that is run in the background it's wet work if you know what that is events in the background of your browsing just as things and said his work as sort of special web working in any sense that they get access to the ice that went like a stone so we have access to things like cash and we have access to certain events that happened what i'm going. joey is and says we're going to bust the following right we create cash and we put in the files from the website to the cash we stand the behavior them the next time these comes around going to catch to request a website. that's what service work of those who can check with the cash if we have to fast that request and if we do sent them back from the cash. the nice thing about that is it's really easy to do am now if i just rico you just cannot know what i mean some may little demo for n.b.c. are slow to this what the demo looks like this without so his work is without anything right which is open a page and chose a nice little give our groceries like enhanced is the first single day.
who is in our main does could file actually reduces there is work forget about all the compatibility checked everything important part is this navigate to the service work of the richest we call this function with the path to just could fall is not just navigators there's a good read the reduced in the process does some magic and it just happens again it's under our control. take a look at what that says like a fine actually looks like right. the first things we have been there is a cash name because you can have multiple caches but we just need one so on just how voting and some years we want to cash which again you could dynamically generated something it's a demo doesn't really matter. this this was just getting interesting right we have to install events and to think about the cell is like a prize is really really fall through it absolutely make sense from my perspective right to have these events and you can listen to them and respond to events that happened in this case we have an insult event which happens when you call never get to the tears work at the riches to please don't ask me why. but the riches to prevent i don't know is insolvent right medical navigators there is one of the riches to install event is called within doing their we open the cash with her name and at all of you as we want to cash to our cash for the next time the user comes around we can send them back now this is like. and so five lines of code six lines of code it's beautiful and it does a bunch of stuff in the background but it's really usable from a he went from a web developers perspective. always it is not everything we have to do because right now with cash to fars but we don't actually do anything when he's open to the page again which isn't very useful because the much taking away space and uses hard drives right so we're going to do is we will listen to fetch event. this is where every single request of the user go through everything request these it does from from the application website goes through this event. that sounds strange familia that's like him and the military. which actually does which is why service workers can only be just an unsecure regions they are really really powerful but in the wrong hands they can really mess up everything so it says workers only in a g.p.s. which is a caveat but you know it makes sense because you don't want to have a man in the middle attack from somebody somewhere you know don't have that. so what we do in the french event we respond to the event with a match from the cash. so he takes the cash as files for the specific requests to go and if we do any of them we simply return with the cash as cash the user and these immediately sees the page. that it will but if we don't have a response which you might happen because there is a church requests and all sorts of stuff what we can then do is clone the request now a weeklong the request why don't we just reuse it requested responses a read once only so we can actually use it again so we have to clone it and then with this. which is basically just fetching the exact same request these interested again because we don't have enough cash we only have to clone it because again it's really want someone is really was only then we get a response from the from the remote seven back right and it's an era we don't really like cash it like this all of you don't want to do that because he said was temporarily down any use it. because the page and season and the cast that the next ten years ago as a page is going to get in there as well even those seven might be up as making things which we turn that to dig to use of directly. so if we do have a good response what we do is we clone the response again because we just read it and you can only be good ones. as we know we have the radio here is where we ready because we open the cash and then put the request with the response we got back from sell into the cash so next time the exact same request comes in we can simply returning from the cash and it works and we turn that to the user. and these tickets the page so in west case scenario if you don't have to request save really what happens is we ran through about ten lines of childhood killed and maybe some on the line browser stuff but it's not going to make any loading difference if we have to request cash it's basically going to be instantaneous let me show you so is the same exact app and i'm going to add.
plain old because we don't have any network connectivity i open the app and surprisingly it loads. now just to show you that we really of land and doing is cheating and trying to open of the another page and you'll see the chrome you know dinosaur game and we are really and truly offline there's no in the network connection there. you can play dinosaur game if you want to and if you didn't know this game it's brilliant but every on the offline just click the space by it works and the point is we can go back to the page and refresh as often as we want right and it just works that's just the. these demos on land but always good to the relatives down there you can just with he didn't try itself if you have an android phone and chrome an. there's a great resource by matilda could sell is like a cookbook and says look at the r s and has the sort of recipes ranging from really easy way cities like the cashing when i showed you all the way to really complicated ones like requested for where they use says like in said all requests and then record them in a queue. and if the uses of line what they do is to return a fake response pretending they're online so you can ultimately up a year you lie and you have to show these a a user we tried to send it is in a queue it's not the same to it but as soon as you go back on line we can sink with seven that's exactly what they do in the service work as soon as the music it's back on line. the flash at the q. replaying the request an exact same over the they came in basically sinking the use of state to sell this is a really nice these experiences a bit more complicated than example to chile which while want to go through it but it's beautiful like it's really really good. there's one slight problem with service like this as too slight problem is one of them is the age fifty s. thing right only and secure regions second one is as support which isn't very was at the moment it gets better we look at it from these related perspective. and one important thing i want to point out is this present their on the very right you see browse for android who in here is never heard of you see browser for android. that's about half the audience i think so you see browser friend rights in europe for some reason america most web developers haven't heard of it it's freaking massive everywhere else. as you can see on this judge this is from can i use really up to date as they to write. you see but as a friend dr is used more than into explore all of us combined. if you have no idea where easy browser is an android phone founded in test websites on it for global internet explorer take the prize and you see browser because a lot more people use it is ridiculous and anyhow so that story i was a slight side says like his are not yet have supported everywhere but since at cash deprecating you don't really haven't. the option. thing is we're not really done it because the real problem is the web is sort of their with the tele better between web and applications right ever since the absolute came out later that occasion ever since the absolute came out so it's been this when the levees player and then no the apps better and then no the web is better so can we do some more like now we have offline can be. to even better. and obviously i would be saying this if we can't quite so will manifest file this has absolutely nothing to do that cash right this is the so-called i think it's the real name is web at manifest but i don't think anybody really knows just called manifests just remember that so in in ice many opening pages of on in the fiery on ice. since very a reversion to violence because steve jobs thought that would win again steps which have painted in happen because he's made the absolute no idea what that was you can click at the very bottom eleven i wasn't as you can try to laugh which include at home screen and can add to a website to home screen just as if it was in its application with a fast like. in and sort of some in your title as it takes below it. now and we didn't have the money left behind so since chrome thirty one and ride the you can do the same thing you can add websites to the home screen is going to do the exact same thing. but then google thought well i mean this is nigel but really we can provide the developers will be little bit more power what happens when you when you add there's the websites to the home screen this is comfy. thirty nine i think of forty and they have is manifest thing which allows you to define how your application should behave when it's added to the home screen. take a look at what that looks like so is our ishmael file that might stand a shelf are reassured and this is the line i want to point out the speeches sailing creation it was manifest and then specify nature of to jason fall and that jason fell again is entirely now control what happens in their we can choose in our own. i concede slink relation manifest so the names of is manifest i have no idea why because it's really hard to as many who i want to add a manifest to my website everything you get his act cash which is not what you want you don't want to catch right he wants i think it's called were that interest me out jason by looks like this to specify name. which is just was going to be shown the home screen we specify an array of icons which might seem a bit weird but you've got to think of how many different phones there are and how many difference between resolutions and ten cities there and she can provide multiple at cannes for different use cases right but you can provide a really big i can fool like an i phone. success places the i phone's what went wrong about something galaxy seven something really big phones but he can provide the low key small i can said might be my have less detail in the right hands for really low powered sort of cheap and i phones which wine or a i don't particularly care about office demo but you could add more i can see this.
diarrhea which has it in its a chanel the display is probably the most interesting property in this insiders a file this is this display probably sports for different values right you can say full screen standalone minimal you i will present. browsers that evil behavior if you don't have a manifest fast testified in use at and your website to their on screen what happens when they click on it just opens the link in the broader right nothing special kind of like a bookmark if you say minimal your eye in this play property what happens is that it doesn't it no longer opens in the browser its display said ms. in lieu i as a name suggests of the browser above your application it's like a separate application. so you can go back is actually something if you use a manifest while be really careful about these experiences of your of your uses because what many occasions to add this and tend to stand alone which hides the browser by completely as you see very soon so it looks like an application but then they don't have a back button inside application and seizes click a link. right and never go back because they just can't they just stuck now so if you alan manifest file be sure to check out how it actually works them just as and blindly think it is going to work because years i going to have some problems if you just to stand alone and send alone as i said is that if or or hide any browser thing it just shows the top bar with. like the wife information the time and i like that just a phone top are and if you have any hard work he chosen to and full screen. obviously doesn't kill them anymore says the tree just your website on the. and then he can sit and orientation to portray the landscape if you have like some sort of game you might want said that the landscape what is actually look like so we can now go to chrome we open the page. and then we can at home screen and the thing we see here is immediately it has to the proper an easy as little and also as the proper title that we specify where you can click on ads and go back to our home screen. i can is going to be surprisingly on our home screen but not click on it what we can seize a really nice pass screen. as soon as i do actually thickening and then boom there is a website. and the thing it is even when you're operating system tasks which are it's not like other tabula rasa it's literally behaves like a native applications right. if we combine this now with the offline behavior. this is what we get we go into airplane mode and the user's previously visited his side and added to the home screen and you can prompt them to do that. and they can open and interact with it and use the application exactly how they normally would and its application and there's absolutely no difference in right we completely of line this is where an airplane mode there's no connection here and it just works. social takeaways. don't use that cash or easy to use it varies possibly and know about the pitfalls use of his work is because they're freaking awesome and combine it with a web application manifest whatever the real name this and make your reputation work like a different location. thank you so much for having the author. you. i don't think i've ever gone through his talk so fast so if you have any questions to scream at me and i repeat them for the business yes over the u s. all. yes the cash the ice very specific to sell his work as same as the insole events and the it's just something you can only use in service like this to you sir are now so. you know. but that's so. so the question was going to set is like a wide asynchronously and same as every web like a yes you can just a bit like a background thread sort of in a certain way she can do really well everyone in their asynchronously did the cash a.p.i. is actually a synchronous the thing about the service workers in wide in why the on vary widely supported the aid is that they use promises all the p.-i's use promises. which not many doesn't support yet that's why that's the main hold back for the full address implement them because they need to implement promises first and fetch as well. the questions they hand over the. there are five has limitations and their different the browser but the same as index to be i think so it's like fifty megabytes some chrome. can come into the specifics now but in that region there are five four thousand imitations and you can look them up because obviously don't want to thank you don't use is to have suddenly no space on the phone just goes to mend the website to stanley could devise a video. other questions he said other hand. how do you invited the cash was the question am well it's entirely up to you now as long as problem ideals as you know is to have problems in the designs right invited in cash is naming things and off by one heiress. invited in cash isn't very easy and. there are a bunch of good ideas on this on a service like a cookbook site they have the you can do also said he can hash of files you can you know you can have a file with the least the fastest like the abkhaz manifest it really depends on what help how you application the haitian how you want updated to which is him always good because that means every became can do exactly what it needs on the other hand. is bad because now we need to do it but the a everything is up and down sides. and the other questions. unseen hands thanks have a great day for.