 good afternoon how are you doing awesome after lunch coma hitting in so here's a quick question who has ever seen me do a talk or a presentation YouTube know great so what happens is that every time before I do a talk or a workshop or whatever I get the people to do some physical exercise now you may be wondering why is he doing this you just ate right you know we have to burn those calories number two is because I'm losing my voice already is because you know that's saying fresh body fresh mind so I want you to be 100% concentrated on what's going to happen here so in light of this try not to lose my voice please stand up and if you thought I'm joking I'm not it's going to be it's going to be nice so what I need you to do is going to be very very very simple all you need to do is lift up your arms like this okay and clap and you may sit down thank you very much so what just happened standing ovation right this is how it's done so what I do I keep on sending these images to my boss and he's like how do you do this on IT conferences I'm like just give me a pay rise and I'll tell you okay and the reason why I asked it because there are some people like I did a meet-up a second time in the same group and then when I said oh did someone see me talk before and they were like five people already like I'm like okay you know what's coming anyway progressive web apps is what we're going to talk about today and my name is Tamash I come from Hungary I lived in the UK and Brazilian other places I work as a developer evangelist at a company called Cloudinary we're going to talk about Cloudinary a little bit as well and quite recently I was very very thrilled that I got selected as a Google developer expert in web technologies so that's quite a good thing also if you believe that you would like to be a Google developer expert then come talk to me and I can refer anyone so if you are interested in that please come and talk to me so quick poll before we get started who here knows what progressive web apps are huh just theory just a bit has heard about PWAs put them together use them see them okay few of you who here has seen the service worker knows what it is service worker API okay cache API Angular PWA plugin network information API okay so everyone's going to learn quite a lot here I like that so let's take a look at the agenda now I have to admit something I had a problem problem was that when I put together this material I wanted to share so much because there's so much about progressive web apps I could talk you know for two days just about this and what I ended up doing is I created kind of two sample apps one that I'm going to show you I'm going to give you the code we're going to go through it relatively quickly and then we're going to put together a relatively complex PWAs well which will also you know take a look at the various parts and see how that works now when I ask the question who knows what the progressive web app is and who has worked with service workers before there were few of you who said you know what it is but I just realized that the majority of the people here are not that familiar with that so we're going to have a crash course on PWAs and service workers I'm going to show you a very very basic example so that you understand how a progressive web app is and what the service workers do and how a service worker enables the a PWA functionality okay and then so for those of you who already know this please bear with me I just want to make sure that everyone is on the same page so we're going to take a look at progressive web apps in general then we're going to talk about service workers then we're going to talk about this thing called Workbox.js anyone familiar with Workbox.js one okay so another 20 some people will learn something and as I said demos and then we'll do some coding as well if time permits but I'll try to speak fast so in a nutshell what is a progressive web app so there's lots of definitions but I would like you to think about a progressive web app as just a website that acts as an application and the key here is that it is a website that acts as an application because basically you can't say that every website is a progressive web app but if you enable some features for that website that may that website have some app-like behavior then you can consider that to be a progressive web app so what are those features right if you think about a native mobile application so these are applications that you install from your app store from Google Play right so you look for for an app download it on your phone that is what we call a native mobile app so those native mobile apps have these features amongst many things right offline availability so right so all the apps that you have you may not have network but you can still launch it and you could still potentially interact with it right if it's a news app you would probably see older news and when you go online then your newsfeed is going to refresh right that's that's like a normal behavior you also get notifications so you get some new notifications in the app and what progressive web applications also enable the for you to do is something called adaptive performance so we're going to take a look at a very nice example on achieving this so essentially I want you to remember this a progressive application that's the first sentence here allows a web app or a website to be accessible by anyone regardless of what device they use and where they are in the world meaning you know what speed of network they use or what their location is okay so the term progressive in the progressive web app also means that you give your users a progressive enhancement for their application meaning if someone is in a 2g network for example you definitely don't want to for example stream an HD video for them whereas if they are on a Wi-Fi then you want to show them that video okay so think about a single article let's say it's about a a sport event where you want to show a nice video of some action right if you detect that your user is on a Wi-Fi show the video if they are 2g or in a slower network then show them a picture instead or maybe show them nothing right so this is progressive enhancement as well so I think Google was the first company who come up with this sort of checklist and you know the more of these you check the the more likely that your application on your website could be considered as a progressive web app so the first one is app like it acts and feels like a native mobile app that's very simple connectivity independent again very simple stuff by the way the reason why you see these weird bullet points is because I just changed the theme for the slide in the last minute because I realized I had a dark theme and you now wouldn't be able to read anything so it's all going to be a bit weird connectivity independent works offline simple as discoverable means that you can install this and find the PWA now I'm going to link out to an interesting article but we get to that as well fresh meaning that you get you open the app and it should automatically pull for example the latest news it's always fresh if there's connection installable that you can install it onto a mobile device and we going to talk about this as well linkable that you can link to it right so if you think about applications on your mobile there's no way that you can link to a native app but because this is now a website theoretically you could link to parts of that as well progressive we talked about that re-engageable means that once it's installed your users can just get back to it as easy as possible how do they do that you will have a launcher icon in the operating system or on your mobile device and they tap it and boom your app opens responsive very straightforward thing if you are using this app on on a tablet it should have the right dimensions if you use it on a mobile phone you should have the right dimension so it's standard web development responsiveness here safe progressive web apps and especially the service worker API dictates that you must use HTTPS at all times okay so using HTTP will not work with the service worker okay so why progressive web apps there's a lot of reasons now the what I recommend you to do is take a look at the resources that you can find on Google's website after the latest IO event they've released some more use cases and case studies they have a myriad of you know use cases and what company changed from what kind of application to a progressive web app and they give you all sorts of numbers that many users that many sales which led to this and led to that but essentially what you need to remember is that for some companies they had a website and then they had a an application in Google Play for Android and for iOS right and the users didn't like that and then they said okay you know what I would just create one simple website if my user is on the on a desktop I will show that website and then I'm going to make a PWA out of the website so that if they're on the mobile I will offer the option for them to install that and then they can just keep on coming back so it's basically one code base that they have to maintain it's really easy and there are some links here that you can read on how for example Pinterest and Twitter achieved you know better performance better sales better user retention better user engagement by converting parts of their applications or the entire application to a progressive web app so what are the core technologies that enable the progressive web apps so let's start with the with the second one service workers so without the service worker you wouldn't be able to create a progressive web app and for those of you who are new to this I'm going to show you a very simple example and then you will understand why so without the service worker and without using this thing called the service worker API you are not able to create a progressive web app so that is the core to everything that is progressive web app then there's this it's not really a technology it's more like as you see a JSON file manifesto jason that contains a metadata about the progressive web app we're going to take a look at an example what that metadata is but essentially it's things like where is the icon that is going to appear once you install the app what should be the actual icon launcher text for that particular application and these are the things that you specify in that manifesto jason file then we also have the cache and the cache API right so if you think about the progressive web app one of the key pillars of that is that it allows you to work offline right in order for it to work offline it needs to store some of your assets where does it store it it will store it in the cache which you can manipulate using the cache API lighthouse is a tool again that I think it's created by Google but I'm not sure it's definitely part of the Chrome DevTools as of version 60 something it basically gives you a score value so you can run some tests and it will tell you oh you know what your progressive web app is awesome you get the score of 100 or it's quite bad you get the score of 62 and they explain to you what you need to change in your app in order to improve that that score and then quite recently they started and when I say day it's it's Google and the reason why I mentioned Google so much is not because I'm a Google developer expert is also because they are one of the big companies who are advocating progressive web apps quite a lot so they have a lot of resources and they put a lot of investment into educating people about this so quite recently they have come up with this PRPL abbreviation which they pronounce as purple which is short for push render pre-cache and lazy load and what they say is that if you tick all these boxes then you're like PWA master level 99 okay you're like the God of all PWAs but they also say that if you just tick either of these then you're also making a step forward at least having a better performing website okay so push refers to the HTTP to push thingy I don't know how that's called the push whatever do you guys know what that is okay so browser interaction 101 so what happens you have your browser you have the internet and here's a web server okay so you type in something cnn.com for example and you go out here this sends back the index file so you get the index.html and then your browser starts to parse this file right it's going to find JavaScript files and CSS files as it keeps on parsing through your HTML file and it's going to go to the server and say hey I found the CSS file can you please send it to me yes I can okay now I have it so I will add the CSS and add the styling to my site okay this is HTTP 1.1 this is how it works okay HTTP P2 push works differently with this you can sort of proactively tell the server that when you request an index file or index.html you also want to request let's say an app.css file so what happens you go to your website the server sends back index.html your browser will start to parse it it will get to the CSS state and it's going to want to make a request to the server saying hey could you send me that CSS file and that point because you have asked that file to be pushed the server has sent it even before the browser requested it right so the the actual browser is going to say you know what actually I don't need it because it's already here so it's just going to allow some there are some keywords that I could throw at you like multiplexing blah blah blah doesn't matter just better performance okay remember that render pre-cache and lazy load so so pre-caching is something similar to push which allows you to sort of pre-cache your resources and there are some techniques that allow you to kind of proactively get entire roots pre-cached and I think Google was it last year when they when they launched this machine learning based pre-caching something so you basically they learn the behavior of the users of a website and they will ahead of time believe that you will click a link and they will pre-cache assets that are required for that link and when you click on it it's going to load faster lazy loading is another interesting thing imagine a website that shows you photos right a gallery of photos and you're on your mobile device and you see three images out of 20 okay so lazy loading means that you should only load those three images because there's no need to load the other 17 because the user is not going to see that so you should lazy load it when the user starts to scroll okay so they say if you adhere to any of these or all of these then you're going to have a much better performing website and they also edit these features to their progressive web app collection of goodness whatever okay so service worker so the service worker I think the easiest way to think of it is to to think about it as a proxy that sits between your browser and the internet or the server where the site is being returned from okay and I have an animation which is probably a bit broken but never mind so the service worker itself lives inside the browser so you need to have what they call you know the modern web browser so of course we had lots of jokes before about IE 6 and 7 and 9 and whatever all the IE versions don't have it but most modern browsers including Edge of course have the service worker enabled and you can use the service worker API so normally what happens if you go out to a particular domain your request goes to the internet to the server and then the response gets sent back to the browser and then the browser parses everything but what happens when you have a service worker enabled activated and installed is that every single request and response will go through that this enables us to do whatever we want with this request and response cycle right it allows us to sort of massage the request it allows us to take some responses and put them into the cache which is already leading me to how we going to utilize the service worker and the cache API to make our website work offline okay so the service worker is the key that enables a progressive application purely because it can intercept these requests and you can do stuff with that request so the other thing that we talked about manifest file so it's a simple JSON file that contains a lot more than this but these are the key pieces of information that you in my opinion at the bare minimum should have as part of a manifest file so add to home screen information what is the name of the icon that you want on your mobile device after you've installed the app so you can specify that there where are the icons for that app what orientation should it should start in horizontal in a vertical mode background color and start up a so what page should it launch when you tap that icon so these are all things that you can specify using this manifest file and then the browsers can of course pick this up and we'll see how that works as well cache API so probably very straightforward the cache API allows us to manage the browser's cache which means that we can add assets to it we can retrieve those assets the one thing that I will point out here is that every single browser from every single vendor on every single machine so the cache size on every single machine is going to be different okay it's dependent on your disk capacity depends on what version of Chrome on what OS you are using but the point of this is that you know let's say you have a very nice looking website which is very rich in media so it's full of images and videos and you say oh I'm just going to cache everything right all the 500 megabytes of images right you can't do that you have to be very of the fact that you have a limited amount of space and there are some strategies that you can use to manage this space which I think we'll take a look at as well now caching strategies now there's more caching strategies out there I'll tell you why I chose this five there's a particular reason why I'm showing you these five caching strategies so whenever you cash a resource or whenever you create a progressive web app you need to find the appropriate caching strategy and there's these five ones let's start from bottom to up here so cash only what does that mean you make a request for something that is going to take a look inside your cash let's say you requesting app dot CSS the request is going to take a look in your cash is it there if it is it returns it if it's not boom can't find it network only is the exact opposite of this it will always go to the network to find the resource it will never go to the cash then we have cash first and network first so cash first means that you request app dot CSS it will go to the cash if it finds it in the cash it returns it to your application if it can't find it in the cash then it falls back to the network so it will try to make a network request and get that back from the network on the contrary network first works the other way around right so you request app dot CSS it will go out to the network if it can't find it or if there's no network it will fall back to the cash and then we have this very first one still while revalidate so this is an interesting one this is almost like a race between the cash and the network so the way this works is that you request app dot CSS and it's going to be a request to the cash and to the network as well if it's in the cash it's going to be returned from the cash and then the version that you've received from the network will update whatever is in the cash okay so that's why it's still while revalidate okay remember these these are going to come back and then it will all make sense why I talk about these were five strategies so word box there was one person who was familiar with word box I think word box JS is super awesome like seriously if you've ever written service worker code you may have come across situations where it just becomes way too complex to manage and there's lots of dark corners and hidden things that you know hidden traps that you can fall into so word box JS is basically a set of libraries that it's almost like a wrapper or a layer above the service worker and the caching API's so basically comparing the code using the cache API and the service worker versus writing the same piece of code in verb box JS would be the matter of 20 lines versus one it's it's really good so we're going to take a look at this it has a lot of good options it basically if you will ever create progressive web apps then use verb box JS it's really really easy to use it has a plugin based system you can write your custom plugins there's a lot of options that it can manage which would take a lot of time to figure out using all these native API's yeah it's just I'm really happy that I found it and guess who's the creator of verb box JS me yeah right no Google but but thank you although I wrote a plug-in but we'll get to that okay so progressive about so now you hopefully know what a progressive web app is or what to expect from it and you're probably thinking oh that's great but you know I use react I use angular how can I use this thing so the good news is that and this is just a very short list if you Google my favorite framework PWA I guarantee that you will find some sort of plug-in so for angular it's angular slash PWA so you need to these ng add that and then progressive web app support is going to be added to your angular app similarly this is for view nox yes is a static site generator for view that actually uses workbox.js as well so once you know how that works let's just apply all your knowledge there for react you need to add service worker or you just add workbox to your project ionic since that's based on angular that works as well polymer has PWA starter kit and as I said probably other frameworks have that as well so the good news is that the major frameworks have very good support for progressive web apps okay now we're going to talk about this thing it's a I put in concept in there because it uses one of the it's not that new a fairly new browser API called the network information API so the network information API basically anyone I think I asked that but no one said you knew it okay so what it does it tells you the connection of the user is browsing your website so basically if your users and Wi-Fi or 4g is going to return a string called 4g if they use it on a 3g is going to return 3g anything 2g edge or lower is going to return a string 2g or slow-dash 2g what this means is that you can take this information and act on it right so you could do different renderings you could do and the example that we'll see is using workbooks so you could for example render lower quality images for users who are on a 3g device versus people who use a Wi-Fi so the reason why it's a concept is because of its I would love for all the browsers to support this but at the moment I think Chrome and maybe Firefox supports it but I think the others will hopefully soon support this as well so we're going to take a look at this as well because I have some codes to show you and we're going to go through that right excited okay any questions so far I have a question like you talked about downloading the PWA but I've seen on Android some instances like Femio they have like something it's called like an instant app so I just open a VPN it's like instantly there's an instant app that's suddenly in my screen it works like an app but I don't know on the download or install that's probably at some point you installed it yes it's not just going to crawl its way into your mobile it's it's you have to that's going to be a prompt you say install this that's going to be something you know installing and then the icon will appear okay we can take a look at it later but theoretically a PWA works after well it works because it's a website so you can go to any URL you can use the website but if you want to use it as an app you would have to install it but we're going to take a look at that so where should we start so if you don't mind I will sit down for this quick pull is this text large enough it doesn't matter what it says there but it can you guys see it in the back and wide background works as well okay because I changed this last minute as well so there's there's some people are you know new to this whole PWA thing so let me find a very simple example so I did a very simple I did a talk yesterday about less technical PWA stuff for for a coding bootcamp so what I'm going to do I'm going to take that like a minified version of that talk and just show you what a PWA looks like in one second so it's work so at least for those of you haven't seen it or you don't know how to imagine this you will understand it as well okay so let me reset a few things here pretend you're not seeing this now this is not happening cool so here we have a very simple website that has an h1 element okay hopefully this is nothing too difficult so we're going to launch this website and what you will find is that when you work with this service worker so a few things I use Chrome almost exclusively when I create PWAs and I work with a service worker other browsers as I said supported but I find the Chrome DevTools and their overall support for how you can debug and and take a look at service workers to be the best okay so that's why I'm going to stick to this you can use any other browser if you want so at the moment this is our website okay so there's a reason why you see that the service worker is read that is because there's this ad.css that applies the style okay very easy to understand so far so good now the basic oops the basic premise of a progressive web app is that when I go offline is that let me remove the hi I want to get rid of the okay this is hopefully better so notice that and I probably moved this but if you open your DevTools you is that large enough for you to see in the back okay you should have that application tab somewhere okay I just moved it here because I access it a lot in my DevTools and notice it has manifest service worker storage somewhere here it has cache so we're going to use all of this because this is the place that you want to be when you create your PWA and when you test it so offline right so we want to make sure that it works offline and probably this is something that you've seen millions of times right at the moment we have a standard website we are offline nothing works okay do you know how this thing is called it's not it's not Steve off Zilla or down a sore like down it's okay it's fine but you know of the game right everyone knows the game jumpy jumpy no okay back to PWAs so probably you've seen this before right you're you don't have network your site doesn't work so what can you do to fix it well you can start working with the service worker now the service worker this is all what it takes to enable the service worker itself okay so we check whether the service worker is enabled for the browser it's probably good practice to do that because you want to make sure that you know your users don't get any errors and notice navigator that service worker register so that register is one of the methods that you can access in the service worker API which allows you to register the service worker itself and the service worker in our case is that JavaScript file okay so the service worker is just another JavaScript file that you create so what happens is that when you have this code the browser is going to download register and then activate that service worker okay so theoretically if that's correct and this is a promise based API we should see that service worker is good to go message in our console so console just refresh this site okay service worker is good to go so that means that we now have a service worker enabled activated and ready to go so if I go flying that should just work right no why because we have just registered the service worker but we haven't actually written any code for the service worker we now need to write the code for the service worker itself okay so let's ignore that's there so let's just collect all the files that make up our application and put them into an array okay so this is as I said the most simple example that you will come across probably index HTML we have an app.gs and we have an app.css these are the three pieces of the three files that make up our application so what we can do is then this so in line eight we come up with a name for a cache so that's going to be our custom cache in the browser so I just gave it the name my hyphen cache self so when you write service worker code self always refers to always refers to the service worker execution contact so that's like the this in the scope of the service worker okay so self dot and we add an event listener on install so we say when the service worker is being installed then open a cache with the name my cache open is going to either create our cache we'll see what that means in just a moment and then the real magic is cache add all files okay so it's going to create that cache and it's going to add all those files that we have specified from lines so in that array for the files does this make sense okay so let's save this refresh go back online refresh this so we have service worker is good to go but now if under the application tab I scroll down I have this section called the cache storage and if I expand that notice I have something called my cache so that is the cache that I have just created and if I click on it I see that there are these assets in that cache okay so now we have enable this cache so if I now go offline will it work no it won't why and just keep on doing it I like the down the store thing so why doesn't work we now have the service worker we are we now have these assets in the cache but we never told the browser what to do when it's offline and how to get these items from the cache right that is the last piece that we that we need to add so how do I do that so this is where the real magic happens so the way the browser works is that every time it requests a resource so it requests a CSS file a JavaScript file an index file it uses a fetch event so it goes out and fetches at the CSS fetches whatever okay so in the service worker we add an event listener for the fetch event and then the real magic happens in line 19 so what happens so in that block line 18 to what 21 it basically says take a look at the event request so the event request is going to be localhost something something slash at dot CSS if you find that at dot CSS in the cache that's the response to return it otherwise so or go and run your standard fetch event so try to go out of the network so what this is going to do is because we have we will have a match for at dot CSS at the GSN index of HTML all of those resources are going to be returned from the cache itself so actually that piece of code after the or is never going to be executed right so let's save this let's do go back online refresh hit-off line refresh oh okay okay oh I was ready for one okay and still and everything works okay so I'm offline I don't have network this thing still works and if you take a look at here in the console I'm not sure how much you can see that but basically it says request for abdoge abdoge s and the reason why you see this here is because I added that log statement in the file so now everything is being returned from the cache so let me prove something to you let's say I forget to add app dot CSS okay so I'm not adding that and here's another thing so this is a good learning moment as well every time when you work with the service worker and PWAs first of all I already made a mistake you should always test it on a private tab because having tested so many PWAs sometimes I go to local host port something and something just opens even though I'm not running anything I'm like what so you will have this very fun things going on this is the magic reset button here clear storage okay so you will use this this is going to be your best friend so if you scroll here there's this clear side data make sure that everything is checked and as you can see it's going to unregister all the active service workers it's going to clear the cache so basically it's like your big red reset everything button to normal okay and this is very useful because sometimes you will run multiple service workers and multiple ports and it just gets all very confusing you come here clear everything start from scratch okay so that's what I'm going to do now make sure everything is deleted and now okay it doesn't work so let's go back online so when we are online we get the standard functionality but when we go offline remember we now did not add f.css to the cache so when we go online we no longer get the style sheet applied we still get the content but because f.css is not in our cache there's no way that the browser can get to that so it will render whatever it can without the CSS okay so this is your most basic PWA works offline for those of you who are new to this does this make sense clear as mud okay here it's this is cache first because you go to the cache first and then you fall back to the network so whatever the name of that was any questions so far sorry what time am I finished am I finished get four or five or I doesn't know because I can but I think I don't have it here for 30 perfect so any questions no yes sorry I can't hear you yeah there was a reason for that but I forgot there's a particular reason for that which I can't remember but it could be yeah it could be to do something with how the service worker looks at the scope of your app but I'm not I'm not sure but I need to check that up and now I'll try to find it for you okay so from this you now understand how this all works but where is it you know let me show you another basic example and we will progressively go to the sort of harder examples PWA code I wasn't planning on showing all this but this is another good example so nodes server.js so this is running on locost 80 so this is a slightly more complex example let me just clear everything because God knows what I've done before so big reset but oh you see I was actually offline I just loaded something that's what I'm saying it's crazy so I'm online it will load probably the same thing but okay so this example is kind of the same but it has one extra thing added to it this is like a news website which I'm not a designer as you can tell by the wonderful this took me like a day just to make it look like this the only difference here is that this time the data that you see here is coming from an API okay so there's actually if I go to locost API slash news this is the rule data that gets parsed and displayed to you okay so this is assuming that we grabbing data from somewhere and displaying it in the application itself and oh and you will see that if we go offline this whole thing still works okay so I'm not able to refresh in a sense that I'm not able to go out to the API and get the latest data but still I can just see the data that was there when I last refresh the application when I was lost online so the way this is done is it's all in this cache thingy here so let's close this so now you will see that I have two caches I have this news cache which is again just the JavaScript file the index file and also what I want you to notice is that this looks a bit weird like slash Ajax slash Libs etc if you take a look at the service worker file itself for this particular application you will notice that you can not only cache resources that are local to your device but you can also go out to a third-party CSS file or JavaScript file and put that into your own cache as well okay so that's what I'm doing and if you look carefully there's another cache storage here called PWA news data cache which just contains such API news but if I click on that I probably need to do it this way okay what you see here is that the entire response from the API is also cached so this is what allows me to basically fetch this even though when I'm offline okay but it makes sense to put this into a different cache right because you want to make sure that your assets are different from the API why the API response inside the cache is likely to be updated more frequently than your static assets right it's not likely that the CSS file or JavaScript file is going to change every time when you go online whereas the actual response from a news API is going to get updated so this application does a few more additional things first of all it has a manifest JSON file so you can take a look at a very basic one here so name pwa news short name name and then icon which is an array of objects that specifies the icon in different sizes for when you install this app and we're going to take a look at it in just a second where the browser should look for the actual icon and on top of that we also specify the start URL so when it is installed and when you tap it on your mobile where it should stop so it's the root display standalone so this is what going to render our pwa in a separate window so it's not going to open the browser it's going to open a separate window on the device and then background and theme color you will see that in just a second and there's one more thing that this particular application does it accepts push notifications so push notifications are a bit tricky because every push notification that you have or that you want to enable must go through a third party service okay the reason for this is because imagine that you allow push notifications and then I as a developer can just spam you with whatever I want okay so it has to go through a service and that service will send out a notification to all the devices that have enabled or allowed the notifications to happen and how do I know that I have notifications enabled this is particularly in Chrome you know you click this icon and notifications is allowed so when it's asked default what happens is that you know we refresh this site and probably you've seen this before wait big magic reset button where a website does something similar to this okay this means that that website is likely to be a progressive web app and they want you to accept notifications a notification can happen on certain conditions I'm going to allow this and then fingers crossed I'm going to try to send a notification to this app using in some so what I'm going to do and the way this is done is I will send an HTTP post I'll zoom in on this sorry it's too dark maybe so I'm going to send an HTTP post with a hypothetical new article to the API slash news endpoint that I have and the way I've set up this application is that if there's a new article added the PWA should receive a push notification okay telling the user hey there's a new article that just got added so finger crossed 50% chance that this is going to work okay so I'm going to send and there we go okay so I received a notification and what I did I just put in the title and the name of the author it's now gone to the notification okay now theoretically there's a lot more that you could do I'm not refreshing the newsfeed but you could also do that automatically and there's a whole lot of things that you could do now one more thing that I want you to realize and we're not going to get into the details of that but if I open the service worker this is it right it's it's complex okay there's a lot happening here the reason why I'm showing this to you is because this is using the service worker API and it's using the cache API so it's using these native things next up we're going to take a look at the word box example and hopefully you will see that all of this is just going to be literally about 10 lines of code or maybe less okay any questions on this we're not going to talk about this web push thing there's an MPM package that one second there's an MPM package that allows you to do that pretty much out of the box it's called web-push so MPMI web-push you just get some API keys well I'll get you this code so you can see how it's done yeah could I just show you the yeah so what happens there is it's basically this bit here so lines 36 to 50 something so what oopsie sorry so what happens is that we take a look at the request URL and if it contains api slash news then we put stuff into the data cache otherwise so this is the code that you've already seen before in the very simple example that's exactly the same and then here we have casually put and we put a cloned version of the response that's how you would do it for the API I also want you to kind of not memorize it but just remember sort of how complex lines 40 to 49 look like and then I'm going to show you the work box equivalent of that which is believe it or not one single line of code yeah oh like how do you okay so how does the browser know where the manifest file is kind of yes sir I completely forgot that right here right so it's your index of HTML you have to point to the manifest file I'm sorry quite obvious but that's how it's done so one sec so every website could be made into a progressive web app how adding the service worker adding a manifest file using the cache that's it our normal no sorry the node modules here is because I have a server file and that's that's because I'm launching this from node to enable the push notifications so you wouldn't even need that if you don't need me and the other thing is click so you may have noticed this before but there's a manifest thing on their application so just where you know where the service worker thing is and where that reset button is there's manifest and it basically shows you the icons and everything so you get like a visual representation of your manifest file as well so why is this important I have a wonderful simulator here so I'm going to show this to you on iOS and then I have a Android version of this as well so you often open Safari you go to local host and so far this is you know nothing special you've seen this before so how does this become a progressive how does it become an app okay so in Safari on iOS you tag tab that whatever button that was and then you scroll a bit and notice there's this thing called add to home screen okay so when you click on that you will see some familiar things in there right you see the icon that's from the manifest file you see news that was also in the manifest file the short short name notice the local host slash that was in the manifest file as well so you hit add and notice I now have an icon right or like a launch I have it twice ignore that that's from yesterday but now I have that icon and if I look at my phone now there's no way that I could tell whether that's a native app that I installed from from the app store or whether it's a PWA that I just added to my home screen right that's the the whole point and remember in the manifest file we said stand alone whatever that option was so it will launch in a stand alone windows so when you hit this it will start a window which is not Safari although it's based on Safari that doesn't matter and then now you get this app that you can score through now I can't bring the simulator offline but it would now work offline as well so I because of the AC I can't hear anyone so two or three years ago on when this only worked on Android the user would get a pop-up saying would you like to install this on your home screen still there and do you get this on iOS yes yes okay so for this part of the room if you didn't hear the question the question was on Android you get do you want to install this thing automatically is it possible on iOS and kind of how that works I suppose so on Android that's still a thing I have an Android test mobile with me which will use very shortly and then you will see how that works two points one is that you can have a custom installer there's an event that you can listen on which is I think something like before install or some something like that so you can actually replace the mobiles native installation prompt with your own custom one and if you do that that works on iOS as well with some teeny tiny modifications so you can on an iOS device there's no automatic way of doing this so iOS will not prompt you to install something but you can programmatically put out a prompt to your users or have a button that says install and then on that it will do this automatically okay where next let's take a look at a verb box example and then we will take a look at some additional things and then we get to the big app that I I prepared for this workshop which is going to be tested for the first time so obviously because you come to a workshop without testing any of your application so I think I opened that already so just one sack so let me close all of these first this is okay let's take a look at first at a very simple verb box example so at least you know what it is and how it works and I will show you a more complex example as well that would just probably make more sense so back to our familiar application that has a simple h1 element of service worker but if we take a look at the service worker itself actually this one you will see that it is a lot simpler so what's happening here the service worker API exposes this method or is function called import scripts that you see in line number one which allows you to import any other JavaScript file into your service worker whether that's local or whether that's out on a CDN you can just grab it so work box this is this is how you use work box now it has multiple sort of ways to function you can use it via CLI to auto generate a service worker you can use it using your favorite module bundle so you can use it via webpack gulp grant etc but the point is that you know if you want to use it you have to somehow import it and this is how you do it in your service worker file you say import scripts and it's my bed they are now at version four point something so that's the kind of older version and if you import that file it exposes a verb box global so if that's available that means that work box is loaded and then notice what we have here work box dot pre-caching dot pre-cache and root so this is something where work box is doing its magic so adding that line and then generating a service worker based on this I'm going to show that to you in just a second actually let me show that to you now this is the the service worker build script very simple take service worker dot dev.js that's the file that you've seen just now generate the service worker dot gs file based on that and the most important thing I think is his global patterns so remember before we had the files array where we had index.html f.css f.js now if I would had 200 css files and javascript files I would have to have enter that manually because there's no way that you can have a regular expression using the cache API and the service worker API natively arrives verb box.js that allows you to specify global patterns and say you know what star gs css html it's going to cache all of those okay so when you run this build script it will generate a service worker file and what I want you to notice is that I kind of modified this so let me node build so this will hopefully regenerate this for us so I close this okay service worker cool so what I want you to notice is that it basically expanded the pre-cache and root array that we just put in there so what work box calls this I think it's like a placeholder and it added all the css and javascript and html files that it found in the project where we've specified this using the build script it also added ones that shouldn't be there okay I should have excluded some there's no point to have the build.js in there but ignore that for and also notice there's a revision what do you think that revision is for why would you want to have the hash of the file in there exactly so using this approach work box we'll be able to automatically figure out which files to update in your cache and which not so it will take a look at the revision number and if I modify app.js the revision is going to change therefore work box will know I need to remove that from the cache and add the new version all of this is done for you behind the scenes kind of automatically whereas if you would write this using the cache API and the service worker API we would be on a two-day workshop just on that because it's very very complex okay and when you launch this app there's one more difference which may not have been that obvious before okay so the result is going to be the same and if you look at the console and I'm actually of you look at the console there's some verb box related messages in here these messages only appear when you are working on localhost so whenever you publish your PWA and it uses verb box it will not do logging okay so it's it's intelligently knows whether it's on localhost or not it's responding to thing it shouldn't respond to anything but as I said you know reset the thingy so when the first time when you load it is just going to say it's going to say nothing okay what did I do clear I'm online maybe do it maybe do it this way oh verb box is loaded okay so it pre-caches five files now this is an important difference between what we've seen before and how verb box works and the key to understanding this is in this term pre-cache so think about this you have a website you load it for the first time the service worker is going to be installed activated and ready the next time you refresh that website that's when the service worker is going to do its job for the first time right because at the initial load it's just activated itself it wasn't there right workbooks can do pre-caching so even on the first load it can not only activate the service worker but at the same time also put things into the cache which means it eliminates that extra sort of refresh need for the application okay this is what the term pre-cache refers to so now if I go offline everything works okay so all I needed to do was add one single line of code run that build script and everything has been taken care of me in a much more I think easier way than having to type all of the same okay and now I get all this version or revision control as well out of the box so this is one thing that verb box can do but let's take this to the next level because one can close this because it can do a lot more workbooks plug-in example and normally people ask me this question and and that's a very legit question as well because so far what we've done was taken a look at the websites that were kind of they only had text right there was nothing visual about them and and usually what people ask is that's really nice what you're doing there but can you cache images okay so here's the answer our updated news website a lot more visual and a lot more I don't know visual let's just stick with visual I designed this as well so maybe this looks better than the other one I take all the credit and I've wrote all the text so just ignore that completely it's completely fake news so what are we doing here okay so this example uses again an API slash API slash news so it caches the API it caches the static assets and it caches the images as well so let's take a look at the service worker code for this and especially remember how the service worker code I think I deliberately didn't close it remember all of this to get the API news put it into the cache updated that it did right this was the first news page example okay just look at the keep on looking at this okay ugly confusing you have no idea even I don't know what's going on I wouldn't be able to write this again okay not without Stack Overflow and Google anyway and now compare this with where is my service worker file not this I I opened the wrong thing sorry I meant to open this one although they work in the same way so service worker file that's it okay word box routing register route you specify a route that you want to register it accepts regular expressions whatever you want so here I just say whenever you say slash API slash news work box dot strategies remember the slides remember the strategies that we talked about stale by revalidate cache first network first etc etc those were also methods that work box exposes for you out of the box okay so stale by revalidate and you pass in options like the name of the cache that's all what you need to do and this is now automatically going to cash the response from the API it's going to go out to the network and if it sees there's a difference between what is stored locally and what's remote it's going to update the cache this is what stale while revalidate does okay does this look more simple a bit okay so this is what I said before that using word box has been a really really good thing in my life because it's just so easy to use okay and it does a lot more we're going to get to this but before we take a look at that and I will do a demo for you so I mentioned I work at a company called cloudinary anyone heard about cloudinary before you're my man and you're my man and you're my man you all deal with my man and women of course sorry very shortly so what does cloudinary do in a nutshell we are a cloud based media management company so you take your media assets those being images videos and some other things you upload it to us and then we serve it back to you now at this point you're thinking the job books fine but what we do on top of that is image transformation image optimization the same for videos and I'm going to give you a very quick demo of this and this is also going to lead me to using the network information API and doing that adaptive image loading thing that we talked about so starting from here this is a stock image that we have so what happens you take an image you have an image somewhere on your computer you upload it to cloudinary and then you get an access URL which looks like this okay so something about cloudinary.com name of your account slash image slash upload and what's missing is of course the name of the file woman dot jpeg okay so this is a raw image this is the image that was on your computer or somewhere and you uploaded it it hasn't been modified in any way if you look at the network tab if I refresh this then we should see this so this is a jpeg image where did it go which is 570 kilobytes in size okay I want you to remember 570 all with me what's the number 570 perfect so what I'm going to do so what cloudinary allows you to do is we have a bazillion APIs from Angular to react to node to Ruby to pH careful with the extension cable which you can use but we also allow you to just directly manipulate the URL the access URL of the image and then based on that things are going to happen so I'm going to add a few the first one is Q underscore auto what do you think Q underscore auto is what is the Q in there quality exactly so excuse me so what Q auto is going to do it's going to reduce the quality of this image in a way that is not going to be visible to the human eye okay so what I want you to do is look closely to this image and what's the magic number 570 exactly it's good that you're listening so I'm going to it enter and that's going to go to our service and get a newly generated image what I want you to see or very focused on is whether you see a visual difference in the newly loaded image okay it's a very big screen so you tell me okay it's done is it the same is it blurred seriously never ever has said that before but okay let me zoom back because that's the that's the normal resolution okay so do you notice something very interesting so what was the number what is the number now okay so we already saved a lot right so 49 kilobytes without except for you we now visually modifying the image but but seriously if you take if you take a look at it it's really not that visible it's not that it's really pixelated it's barely visible but the difference in the size is really significant okay so we can do a lot better than this who here has heard about the format of WebP few of you so basically WebP is an image format that Google has came up with I don't know how many years ago which basically says they found a better algorithm to compress images and Chrome and I think maybe Firefox supports that but no other browser supported JPEG XR is another image format that Microsoft has come up with which is a better compression algorithm than JPEG and they expect I browsers to receive this format so therefore now if you want to serve the right image format for the right browser you need to have a JPEG a JPEG XR a WebP and God knows how many others right which is pardon and JPEG 2000 for Safari exactly right so it's like all very confusing now let's add F underscore auto what do you think F is for format so F auto format we make that request so what I want you to take a look at now is when I open this header is that even though see if you look here it's a JPEG image but cloudery knows that I'm using Chrome and it knows that WebP is the best compression algorithm for Chrome so it sends a WebP file back okay remember the magic number 570 let's update that magic number what was it 49 so 49 is our new magic number okay so WebP 32 okay so 32 is our new magic number so you think oh no way he's going to reduce that think again so normally when you see this image you would want to upload it to probably like a profile image kind of thing right so this is now what thousand by it's here thousand by 688 pixels in size that's way too big so let's say with 250 and height 250 this is now going to generate 250 by 250 image size went down to new magic number six kilobytes but it's not the prettiest image right very not we can fix that so let's say that we wanted to really create a thumbnail so we say crop this as a thumbnail and I'm going to add this G underscore face which is short for gravity face so we're telling our system find the face on this image and put that into the center and voila okay this is what we got and just for good measure let's add our underscore max for maximum radius and now we have our profile image 7.8 kilobytes the rounding obviously increases the size a bit but we went from 572 what did I say 8 kilobytes which is very big savings right there also the point of this is sometimes I see developers taking an image and applying CSS to it to reduce the size and do all sorts of things that's bad practice why is it but practice because you're still downloading the thousand by 688 pixel image which is 570 kilobytes which is not that bad in you know theoretically but imagine times 20 okay so you have the same images same size 20 times that's a lot whereas if you just do q o2 and f auto you reduce the size by I don't know how many percent therefore maybe downloading the 20 images altogether is going to be 570 kilobytes maybe if there's time I'm going to show you some additional things what we do with videos there's definitely let me actually show you one video example before I forget because yesterday I forgot that question is where did I put the video mp4 I think is this one so imagine that you have a sport a website this hopefully it's not going to be that loud so let's say you have a website that is about sports and you know you want to show a video obviously you know in a video size inside that article now this is this is an HD video as you can tell from the wonderful Wi-Fi connection here it's not even loading properly it's about 10 seconds in size and I don't know how many kilobytes or even megabytes large the point is is that and that this is related to somewhat to web performance and somewhat to progressive web apps as well the thing that you need to remember with regards to progressive web apps and web performance is the fact that as I said I think on the very first slide that this web app should be made available for everyone regardless on what connection they have and what device they are using therefore on an older device I think Google now has this motor or something as their test device which is a very old device and if you want to have a really good PWA you should be able to run it on that site with all on that device without a problem now there are two things that you need to remember first of all some of your users who use your site or your web app or your progressive web app may have some very old devices you should still give them a relatively good experience in using your site because otherwise they would just you know leave and never come back second thing is that not everyone has access to you know 4g and 5g and very super fast Wi-Fi networks and that leads me to two things first of all expecting someone to load this video on like a 2g connection it's never going to finish right it's never going to load second of all also if they have a 2g connection that may mean that their data plan is not endless they may have 100 megabytes per month just downloading this 50% of it is gone in like well 10 seconds right you don't want to do that to your users so one idea is so this is our video so one idea is to instead generate an image for them now in cloud and all you need to do is state at mp4 and just type in jpeg and now you have a still image which is in the this is the middle frame from the video you apply f0 to q auto to this and now you have still given a visual experience to users but they're going to download two or three kilobytes worth of an image right so this is again just making sure and remembering the experience for your users okay so they should be able to have still a visual experience regardless of what connection they use where they are and what mobile device they use okay do you want to have a break because I realize I've been speaking a lot for like an hour and a half now so let's take a quick break ten minutes works right one so that's ten minutes past half so that's what 340 the 240 we're going to resume with discussing this app really yeah man I'm sorry I stand corrected because the last time I tried it was like down the store but it's a funny little Steve the dinosaur thank you I've seen the screen so many times that the 404 speed yeah yeah I never realized there was a game hidden beneath it it was the first time you've seen it or no storage and so what this does it says cash images from in this case from Cloudinary but it could be local doesn't matter so cash images but only add 50 images to the cash no more purge on quarter error true means that if you go above 50 then delete the oldest one so you get this nice rotation so you will never go above 50 image assets inside your cash okay you can set this number to 10 25 100 remembering you know the sizes of your images and the storage that you have available but I think 50 seems to be like a good starting point so does this make sense so far you understand once you understand how work box works at the moment right how easy it is to use okay that's good yeah is it taking into account the errors when I think because we said this to true yes I think I would need to look it up in the dogs I think I've read it once that says if you magic sorry if you run out of space I think if we just start deleting it I think it's this option that sets it okay so line 52 cloudinary plug-in what does that do so as I said work box is not only good for creating or sort of abstracting away the complexity of the service worker API code but it also allows us to sort of extend or add our custom logic to it via plugins so cloudinary plug-in and so I think in this example it's sort of hard-coded in here but anyone can write a plug-in so I created this plug-in I've released it and then Google has added that to their work box documentation it's all very nice and it's there and I'm super happy about it so you can write any sort of extension and you can submit that to Google and if it's good enough they will consider it adding to the word box GS docs and they will write all sorts of nice things about you and the plug-in so what does this plug-in do so remember we talked about the network information API so network information API is available under this navigator so we say if navigator is available so the network information is available then get this thing called the effective type okay so this is what I mentioned that this network information API allows us to capture the connection speed of the user and as I said it returns a string value 4g 3g 2g or slow dash 2g also remember what I said about the service worker that acts as a proxy that sits between the inside your browser and the network and it's able to intercept your request response cycle so the combination of this knowledge allows us to do this thing here we basically look for JPEG PNG and other type of extensions we break up that particular URL then we check whether the navigation or the network information API is available in the browser for the user then we check for the connection and we say if they are on a 4g connection then use qauto what I didn't say before is that you can pass in flags so that remember qauto that's the automatic quality so good echo and low each of these is going to reduce the quality in a more aggressive fashion so qauto good I think there's a default one so that's that is going to modify the quality in a way that is not going to be that visible for you echo is going to apply a more aggressive compression algorithm and low is going to that's where you will kind of start to see some pixelation going on okay but the result is that you get a smaller image the lower or the slower the connection is okay and then we then reconstruct the URL you know joins and whatever and the key happens in line 41 right here so what we do we basically go to URL check the network information API check the connection of the user and then we reconstruct the URL and send it back as a new request right this is this should be like the light bulb moment of the service worker being able to request intercept the request do something with it and send a modified request out to the internets the big internets right so new URL will now contain either qauto good low or I forgot I work at the company I don't know what I'm talking about so one of the qauto versions is going to send that and passing you know just the original headers that came in the request so the only thing that we modify is the URL so what this allows us to do is the following let's close this now so let's take a look at this image here let me reset everything that's the best thing to do at this point clear go back to online network refresh so when this image loads where is it okay 80 come on Jacob come back 84 kilobytes okay so that is the sort of original size of our image and if you look at the URL it just I don't know how much you can read that but it there's nothing in the you are just image upload PWA and then the name of the file that's it okay so let's now go and do throttling so how do I do throttling under the network tab next to the offline checkbox you can also do throttling using the deaf tools so you can sort of emulate a 3g connection or 2g or whatever you can also add your custom ones so I'm going to say fast 3g and I'm going to refresh my application and if I now take a look at the file that got returned by you so it's 33 kilobytes as opposed to the 80 something that we had and if you take a look at the URL notice q auto echo and I didn't show you that but I also did f auto just for a good measure so basically now we injected this into the URL why because we wanted to make sure that if someone is on a 3g device they don't get you know we're saving them kilobytes here and in a 3g or a 2g connection saving you know 20 kilobytes here so we have how many background image three images say 20 kilobytes each 80 kilobytes we save someone right or you know sometimes the savings can be even bigger now this as I said is sort of a concept some browsers like chrome do support this but I think obviously other browsers will support this as well and I think this is going to be a very good way to give sort of an adaptive performance for images for your users also remember the progressive thing from PWA progressively enhanced applications the faster speed I have the better sort of experience I give to my user okay so this helps you to achieve that as well any questions on this okay what I didn't say before and I meant to so this is for those of you are new to service workers and stuff so under the network panel you see these cog wheels here so every time when you see that that means that that response was either coming back from the cash or something that has to do with a service worker okay so this is how chrome sort of denotes or or demarcates that for you so when you see that it means that this file was received or manipulated by the service worker okay so normally you wouldn't see that so in the earlier requests but if you scroll down you see that for example this the news because it was available in the cash the service worker knew of it and it returned it from there so that's just for debugging purposes okay I'm just thinking what I'm forgetting but I think we can go back to the slides because now we're going to create another PWA which is going to be well as I said it's either going to work or not but we'll see so now everyone knows about service workers caches you know about workbooks so we can create something so what I came up with is an interesting app that allows you to take selfies because why not so it's an Angular application that uses the Angular PWA plugin now interesting enough workbooks being a Google product Angular being a Google product Angular PWA does not use workbooks the reason for that is two-fold first of all workbooks was created at the same time when Angular created this PWA plug-in so there was nothing that they could have used and then there they were concerned about some caching mechanism in in workbooks and I asked the the creator of workbooks just like yesterday and the answer he gave was I should quote that he said at this point in time I cannot give any publicly available information as to whether workbooks is going to be implemented into Angular or not there you have it I think that's a yes but it's fine I think I you know workbooks is really cool so I think they go into somehow integrating to Angular then we have an interesting candidate here so anyone is familiar with firebase firestore I'm not dancing I want you to okay some of you so basically it's like it's an online real-time database thing the reason why I'm using it here is because you will see the app in a minute you take a selfie that image is going to appear in a feed and then everyone else who is opening up the app we'll see that picture appearing so it's like firestore or firebase is capable of distributing in real-time data to all the connected devices okay what's interesting is that it also works offline not the redistribution but you can still access data from firebase even though you are offline in fact I just learned I think a few days ago that the latest releases that firebase and fire store did basically enable you know there's like 100% PWA support for them so they support things like authentication even when you are offline they sync data when you go online so this really really good stuff that they do so definitely check out firebase and PWA should just Google for that we'll use cloudinary to of course store and transform those images so what should this app do should work when we are offline that's the whole point while we're here and here's an interesting point as well so what I want this application to do is even though if I'm offline I want to still able to take an image of myself because who wouldn't want to do that and then when I next go online I want the picture to be uploaded immediately okay so this is going to be something that we will add as well second time we get excited so I'm a bit worried because as I said I've only tested it locally but we will see now so let me first show you how the application looks like using this wonderful thing here so this is my test device which is a Nexus 5 which sometimes breaks because it's really really old it was a very good phone though exactly anyway you see okay so you will see what I'm doing on the phone here so I published this app somewhere I'll give you the link but this is how it looks like what you will notice is that in a few seconds or did I what let me let me do something hit the big reset button as well which you can do if you're interested on how to do this I can show on I can't do this because it's not on localhost let me load this again so basically what should happen is that I should see a notification saying that this is a PWA although I have installed this yesterday anyway so on Android sorry you see it now yeah so on Android you remember on iOS we had the the little arrow on the bottom add to home screen on Android you go at least I don't know if an old Android versions you go to this traffic light button and then you scroll and there's this thing called add to home screen and then you get something similar to what we had before right so there's a custom icon the name and some additional things so let's add that you see that it's adding oh someone the notification arrived who was asking me that who was I talking to about the notification from the news app I was talking to someone I can't find a face anyway it worked it's here doesn't matter so edit to I don't know if you can read it but it says edit to home screen we have an okay let's wait for the adverts because I'm using a free version I'm not paying for this thank you this is not the PWA okay before you that's that's not it it's just it's visor that I'm using yeah and it's as you saw at supported so I installed it self-imator is available as an application so I can now open this right so it works inside its own little window at the moment I refresh this there's nothing so let's do capture so let's do this okay I got two options we take photo use photo I will we just use this terrible photo and when we say use photo it is going to go back to the feed upload it to cloud and only apply transformation boom it's there so what happens when I now go flying okay so I kill the Wi-Fi I'm also in airplane mode so I'm not connected to the internet the applicant let's close that and now moment of truth you are offline the image should show as well okay so it warns me that I'm offline on two different locations you can't see there you go so it warns me on two different locations there was a snack bar notification that went away I probably overdone this is just trying to show you what you can do in order to tell your users that they are offline okay but I can still the point is I can still see this and use the app I can use it to the extent of taking a picture I should put a different face now okay and notice now I have used photo and upload later as opposed to just use photo because I'm offline right so I say okay this is this is good enough so let's use this since you are offline your photo will be uploaded next time you go online all these you know messages that I came up with okay got it so let's re-enable the Wi-Fi come back to the app and be patient because this is an old phone but what should happen is that at some point in time it should find that there's a JSConf network somewhere it didn't so let's help it oh hello JSConf Asia who what is the 2g is that like a really a 2g speed no I'm asking I really don't know oh is it 2 gigahertz so I should okay let's connect to that done JSConf okay so JSConf Asia connect saved great but don't okay connecting okay so quickly you can still see everything okay waiting for the network at home this worked a lot better I have to tell you retry what sorry yeah I did that connecting we see it's not it's not connecting but the other one doesn't even appear you see connected no internet wait connected no internet allow USB debugging what yes and now you can't see so it says uploading photo taken at whatever time and it will go back to the feed and you we would see that thing but this everything now just broke so you get the idea right of what's happening okay so how to do this I wanted to do like live coding with you by a thing we won't have time to do that anyway so it now just uploaded okay so now I have these two images so what I want to do is so if you want you can try this app as well I tell you one thing iOS Safari yeah don't expect magic okay it kind of works like the video feed is super laggy I don't know why you have to press play then you pause then you shrink the video then you take the snapshot and it won't work offline I'm still working on that so if you're an android by all means try this also if you're not going to take this offline you can try it on your iOS device and the address is I think I already put it somewhere here it's this one can you guys read or put it in black and bold at least I think that's the one but let me quickly track that I actually use the different version of it but hopefully that's going to work as well let me load this so let's put it here okay somewhere in the app it does say that I will delete the images that you take okay promise so feel free to try it and I'm going to delete all the data later on you're getting an error saying but now it works I think it's probably because the network is slow try it if you if you want to if you don't want to use your phone you can also use your laptop it should work on your laptops as well and what we should see if someone is brave enough to take a picture it should appear in the feed automatically on everyone's device who is connected to the website so what is enabling that is the it's firebase right oh come on who did that it's selfie meter it's selfie anyway so what enables this is it's firebase right so firebase basically as I said is like an online and I went blank was the word it's not distributed database online that it sends all the data out all the credit I don't know the word huh oh so you're trolling the system okay it's fine web so kids but there's a real-time firebase is real-time database so every connected device is basically going to see all these updates because the database receives an entry and then it pushes out the update to everyone who's looking at the site either on mobile or on web and someone is trolling my application quite badly also what I do is obviously I do that phase detection thing from cloudinary so that's why you take a picture even though your face is not in the middle it's going to generate and a thumbnail where you see your faces in the middle I chose you for demonstration purposes okay so this is the app if you try this on a mobile you can try to bring your mobile of edit to the home screen trying to bring it offline and play with it and see whether that works also one more thing so I really wanted to show this to you but I can't get back to the GS Conf Asia oh it's connecting now to GS Conf Asia yes okay so let's try to do this again visor no devices okay so let me do this USB enable USB debugging and Roy thing settings I'm doing this because I want to show you something in particular on this Android phone so just bearing me for one second till I enable this thing again build number tap it seven times okay connected visor quit okay I give up sorry I don't know why this is now not working anymore I'll show you another example so believe it or not as of I think two or three weeks ago you can run Microsoft Edge on a Chrome device as well Chrome you see I'm it's getting late on a Mac device okay so this is Microsoft Edge running on my MacBook so what happens and this is the same behavior that you would see on an Android device as well I don't know if any one of you has opened the Android device on the bottom it should have said something like add to home screen or something automatically right some of you are nodding so this is because this is a PWA Android and Chrome automatically detects that and offers you the the actual installation automatically okay if it didn't offer it to you can always tap traffic lights add to home screen so what's also very interesting is that if I open this PWA on an edge browser what should happen is that at some point in time notice that I get this plus icon that says install okay so this is in the address bar of my edge browser I can click on that and what I will get is this installation so also this the edge browser now detects that hey this is probably a PWA and it offers me to install that automatically so I can click install and what this will do it will actually give me this separate window that I can use just like an application okay so that's this is well this is what you should envision when you think about the progressive web app you go into you visit the site using the browser it acts as a website but you install it and it kind of looks and feels like an application okay so this is the core premise of this progressive web app okay so I have I can show you the okay Microsoft Edge go away I can show you the code base for the application so I have prepared two separate repositories they are well hidden here so let me make those black and bold so someone wanted someone was asking me during the break whether I am going to give access to the repositories so this the two links that you see on github are to the self-imator examples one is the starter just a standard Angular app no PWA nothing you want to take it offline it won't work final is what we should have arrived to so that's the working version I'm going to show you some bits of the code as opposed to try to code that together and I did show you some very basic service worker examples as well before and some very basic word box examples I wasn't actually prepared to show those so I will add those repositories to my slides and then you will get access to the site so you will be able to access those as well okay but for now just take a look at these I think I made them public so if someone could just quickly try that I think I just did that okay so remember the starter if you check that out you do an MP I'm installed and then you do and here's the thing yeah for the starter you can just do an ng serve if you're familiar with Angular that's going to start an HTTP server and then you can go to your browser and check that out for the final version because it uses the service worker and G serve will not work you either do and G serve dash dash prod I probably should have added this into somewhere in there so ng serve dash dash prod or you actually have to build your application which is ng build dash dash prod okay so it's either the two just remember that when you have a progressive web app and you use Angular you need to make sure that you run a production build of that so what we will do because of lack of time I'm going to explain to you the final version and just if you want you can or just you can look at my screen because I'm going to talk about this anyway just take a picture make sure that you know where that is and then later on you can come back to it and check it out well literally check it out actually okay so I'll sit down for this if you don't mind I just close it I just so that I close it so okay quick show of hands who is here familiar with Angular and everyone else is not familiar with Angular okay it's fine I will try to concentrate on the PWA bits and how this is achieved sort of agnostic to the Angular context because this context so this you know storing something in local storage uploading when you're flying could be applied to whatever else it doesn't have to be Angular so for those of you interested in Angular what you need to do and actually I prepared some steps as well but basically you do ng add at Angular slash PWA that is going to add all the files and all the support necessary for the Angular project to be able to act as a progressive web app as a next step you need to configure how the service worker works which you can do in Angular using the ng SW so the Angular service worker config JSON file and in this file I have and you know this is slightly different from what we've discussed but still follows kind of the same pattern so what we have here is an asset group app prefetch all the static assets for the application which is really just the index HTML file and all the CSS and all the JavaScript files okay we've done this but in a slightly different context using the service worker okay so this is just a config file that does that and then what we have is the second section where we specify some URLs that I want to cache so these are sort of external third party resources right so fonts what is it yeah fonts and excuse me fonts and the Cloudinary image assets right so I want to make sure that the service worker is aware of that and it can cache it now the way this Angular PWA thing works it's kind of similar to Wordbox in a sense that you specify regular expressions and an Angular is going to generate the service worker based on this config file okay so it's automatically going to generate that for you so you don't need to manually write the service worker so no for next that's the view ssg yeah okay so for nox remember for my slides it actually uses Wordbox so when you use noxed I think you just I did that before but I can't remember you type in some sort of a command it creates you a blank service worker where the first line is just going to say import script workbooks and then you add your own workbooks logic to that and as I said for react so I don't know any react developers I'm not really good I'm not that good at react don't beat me up I don't think there's a separate plug-in for it but you can just add the service worker file and register it and just get on with your life or use workbooks that's it I don't think there's a plug it's either one yeah so if it's something simple use the service work API if it's something more complex like you want to try this adaptive image loading in a react context you know you create a service worker import workbooks write your code add that to your index HTML file you know the registration script and that's that's all what you need to do for something more angular is obviously a larger framework than react it's slightly more complex so probably that's why he that's why they have this all these config options but again this is you know somewhat similar to what we've seen before okay I also created a service actually this was quite tricky so if this is going to be interesting for for those of you who are angular developers so I had an issue whereby I had used I actually forgot what I used so I'll tell you what this service is doing this service basically takes a look at the navigator dot online value so navigator dot online either returns true or false it returns true if you are online it returns false when you are offline well kind of right yeah and that's regardless of angular right so even if you're in your dev tools you just type in navigator dot online at this point it should return you true because you are online you check that offline checkbox in dev tools and it should return you false so what I do here I created this observable to actually check whether so check the change between the online and the offline state in the browser okay and this is going to be important because this enables me to do many many things right this enables me to notify you whether you are offline or or online using that red little bar on top it also allows me to say if I was offline and now I'm online I want to check local storage and if there is something in local storage I want to upload that so I just separated this logic into this service now the problem that I had and I had to take a look at there's a very good talk on angular observables by Joe I forget the guy's name he did a talk at angular something conference last year maybe earlier earlier this year where he explains how the difference observables and subjects and everything how that works in angular so that helped me a lot because what my issue was is that I have a feed component I have the capture component and then if I took my browser offline while I was at the feed component then I changed to the capture component the browser thought I'm online even though I was offline I had to refresh and that's when it updated itself and that was because I messed something up with these observables but I can't remember what it was but I know I had to create this behavior subject and that kind of solved it anyway that's only important for angular developers for everyone else what you need to remember navigator dot online if you are online readers true if you are offline readers false okay so I separated this into a service just for easy access so at the app component level I'm trying to look at the important bits here so that's quite a lot of code here but let's kind of try to pick the the most important things here so first of all notice line 29 behavior subject observable the subscribe online so I'm going to take a look at my connection service and I'm going to check whether I am online or offline so if I'm not online I show this snack bar that comes from the angular material library it's just you know a little snack bar that pops up otherwise so if I am online I check whether I have any items in my local storage okay so if I have any items in my local storage that means that someone took a picture while they were offline and I'm going to show that to you how I add that in there okay and what I do anyone not familiar with the local storage it's basically a key value pair that you can store in the browser so for me the key starts with capture at followed by an actual time stamp of when you took the picture and then I iterate through all of these in that local storage okay then I find all these images and then I take the cloudinary API here 43 so API cloud.com slash v1 my cloud name so that's too much demo image upload and what I pass in is the actual value from the local storage which is a I think it's a it's a base 64 encoded value okay so cloudinary can understand that as well to upload images doesn't have to be an actual image file okay so I then if I get a response from cloudinary I assume that the upload was successful I remove that image from the local storage there's no need to store that and then I also these lines update fire base right so I'm updating my database I'm updating my back end and I say hello there's a new entry okay and then I navigate back to the slash of my application which is which is the root so how does this look behind the scenes so I have the fire base console where I have set up a project and if I click on database what you will see here is a collection called captures and these are all the images that you have uploaded so all they have is a public ID and an uploaded timestamp okay so these are all the values that get added so every time when you upload an image a new entry gets added into this database and because this new value gets added and because how fire base works in real time it pushes that update out to all the connected devices which then you can act on as well so what is this public ID so that public ID I'm just trying to put the pieces together for you so you understand what's happening if I log it into my cloud in your account under my media library I will have to delete a lot of images now I should have put them in a folder but I didn't so what you will see is all your pictures appearing here and the public ID is just a unique reference ID to the picture itself okay so I store this value in the database so that later on I can come to cloudinary and retrieve the image also notice that the images that you see here are the raw images even though in the app you see the transformed versions of the images right you see the little rounded zoom on the face okay so public ID in fire base that references cloudinary so far so good at least I hope does this kind of make sense so far okay hopefully so capture component has the actual video and the canvas so what happens here is that you get a video I get a video feed that's from the camera and when you take a picture that image gets inputted to this canvas element so that's when you remember you took a picture and then you had a still image in place okay so this is what achieves that there's some additional logic in here using you know ng if probably does an equivalent in every other framework so we say if the stream is being displayed to capture photo and if line 17 if we are not online and if we are not displaying the stream meaning that we've just taken a picture so we showing that picture and we're offline then the button says use photo and upload latest it's just a logic to show the different buttons furthermore in capture components what should I show you what should I show you that doesn't matter you can always check how I got the actual feed from the camera but that's kind of irrelevant now what's important is the use photo okay so use photo is a method that also checks actually I did navigate or online I probably should have used my service ignore that so I check whether I'm online or not so if I'm not online meaning that you know I don't have an active network connection I basically call local story set item and I store the captured image in local storage as a key value pair where the key is capture at and the time taken and the value is the actual capture which is a data URL of the canvas element image JPEG so that's line 88 okay otherwise so else if I'm online I just call the cloud inner API I upload the image if I get a response from cloud inner saying upload was okay then I remember this capture collection that's in firebase I just add the new item to my firebase database because that new item gets edit firebase pushes that out to all the devices and you see an updated feed okay now what's interesting is the firebase integration so firebase even though it's an online real-time web socket based data store as you so even though when we're offline it still showed us some data and so even if you so I'm using Angular firestore which is the Angular firebase library I don't know how to explain that's like the if you want to use firebase with Angular use Angular fire that's what I'm trying to say and if you wouldn't have this enable persistence when you when you called when you actually add the firebase implementation we wouldn't see the images that wouldn't work okay it is only because I've added this enable persistence that enables us to see the images to see the data that comes from this online data store even when we are offline okay so this is this is key here and this enable persistence method is available in firebase as a whole so you don't need to use Angular and Angular fire for that if you just work with firebase then you have access to enable persistence regardless of where you are any questions so this is a massive app especially if you're not an Angular developer but hopefully you can still take away some things from this you can apply this to to other frameworks luckily I have a link to a very similar app that does this but uses react so yay but again the concept there is exactly say it's not using firebase there but the concept is the same local storage navigator online offline make sure that you act on the change if you come online local storage has something upload image you know same same stuff but using react and as I said you could use any other framework so besides this are there any questions on this so you have access to both the starter and both the final code which is this one feel free to have a look at this run it test it if there's any questions then you can just email me tweet to tweet me LinkedIn me whatever and just ask away would be more than happy to help the last thing that I want to talk about is lighthouse because we didn't talk about lighthouse itself so let's take our app I actually never run the lighthouse test with with this app but it's going to be interesting to see so as I said lighthouse you can use that as a CLI tool so you can just MPM install lighthouse and run it locally or you can run it via dev tools and it's under audit yes under audit and notice that you get some options here you can say you want to test a mobile or desktop so that's the desktop it can do a lot more but I'm not interested in the performance nor the best practices I just want to make sure that you know I pass the progressive web app test I'm not going to do throttling so you can also do throttling for 3g and 2g clear storage yes so run audit I don't know how long this is going to take whether this is going to work but I'm pretty confident I've added everything in order for this to be a proper PWA if not then we will check another example so what this does just for those of you not familiar with lighthouse it's too slow it's fine so what it does it has certain tests okay so by default it gives you tests for is it fast and reliable is it installable and I'm going to scroll through those what is important to remember is that this lighthouse tool is also based on plugins so you can come up with your own tests again you can submit that to Google and then they're going to either include it or not but even if they don't include it you can run lighthouse locally with your own tests so ignoring the fact that it's a very slow site installable uses HTTPS PW optimized so we get a few warnings manifest is missing a single icon we could probably fix that but we are in a very good state right we got a lot of green check marks okay so this is showing us that okay this is relatively good progressive web application okay so now what you could do of course you could take a look at this why is it loading too slow add that icon and then you will get an even better result now on all the versions of Chrome I don't know if you guys do auto updates or not you may get a different view they used to have like a score of 100 and it would say you scored 86 out of 100 for your PWA so if you see that that's an older version of lighthouse but feel free to have a look at this we also have this is still running so we can do a local audit for this this uses images so no performance no best practices so let's see how this one is going to do oh I stopped that yeah so they specified certain thresholds like for example now you see I got red warnings everywhere because it only uses HTTPS nothing else you know there's no manifest file it's not optimized there's no viewport tag so all of these things if you add all of these then they say it's a proper PWA so what I'm going to do I'll try to find this site real quick run it and then rerun the test and see if we can get some better results I wish I could know what that example was no okay so node server.js 81 81 go away audit plus okay so run this audit so I think this one has most of the things that it are required okay so start your doesn't respond okay so there's still some things that I would obviously there's no HTTPS there's no splash okay so there's probably more than I thought that we would need to fix but at least it gives you a good sense of knowing what you are missing you fix them and then you're going to be ready to ready to roll with your PWA let me also try one more thing because now I think this little thing works okay so view yay okay so what I will try to do is redirect 8081 to local host 8081 I want to show you the add to home screen thing hopefully that's going to pop up so what is it 8081 still doesn't show anyway I give up sorry there should be a little pop up sort of towards the bottom of the screen to say add to home screen but it's fine okay so last few slides so these are all links to articles some are kind of order but these are all related to the last three are very fresh so I don't know when that happened I probably should look that up but you know in Google play traditionally speaking when you looked for an app it was an Android Kotlin something app right but Google has changed that so they now allow you to submit progressive web apps and people just can search for that download it from there and it will you know you wouldn't know the difference whether you have a proper app or a progressive web app the same is true for Microsoft Store and as you saw Microsoft Edge automatically detects these PWAs as well so I showed that to you a few minutes ago iOS 13 so obviously Apple recently had this how do we call it the WWDC something conference where they announced iOS 13 what they didn't announce is that they will have a lot of improved PWA support as well this is a link to an article that discusses those changes and on Google I owe about what a month ago two months ago Google said that they now support so if you have a what do they called Chromebook pixel book that runs a Chrome OS PWAs are automatically going to be supported there so that means that you can install an app it's going to be added to your launch bar and it's going to act as a standard application so these are links some are to tweets some are to YouTube videos some are to articles that you can take a look at additional resources so I created the PWA handbook which I will now update because there's some updates that needs to go in there but if you are new to the PWA stuff that handbook walks you through of putting together that news application the first one the very ugly one okay and it walks you through the basics of the service API how to use the cache and it shows you the code samples and the end result should be that you have a fully functioning very simple but fully functioning progressive about these two links are to blog posts that go into the detail of this adaptive image loading that we kind of discussed using the network information API and stuff without workbooks and with workbooks and then this is the react stuff that I mentioned so that is a similar application which basically is a camera app it allows you take a picture and if you're offline it stores it in local storage when you go online it uploads it to cloudinary written in react are there any questions about anything that we have discussed this afternoon you will I don't know the slides are going to be distributed right at some point I'm asking the organizers but one is hiding behind the column do you know if these slides are going to be distributed probably they will and then they have to be okay I'll make sure maybe I will tweet about this as well what this design change also removed is all my Twitter handles but I'll put them back in just a second I'll make sure that you get this and I will update this with digi-tubblings as well so you have access to those as well sorry any any other questions yeah so one obvious difference and in that Google I talk I think the the Google team gave away an answer to your question they basically showcased sketch which is like this design app and they showed three screenshots one was a PWA one was working on a Mac and one was working on an iPad of some sort of something and the key what they said there was that is the same code base was exactly the same code base running on three different completely separate devices one in an app one in a browser and I think that's the key right so think about this this selfie thing that we did right so let's say you you have this angular app and now you want to have a mobile version of that so yet now you would have to you know recreate this entire new project using one of these technologies like Cordova or Ioniq or whatever with this you just say okay NG add anger PWA and you continue to work on the same code base with minimum money modifications and you will end up having the same result essentially okay that depends that depends if you again I'm just going to reference Google material here they have a lot of use cases and showcases and comparisons regarding to performance and user retention and they give you all the percentages and all the dollar values that you ever wanted and the other thing is that what do I want to say the other thing that was another thing no it's about the what was your question again let's just replay the conversation obviously there are some things that you can't access from the browser that you would be able to access from a native mobile app right I want to say an example you can use the camera you can't use so for your fingerprint readers right you can you there is now a proper I don't know what state that is in at the moment but there's this web authentication thing that has a fingerprint API which is which means that the browsers will be able to read that as well but it's in progress okay so there's lots of things again if you check that Google I or talk they have this nice sort of timeline they will also support I think that's although relevant to the pixel book that their progressive web apps if you write it on a Chromebook or pixel book they will give you native file system support plus they will have special extensions that you double click and they will open in progressive of apps so they make a lot of effort to making progressive web apps come up to par with native mobile apps so there are some things that you can't do but as the web progresses there's going to be a lot more that you can do and and that's when there's not going to be a difference between a traditional app and the pro at a web-based progressive it always going to yeah it's always going to depend on the vendor support so whether Apple is going to ever add the web authentication API with the fingerprints to Safari big question mark no one knows maybe they will maybe they want you know but then you know you may have just the news app that you want to do that doesn't need a fingerprint reader right so it's it's always going to be dependent on what you use cases okay so there's a thank you slide but I'm going to go back to the very very first one that's where you find my Twitter handle that's right there it was as I said removed from the when I changed the slides doesn't matter so feel free to contact me there if you have any questions as I said if you have questions about becoming a developer expert let me know if you have questions about cloudinary let me know before I forget I brought you stickers lots of stickers I don't know if someone was already saw this on Twitter I have oopsie cool cat okay it's a cat wearing a hat it's these are all cloudinary stickers by the way and I have dabbing unicorns that's the one that people I know that's a few more people okay so I'm going to open this feel free to take all of them because my bag was full of this so yeah any questions about anything tweet me and thank you very much for your attention