Creating a Progressive Web Application (PWA) - HTML, CSS & JavaScript Tutorial

hey guys hey going my name is dimon in today's video we're going to be having a look at progressive web applications okay so first off I want to show you what we're actually going to be creating in today's video so let's go inside this tab right here as we can see I've got this very basic you know web page that is technically you know supposed to be an actual application if it had actual features but as we can see here I'm in the top right I have an option to install this application and I can go ahead now and actually install that and as we can see now it's going to appear in a native window and it looks like it's supposed to behave like a regular you know native application so that is the goal of today's video now I can show you right now on screen what that looks like on other devices such as my android phone so as we can see we've got the splash screen as well as the application running inside its window with no URL bar now this application is also offline first so if an if the network is down we actually have cached some of our core static resources like HTML and CSS so the application shell is available and of course once the network comes back online and we can we can continue to use the application you know as per usual so I do want to prove this right now so I'm gonna be going inside here I'm gonna inspect this I'm gonna go inside the network tab and just disable my network connection I can now refresh and we can see the application is still working perfectly fine of course if there was actual contents the content would not load but of course the shell still remains so let's go ahead now and take a look at one more thing before getting into the main contents of this video so as we can see right here I've got a I've got a few notes on PW A's so from what I understand and what I've researched people typically are going to consider an application as being a a progressive web application if it meets the following criteria so the first three here are actual requirements for install ability so the first one here is going to be the application must run over HTTP all for development purposes it's going to also work on non-https localhost the second one here is gonna be needs to have a manifest.json file and we're going to be creating one of these in today's video and it just details how the application is going to look like by the end-user okay and the third one here is a needs to have a service worker now for install bility and the service worker must intercept fetch requests so aside from that it's also going to allow you to of course case your resources and perform various different background tasks however i'm going to be covering the most basic form of an offline first application we're going to be caching some of these static resources okay but of course this area really deserves its own video because there is so much to talk about when it comes to you know service workers and different techniques for caching and making an offline first application but like I said I'm gonna be covering the bare minimums ok and then the last point here is you know just in general your application should be responsive smooth and app like you know you want smooth animations you want everything to behave like a native application ok and the very last point here is you know a good PWA you know needs to be able to run a while offline by caching core assets once again that way it behaves like a regular native application ok so let's go inside this tab right here and begin from scratch to create what I just showed you previously ok so I'll just refresh this and now I do have a bunch of source code here that is bare minimum it does not contain any you know our manifest.json our serviceworker so I'll be leaving a link to this code right here in the description below for you to download yourself and get started but there isn't too much going on at all I've got this linked CSS stylesheet with a single rule set so very straightforward and the index dot JSP file is currently empty okay and I've also got here two two logos I've got a 192 by 192 version of my logo and I have a 512 by 512 version of my logo okay so let's get started with the first step of install ability and that is gonna be creating the manifest.json file so let's go inside here and make a new file called manifest dot JSON okay and inside here we're going to be specifying a few properties like I said earlier to describe how the app is going to look like on the end-users device so every single operating system is going to be interpreting these values differently but for the most part it's probably going to be very similar or the same so the first one here is the name property so this right here is meant to be the full name of your application so we can say right here for example decode a P and W a example we can make a second property here and this one's going to be called short name now in many cases if your application name is short enough these two can remain the same but once again it's up to the operating system how they're going to use your name maybe in things like app launches or you know on the home screen you might be using the short name but like I said it's up to the operating system okay the third one here is going to be the starts URL and this basically just defines you know how your applications going to start so where is it going to start so a mark a cm I'm going to be putting a dot that way when the user opens the application okay it's gonna go to the document root right here you know /pwa if of course you're serving from just the roots of your hostname here then it's gonna be you know just just that and nothing else so in my case I'm going to be putting a dot that way we go to PWA okay cool the third one here or sorry the fourth one is gonna be the background color and this one is going to define the background color of the actual splash screen okay so I'll show the example once again of the Android device here so as we can see look at that lighter green background so we can specify this by saying hash and then 6 d c d and then b1 okay cool the next one here is gonna be the same color and for this one this is gonna appear I believe in the status bar I think that's what it's called of your devices in the case of Windows it appears in the actual title bar like we saw earlier so for this case I'm going to be putting the 0 0 9 5 7 8 my D code green color I'll be showing you once again on the screen here what it looks like on an Android device okay cool let's now save this and then go back inside the HTML and just linked up our manifest.json so back inside here let's make a new link within the header for rel and manifests and put inside here manifest dot JSON so now if I save this and refresh the page here go inside the application tab and then go to the manifest section we can see here that we have the manifest picked up by a chrome okay so if you want to access the dev tools just press f12 or inspect element and you'll get there but as we can see here it is picked up the manifest JSON and we have the name short name the thin color things like that so that's working if you don't get this to display make sure your URLs are correct or trying to figure out why it's not displaying okay cool so now we can move on with the female properties one of them here is gonna be the display property and this one just you know tells tells the operating system how it should display the actual you application so in this case II I'm gonna be saying stand alone okay now here there are many different properties or sorry values you can put inside here for example minimal UI or full screen now stand alone is probably going to be you know your most preferred choice that's because it's going to hide the actual the actual URL bar at the top and it's going to still make your application feel native while also keeping your theme color which you specified up here so stands alone is probably the most common choice for this and probably the most preferred option okay cool we can also go down here and we can specify and icons property and this one's going to be a list of icons used by the application so here we can pass through an array I'm gonna be specifying both of my my 192 logo and my 512 logo okay so we can say here source and we can say images slash logo 192 dot PNG and we can also say down here sizes specifying the actual size of the of the image so we can say 192 by 192 it's a square image and we can say also here type and make this image of slash PNG now we can do the exact same thing for the second logo here we can just say 512 for each one of these okay and that is all for our manifesto JSON file so now let's save this and refresh once again inside here we can see that we have the logos obviously loaded up perfectly fine and of course here we get display is standalone okay now we need to do a few more things and that is first off we need to specify a theme color inside the head of the actual HTML so let's go inside here and make a new meta with a name of theme - color and the content of this is going to be hash and then zero zero nine and then five seven eight so use the same color which you used inside the manifest.json right up here we also need to specify an Apple touch icon so let's go down here and say link for touch so roll apple touch icon and make this your 192 image all your 180 image if you have one of those so we can say here images / 192 dot PNG we can now save this right here and then refresh the page go inside the the actual audits tab here and then uncheck all these options aside from a progressive web app okay generate the report in Chrome obviously and we can see it's gonna run an audits on your application so it's going to run through the manifesto JSON file and let you know if anything's wrong so as we can see right here we have different categories let's ignore these two for now as well as this one down here but as we can see the web app manifest meets the install ability requirements so we are good to move on to the serviceworker part of this video but if you see anything wrong here make sure you go inside the end try and figure out you know what needs to change in order for you to receive you know green ticks all around for each one of these dot points okay cool so now we are done with the the manifesto JSON we can move on to writing this Service Worker okay so moving on to the Service Worker that is the last step in order to make our application installable okay so let's go back inside the text editor and have a look at the index dot JSON abhi putting the following code inside here okay we're going to be saying if service worker in navigator okay so this right here just checks if service workers are supported by the web browser if they are we're going to be of course using them if not unfortunately you might want to say else and then just say something like you know application not supported or something along those lines okay so once we know how we can actually use service workers we're going to be saying right here navigator dot service of worker dot register okay and then pass through here the URL for the service worker so let's put inside here SW jeaious we have not yet created this file but we're going to be creating it very soon we can then say dot then and then here we're gonna have a registration object so we can just say registration inside here and then we can just say console.log SW registered okay then we can also just log out the registration object if you want to take a look at that now I forgot to mention that service workers are going to be using promises quite often so you want to make sure you understand promises at least at a basic level before you know trying to learn service workers I have a whole video on promises if you want to check that out and before continuing to watch this video but just make sure you understand promises before moving forward okay so this one he is going to of course say you know service worker understood if they were successful if it was not successful then we can just say catch and go inside here and say era then we can simply just say console dot log console dot log you know SWT registration that failed okay then we can just say console dot log and log outs the actual error okay um so now let's save this and refresh the page go inside the console and we can see here we get s Derby registration failed because of course we don't have the actual scripts ready just yet so let's go back inside here I'm going to be creating the swj s file so you do want to create this file right here in the roots application if you create this file inside the source directory it can only be used within that scope okay so you know for example if you want to use a service worker to case your your images for example here because the service worker would be inside this directory it can't intercept the requests for this directory so make sure you put it outside in the application root okay cool so now we have that sorted when you're inside here now in the service worker and we can say self dot add event listener I'm gonna be passing through here install okay we're then going to grab the event object and now we're gonna simply say console.log and say install okay so this right here is gonna fire off whenever the service worker is being installed okay so just keep in mind that service workers only get installed once in their life cycle okay so once you actually load this and it registers the service worker it is going to install but once you refresh it is not going to install a second time okay so let's save this right here and then refresh the page as we can see here we get SW registered we have the registration object okay and the scope is set to our PW a ok now we also here of course install now like I said if i refresh this we can see the install is now gone it did not execute this right here twice okay so it's in the install phase right here where what I actually cache our resources so like I said earlier we're going to be caching our static resources like CSS images and the index.html file ok so inside here let's catch those resources for future use now now what I mentioned also if you make any changes to your SW J's file then it needs to be reloaded so I'm going to show you right now if I was to say console.log and say install and then decode for example let's save this and then refresh the page as we can see here we get install decode right there we made it change to the serviceworker JS file now if you go inside the application tab here once again go to the service workers section we can see right here we have two service workers in this list this three three five one is the service worker that is running for our previous change before I made this change to install decode okay however this one right here this version was actually ran and only the install step I ran so we get install decode in the console it is not yet activated if you want to make sure that your fetch requests which we're going to be seeing very shortly if you want to make sure your service worker is actually running okay and activated for this page right now you need to say skip waiting so now our second service worker anything we do from this point onwards is going to be used by the application so we're going to be seeing this in action very shortly but just keep that in mind if you see any problems just make sure you go inside here and press stop waiting okay cool so now let's go back inside here and cache our resources so inside here we're going to be grabbing the event object and we're going to be saying e dot waits until and this function right here is going to take in a promise so let's go inside here and we're gonna be saying Katia's dot open okay passing through here our case name of static so we're going to be opening up a case called static if this case does not exist which currently of course it does not exist it is going to be created we can use it so we're going to be saying dot then so now we have the cash objects just like that okay so we've opened up a case called static which will contain our cached static resources okay you can of course name this whatever you want you can call it D code you can call it keyboard whatever you want but static is an appropriate name okay then we're going to be saying return cash ads all and passing through here a list of assets so we can say here as an array our dock /so of course our document root how our index.html file okay second one is gonna be outsource master dot CSS okay third one is going to be let's just do one image so images and then logo 192 dot PNG now of course in your own application these are going to change this one he is just a basic example for you to get started okay so essentially the service worker and now it's not going to be considered to be installed until this promise inside here settles okay so once everything is being cashed then the service worker is going to be installed so let's demonstrate this right now I'm gonna save this and then refresh the browser as we can see we have the old service worker the new one just came through and it was installed it is now waiting to activate this is proven if we go inside the case storage we can see we get static right here if you go inside here we'll get a list of all our resources so we can see here for the first one the HTML it's got the it's got the response so we can preview it and as the HTML same goes for the logo and the CSS so we have officially cached our resources okay so now it's time to put them to use when actually trying to retrieve each one of these resources so let's go back inside here and we're gonna be adding here a second event listener we're going to be saying the self-taught an eventlistener listen for the fetch event and this one together once again accepts the events parameter okay and for this one this is basically going to run whenever we have a fetch request okay so we can see here for example console.log we can say intercepting fetch request for then pass through here e dot request dot URL I'm obviously using the template strings here and the event object contains a request though we're just simply printing out the URL of that request okay so let's save this and then refresh the page okay once again our service worker is stayed at three three five two let's skip waiting and activate the version which intercepts our fetch requests okay let's activate that Skip waiting okay and now if i refresh we can see right here we get intercepting fetch request for CSS file the J's file the manifest our JSON and of course the logo 192 dot PNG okay and now that we've actually you know we have an event listener for the fetch request it means that the application can now be installed okay so that's obviously a benefit for having having the actual you know fetch event listener on the Service Worker so now we have intercepted the request we can now you know try to look at the cache and try to return the cached version of the resource before falling back to the network so okay let's go inside here we're gonna be saying this when are we saying e dot respond with okay this one also takes through a promise okay so here we're gonna be saying Katia's dot match and then pass through here e dot request so we're gonna be passing through the request of the actual fetch call okay and then we're going to be saying you taught them and now we're gonna have a response inside here okay so it's gonna look at the cache and try and find a matching request if it was cashed up here so the CSS file the PNG file or the index.html okay this response is gonna be you know it's gonna contain a response if not it's gonna be undefined so go inside here and we say return response or fetch and then e-dot request so right here like I said we're seeing sorry like I said we're saying if we found the response in the case from up here then we're going to return that response and be done with it there was no need to go to the network for that particular scenario otherwise if this is undefined and we don't actually have a case version of the resource then we're gonna say all and then fall back to the network to get the response so doing a regular fetch request okay so cache first if that's not there then go to the network okay so now if I save this and refresh remember to actually you know activate your serviceworker so go inside here and just skip waiting okay then refresh once again and now in the network tab we can see right here we have a few changes okay so having a look at PWA we can see right here every request comes from the serviceworker now for PW a master that CSS and what's a corner logo one hunter dot PNG for those three case two resources we can see there is no duplicate of requests that is because what's happened here for index J s for example we didn't catch this one so it's try to get it but then the serviceworker has made the actual request for the network resource we can further prove the by going offline okay then refreshing we can see first off of course the page still works okay but also how PWA has came back successfully and the master CSS has came back successfully because they were of course cached inside here application and then case storage static of course those three are right there okay so let's go back inside here now and make this once again online refresh and now we can install the application and we can see it's working perfectly fine so that what there's how to create or you know that's sort of getting started and you know giving you a foundation for creating a progressive web application thanks for watching guys and I'll see you later

Channel: dcode

Views: 100,397

Rating: 4.9546313 out of 5

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, app, application, native, electron, install, installable, manifest.json, manifest, service, worker, js, javsacript, es6, api, cache, caching, fetch, request, response, pwa, progressive, web app, browser, webmanifest

Id: WbbAPfDVqfY

Length: 27min 32sec (1652 seconds)

Published: Mon May 18 2020