Build a Simple PWA based on Basic JavaScript using Google's Workbox

everyone Gary Simon of course @ro so today we're going to create a very simple app based on vanilla JavaScript which is just plain old JavaScript without the help of angular react or a view or anything like that and that way it's gonna really help solidify what a progressive app is in its most simple form all right so we're going to use something called work box here from Google and it's a JavaScript library for adding offline support to web apps all right so this is gonna help us I really hope it's gonna help solidify exactly what a PWS PWA is and everyone's mind and so the app that we're gonna create again it's real super simple I we can double click this and here we go and this is just pulling from a public API and this will work in offline mode and it also will work in such a way that it will prompt a user on the home screen if you're using on a smart phone to add it to their home screen like a regular normal app will alright so you can actually use this app if you go to vanilla PW a corset eurocom make sure it's HTTPS go there on your phone interact with it with for at least 30 seconds which is the default behavior of PW A's for mobile smartphones to be to be able to actually show you the Add to Home screen and you'll see it'll add to your home screen and you'll be able to use it whenever and all that good stuff alright so for today we don't have a question this is going to be more like a show-and-tell so show us your first design ever so you get a URL put it in the comments maybe mention when this was your first design how long ago you tackled it and the YouTube may mark it as spam and I'll have to review it but I will approve them all right and so I'll add mine I here in the description of this YouTube video in the first comment I'll pin it and you can see my first piece of work I think 20 years ago alright so let's go ahead and get started alright guys oh man it's 11:30 p.m. I'm usually sleeping but I have this new schedule it's crazy yeah let's focus alright so what I'm going to do is we're first going to create just a folder in wherever you store your projects and I'm so I'm going to put in make to make derp directory derp and the name will be users PWA something like that and then we'll also CD into users PWA and then here we're also going to run NPM the node package manager command for NPM and NIT - why and that will just create a package JSON file in our newly created folder and - why we'll add just all the defaults so we have to sit here hindering entering enter you know through all the questions that it will pose so then I use Visual Studio code so well type in code period and that will launch this it's a free code editor from Microsoft alright I use it pretty much in all my tutorials okay so here what we're gonna first gets focused on and started America we're not gonna worry about the whole PWA stuff first we're just going to create a very simple app and it's just going to pull in data from a public API and display it and it's going to be through 100% simple pure vanilla JavaScript so what we'll do is I create some just a basic folder structure here and this is entirely up to you in terms of how you want to do it and so you'll see how it will come into play though when it comes to the pide because PWA stuff here in a second so we're gonna create a folder called build inside of build we're going to create in index dot HTML alright so then I'll worry about the contents in a second it's when you get the the file and folder structure established first and then we'll have a let's see here at js4 yeah inside of our build folder and this will have a file and this will be a pas and then also inside a build will have another folder that'll be CSS and inside it there I'll make a mean uh CSS you can make that Aptos CSS if you wanted to whatever a big deal and I think it's pretty good for now just for starters we're gonna go to index.html put in the exclamation point here in Visual Studio code that's a shorthand for just getting your basic HTML boy the boilerplate boilerplate it's very late and I had yeah a decent amount of wine so I can't talk properly and so inside of here we'll go ahead and reference that j/s file that we created so we'll put in a script and we'll put in async attribute with a source pointing to that Jas - app or forward slash one am i typing it's not - it's a /j had a pas file oh man what am i doing to myself right there that's pretty good and then we're also gonna go back control B to get the sidebar we'll go to our package JSON file and inside of here we're going to remove this test scrip and so you know whenever you run MPN run whatever is defined in this objects right here this scripts objects will wrote execute so for us we're going to put in one called serve not server just serve and it's going to run in HTTP server and I'll show you in a second you know if you don't have that how to install it and then we're gonna specify a custom port I'm gonna put one three three six and set it one three three seven just because it you said already and I don't want any issues with caching showing up and then also build and then - see for caching and - one right after that which will disable caching and this is all specific to HTTP server right here alright so that looks pretty good right there so we'll save that alright so like I said HTTP server do you have that installed or not probably not if you didn't already install it at one point in time so you know again if you run HTTP server it should work if it goes unrecognized use NPM install HTTP server - g4 global you only have to do it once and it'll be installed in your machine ok so now what we're going to focus on here is creating the actual app through vanilla JavaScript so going back to our code editor we'll go ahead and we'll refer to our index.html we're gonna have just very simple HTML here there's only going to be a few elements that we're gonna specify and so in here we're gonna have an h1 and we'll say our users and the public API that we connect to will just return like 10 different fake users with their associated and information and then we're gonna have a UI a rul unordered list with an ID of people and it'll be empty over here we're going to have also we need to link up our our CSS forward slash main CSS file right here and just so I don't forget let's head on over and there's just a few rules sets in that main CSS file and I'm just gonna paste them in all talking about them real quickly we're setting the body font family is montserrat the background is this very light gray that's the hex color code for it unordered list getting rid of list style type list items you know this is very simple stuff nothing Crazy's happening here so by the way if you check the description here in youtube there will be a github repo for this whole tutorial so you don't have to sit here type in this all out if you want to just clone it you can grab the the code yourself all right and then I will go ahead and head on over to our Patrol be a pas file all right so here we're going to create a couple functions real quickly and so the first function here use one called create node and this is going to allow us to more easily create nodes with vanilla JavaScript when we're taking the result from the API and displaying it yeah within our unordered list right here alright and so there's also a one called append that we're gonna use and it looks like this alright so let's type that out and I got this this is this these two functions from my Scotch die Oh article I forget exactly where it was but it just makes it easier a little bit when you're dealing with creating HTML elements with pure vanilla JavaScript and then also we're gonna create a constant called UL and we're gonna get element by ID people alright right here and then outside of that we'll go ahead and use what's called fetch and this will allow us to put in the API endpoint the public API and I'm just gonna use this time instead of really stupid I didn't yesterday's tutorial a Chuck Norris jokes API this one is a little bit more common this Jason placeholder type I code comm so just just returns ten different users just for testing purposes so we're going to use then we're going to take the response error function response Jason and then we'll take that data and we're going to say let people equals data and then we're going to return people dot map and this will be a function which accepts person we're going to say let the Li element that we're going to create equals create node and this is coming from this function up here and the node that we want to create is in a list item and then also we're also going to create another called span create node and this will be a span that we create we're just going to show the user name or the person's name along with their email address I think that's what I did ultimately yeah so then we're gonna say Li dot inner HTML equals person name and this is part of the array of objects that are returned this is a property and then also span internet dot HTML equals person email all right then finally we use this append function we're gonna append a lie to the UL or note to this span sorry so we basically what this is saying is we take this span element and we add it to the Li and then also we're going to a pen the Li to the UL there we go all right cool stuff we'll go ahead and save that all right and so now I if we run this and we'll go to our situation here npm run serve and that's the serve command we created in package jason so now if we go here and what's interesting is because I already developed this earlier well no this is it okay I thought it was cached but it's not what we want to do make sure is we use localhost one three three six there we go and now it's returning all the results and of course this isn't a PWA I've hit ctrl shift I here yeah the fav it I'm not worried about this part the fav icon not showing up but I will see that you know there's no issues and but however it is not a PWA at this point because we haven't added that functionality one of the ways that we know for instance that this is not a PWA is if we go here to our application in if you control shift I and then you go to application and we check on offline and we refresh it there is no internet connection because we've just turned it off here it's not going to work that's the default behavior of a non PWA website or app refresh it comes back alright so we're going to use as mentioned at the very beginning of this video work box to add PWA or a serviceworker functionality to this vanilla jas app that we've created all right so to do that we'll go ahead and get out our console again so I'm gonna ctrl C just to get out of the HTTP server and inside of the same folder we're gonna to run NPM install work box actually let me clear this there's a lot of crap up here and increase the size here just a bit there we go we're going to run NPM install or you can just use I for shorthand and we're gonna put work box - CLI - G and that will install the work box CLI and globally on our machine alright so we've installed the CLI or the command line interface from which we can now issue certain commands to transform our regular app into a PWA so the first command that we want to run is in by the way you use the work box keyword to call the CLI and so that if you just hit enter for instance it's gonna let you know all the different commands that you can issue to it so the one we want to use is the very first one which is work box wizard all right so what this will do is it's gonna take a look at your current project folder and present you with a number of questions all of which you can answer yes for this particular eye scenario so what is the root of your web app which directory do you deploy you can use the aerial arrow keys here to specify what you want by default it's going to be billed which I file types would you like to pre cash all right so you you press space to select or a to toggle all or I to inverse a selection we're going to accept all of these because we want to pre cache these meaning that CSS HTML and JavaScript these are all necessary for our app to actually function and we want them to work offline in the case that you know a user goes offline so we're gonna hit enter or would you like your service worker file to be saved billed - sasw das is fine where would you like to save these configuration options we'll say in work box config a s and we'll work in there and there we go so now what it basically did is it generated this work box config file and you know tell you you can go here for more details and and you can further customize your service worker by making changes to this config file you can check that out on your own so let's look let's open up the the editor hit control B and we're gonna see that work box config J s file so based on everything that we just answered in those prompts this is what it generated all right so I'll become familiar with this and you will revisit this in a second so now the second part is to run another command and we'll go back to our console let's clear this out and now we're gonna run a work box generate sw4 serviceworker alright so basically it has created a file called swgs in our build folder and so it creates a serviceworker based on the patterns that were defined in the work box config j/s file from the previous command the first command that we ran so now we'll see this inside of this build folder is swgs and this is a file that we will not modify and you'll see in a second in order for this to work we need to register the service worker in the index.html and that will tie everything altima together so to do that we'll go ahead and I'm going to simply paste in a little bit of JavaScript here and now I so basically what what this is doing is I onload we're registering a serviceworker in the build folder which is going to be the root of the actual app called swgs this is our serviceworker file right here alright so now we can go back to our console and we can run npm run serve alright and we'll go back here to i'm our localhost 1 3 3 6 and if we look at cache storage cache storage we see a couple things and you may have to refresh a couple times for this to work appropriately but we can now see in especially in a console we have our work box and this is coming from work Barack's a box that were pre cashing his response is responding to main dot CSS and app KS and so now if we go to application for instance and we go to service workers we'll see we have a service worker ready to go right here and if we go here - and choose offline and refresh we'll see we don't get that that it's not a 404 page but we don't we don't get that Internet you know your Internet's no longer working with the little dinosaur that you could play with your keyboard we don't have that anymore it actually loads but it doesn't load the API endpoint on that we have from the public API so in order to do that and make custom adjustments and also to load custom fonts and all that good stuff then we have to run another workbox command but first we have to generate these files hi in order for it to work properly so going back here we're going to create a new file and we're gonna call it let's see here s our C - SW here in the root alright so just like that and inside of here we're going to put in just died two lines that are of importance to get this to work properly so if I hit control B hopefully we see all of it yeah it's import scripts we're using and we're importing workbox - service worker GS right here and then and here is our custom adjustments and then and finally right here we put one more line and I'm going to copy this and paste it off-screen work box dot pre-caching precache and route so if we save this and then go back to our work box config file right here we have to add one more property and and what this is allowing us to do like I mentioned briefly is we can make a custom adjustments to the service worker otherwise I whatever is generated by default in this s wjs file it's going to be overwritten every time we go to make adjustments to it so the adjustments that we want to make will go here and so going back let's put in a comma and in this section I will we will have an SW source property and this is pointing simply to our file that we just created like that and then finally I will go ahead and rerun or not rerun but run a new command and will you need to run this command in the console every time that you make an adjustment here to your to to this file right here alright so you can console.log for instance my adjustments something like that and we'll save it and then what we can do is run our command over here work box and then it will be inject manifest all right so now if we go back to our s wjs file we'll see we now have this right here that was written right into the Service Worker file itself so that's how we make adjustments to it not by modifying this s wjs file itself but doing it through this section right here all right so now for instance if you wanted that I the public API that returned ten users to be cached we would do it right here this is also where you would cache fonts like google fonts and all that other stuff so that's what we're going to do real quickly all right so I'm referring to my original project here so what we'll want to do is we're going to if we wanted to take like an API endpoint and cache the results for our PWA then we'll say work box dot routing dot register route and we're gonna say new reg X and this is where the endpoint goes so far after I opt FGS file right here we have where we have the fetch this at the endpoint that goes right there all right and then workbox dot strategies cache first and by the way if you're really confused about what's happening right now this you know and you're new to all this that's expected but we're on gaining where I gained all this code from is from the work box documentation itself so I'm not just pulling this out of my ass or four years of JavaScript knowledge I always look at the the documentation of course and then also I let's say for instance that we wanted to have an let me just show you what I was talking about in terms of the documentation if we go to the CSS or know the index dot HTML and let's say we wanted to have a custom font that we wanted to use and let's say for instance I you know you to have this font and obviously if there was a network if you had internet connection it would would obviously load it so you have your custom font for your user interface typography and but if it goes offline or whatever there's no internet connection this would be lost even though you have it here because obviously there's no networkers so if you if you wanted to be able to cache that then what we would do we have to first you know we have this in here we'll go back to our source this is where we make our custom adjustments to the serviceworker and then I'm gonna load up real quickly all right so we're gonna go to the main documentation get started alright common recipes I think that's or where we want to go right here notice where it says google fonts we're gonna take all of that and just paste it right there alright so there's a lot of stuff happening here I'm not gonna explain it but you know again use the documentation based on your needs if you if you want your fonts to work you that are coming from you know google fonts this is exactly what you need right here for that to work alright so now that we made adjustments to this then what we can do is go back and we'll run work box and just ingest ingest the manifest inject manifest and then run npm run serve alright so now let's go back here there we go so now let's turn this back from offline to online and you know when it comes to these hi these pwace and the service workers they can be real tricky let's choose right here waiting to activate to skip waiting we're going to refresh and now you can see right here if we go to you hit control shift I you go to application we go to cache storage right here we can see that we have our Google Fonts that is being cashed also we have our main files like our CSS HTML and GS files that are being cached and then also our API which is coming from the users this is being cached so what this means is now we can go to under service workers in application we could turn offline and remember before we added this only this static stuff like our users work this didn't work but now that we're offline we can refresh and we still have the latest cached results showing up right here awesome awesome stuff all right so we're not done just yet I because here's the thing if we go to our manifest section we'll see there's no manifest detected and what that means is if you want your your PWA to be installable without having to visit an App Store beat that on iOS or Android then you have to have a manifest.json file in work box and doesn't provide you with the ability to generate that so you have to create this manifest.json file yourself or use one of several tools that will help you generate the manifest.json file for these PWA s that exist on the internet so simply if we go to google when we type in manifest jason generator you'll have multiple options here from which you can choose here's one so we have the app name we'll call this user PW a user PW a same thing short name is what gets shown on the actual home screen underneath the app icon then we have theme color and this is whatever your primary color theme that is associated with your app if you have a visual identity of sorts for it I'm just gonna use something random as you can see it'll show up on the top up here we'll choose that one background color this is for you know after a person adds it either to the desktop or mainly their phones when they click on that little icon to launch it like a native app it will show kind of like a loading slash splash screen and this is the background associated with that and in what it shows in the foreground element is the icon the app icon that's associated with it because Center just a very simple thing so the background color you know you make this whatever you want whatever it is appropriate I'll just choose something random display mode will just use standalone that's pretty typical also orientation will say any start URL application scope that's fine this part's real handy as well this is where you can upload a 512 pixel by 512 pixel square icon for your app icon I'll be lazy and just go to images to calm and type in 512 X 512 and I use this one initially I don't know I'm not planning on making an app out of this and how about that one no that's not 512 by 512 what the hell by the weight a pro tip if you really want a specific size we could say exactly 512 by 512 I don't feel like designing one this isn't a serious thing yeah actually I actually used this one in a demonstration project for this so we'll just use that let's pull this down again don't use this if you don't have the rights to use it so I'm just gonna use that one real quick just for demo purposes we'll take that and that's the file right there and then we can generate a zip all right open that up and we have our manifest.json file and images right there and that's basically that picture I just showed you with different sizes so we take both of these I'm going to move them off screen for a second go back to the code editor and control-v will right-click and reveal an explorer and what I'll do is just go into the build folder and drag those two things in there so now we have our manifest.json file alright so this is what the mean FS JSON file looks like user PA de ba or theme color this is all the stuff that it was generated from that little web-based tool that we created alright so then in order to get this working we actually have to include an element here that will link up this manifest jason and tie it to this index dot HTML file all right so there's another handy tool that will generate that stuff for you real quickly where was I all right right here so we want to copy this alright and this generator in particular does some things that the other one doesn't and vice versa one of the thing that it will do under helpful notes it'll it'll it'll it'll mention a couple things that it does and one of the main things is based on your values over here it will generate some of these meta tags for you as well that you can put in your the index.html file it already includes this by default so we don't need to include that one but when it comes to a few of these other details that you put in you can include those as well for now I'm not gonna include them though I don't think we at this point just for this demo we don't need to but we do at least need this which I just put in alright so we'll save that and pretty much nothing else has changed so let's go back here NPM run serve and we'll see if we are able to let's see here it's localhost 1 3 3 6 now I guarantee you it doesn't have the very latest version because if we if we right-click and go to view page source it's not going to have that meta up there so we're working off the old version here and so sometimes you would need to clear the storage clear cite data refresh this cache storage alright that looks good so now if we go back to page source alright so a cache storage we have to refresh there we go alright so now if we right clicking view page source will see our manifest.json file and at this point if we go to a manifest file there we go that's what we wanted we can add this to the home screen and in the case of a desktop in my case on Windows 10 we can click add user PWA we can hit create and that creates a a desktop icon and this is what shows up when you double-click on it it's kind of like an app of its own and we can see the theme color and the background color and all that stuff right here all right so that's basically it when it comes to creating you know a PDF PWA with the help of work box provided by Google and getting that stuff working all right so hopefully you found that useful so again the answer today's question which is more of a show-and-tell I linked us to your very first design ever and I'll go ahead and approve the comment if it holds it for review all right let's go ahead and I'll see you tomorrow [Music] [Music]

Channel: DesignCourse

Views: 55,590

Rating: 4.8914728 out of 5

Keywords: pwa tutorial, pwa, progressive web app, progressive web apps, progressive web apps tutorial, workbox, google workbox, workbox tutorial, google workbox tutorial, workbox pwa, workbox 3, how to make a pwa, pwa apps, vanilla js, web app manifest, service worker, service workers, service worker tutorial, manifest, pwa manifest, javascript pwa, pwa example, pwa examples

Id: PL2DG9LJoVQ

Length: 36min 22sec (2182 seconds)

Published: Wed Jul 25 2018