Build a PWA With Vue & Ionic 4

[Music] this video is sponsored by the ultimate freelancing bundle by studywebdevelopment.com which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an seo checklist and much more visit the link in the description and use the code brad 25 to get 25 percent off hey what's going on guys so in this video we're going to build a progressive web app using vue.js and ionic 4. so basically we're going to use a package called ionic view that allows us to use ionic 4 components within our view app so that we can have this cool mobile look and as far as functionality it's just uh basically we can look up information for a zip code so if we type in 90210 and click find it's going to give us the city the state the abbreviation the latitude and the longitude and we can clear that up and the way that we're doing this is through a third-party api called zippopotam now we're going to build the the the main functionality we also have some error checking here with a nice little ionic modal or alert here but basically we're going to build it out deploy it to firebase and then we're going to implement the progressive web app stuff and what that's going to do is create a service worker that will basically cache all of our assets and then cache any requests that we get back so any data we get from any requests should get cached for offline viewing so to give you an example if i go to uh application here and you'll see we have a manifest we have our service worker i've messed with this quite a bit but you can see our service worker right here is activated and then down here is everything that's been cached which is all the assets and then any requests that we get so these are some zip codes that i've already done so let's do 30304 and click find and you'll see that that gets added here to the list so basically this stuff will all work offline because this data has been cached so just to give you that just to show you that if i go to network and i go offline click offline this will mimic not having an internet connection so i'll just reload and you'll see the app still works because we cached all the assets and if i do let's say 90210 and click find it works because remember that that response that data has been cached if i do 30303 that works as well however if i do let's say 01910 that doesn't work notice how the screen just stayed the same that was actually a massachusetts zip code so it's not going to work for any re any response that we haven't actually gotten back and cached so that's basically how a simple progressive web app works all right and this as far as this iphone here it's just the device toolbar and chrome so this is what it looks like without it but i figured that we'd use this while we're testing and stuff because it shows what it looks like on a mobile device all right so hopefully you enjoy it let's go ahead and get started all right so we're going to start from scratch i just have my terminal open so if you're going to follow along go ahead and open your mac terminal linux terminal windows command prompt whatever it is you're using and of course you need node.js installed because we're using npm so first thing you want to do is install the view cli globally so you do npm install dash g and it's at view slash cli okay i already have installed so i'm not going to run that but that's what you want to run to get that to get the view command line utility and then once you have that installed you can just run view create and then we can name our app let's just call it zip info dash pwa and i'm going to choose the default and it's just going to set up all the basic vue.js files and folders all right so that's all set let's cd into zip info pwa and then i'm going to open up vs code with code dot and if you're using a different text editor that's fine just go ahead and open that up you can see i have all the files on the side here now i'm going to use my integrated terminal from now on so i'm going to open that up close this one up and there's a couple things we need to do first off we need to add the view router because i the ionic view router actually depends on the standard view router so let's do view add router and make sure you're in the actual project folder we're going to say yes to using history mode for the router and once that's done we're going to install the ionic view package so we're going to say npm install at ionic slash view and then there's a few things we need to do to basically just connect them together have you use that package so we can run the server so let's do npm run server and that's going to start on port 8081 and you can see we just have a default view js app nothing to do with ionic there's no ionic components or anything we need to set that stuff up so let's jump into source and then main js that's where we want to start and first thing i'm going to do is import ionic so let's say import ionic from and we're going to bring it in from ionic slash view we also want to bring in the styling so we want to bring in in quotes at ionic slash core slash css slash ionic dot bundle dot css that will give us the styling and then right here we're going to call view dot use and we just want to pass in ionic and that should be all we need to do in this file so i'm going to go ahead and save that and we can close that up next thing we're going to do is go into the router because what we want to do is use the ionic view router as opposed to the standard router so we can actually get rid of this import and let's import in curly braces ionic view router and that's going to be from at ionic slash view and then down here where we have the view dot use it's going to be ionic view router and also right here where we initialize it ionic view router and then you can proceed to add your routes now we're just we're just going to have one route so i'm going to get rid of this hole about here we don't need that we're just going to have this index route so let's save that and by the way i have the prettier extension installed with semicolons enabled so it's going to add semicolons automatically now if we go back to our application you can see it doesn't look any different what we need to do now is go to our app dot view and we need to output whatever that ionic view router outputs so basically like that how what they're doing here with the regular router we need to do with the ionic router so let's get rid of that styling we don't need that we'll get rid of everything within this div right here and we're going to wrap everything in iron dash app okay whenever you see this iron dash this is an ionic component and there's tons of them if you want to look at the documentation there's a whole bunch that mean all different types of stuff this basically we're wrapping our entire app in this but there's buttons there's there's inputs uh all types of different components and we'll be using a bunch of them now in order to output our application we need to do iron dash view dash router dash not dot okay so if i save that let it recompile real quick and then take a look we still have the same content all right that styling is gone i got rid of it we still have the content here and now we have the ability to actually use ionic components so i'm gonna go back into let's see i'm gonna open up the views folder and then home dot view we can actually delete the about dot view we don't need that we can also delete in components there's a hello world dot view that's being displayed i'm going to delete that and then in back in home dot view let's get rid of the import of hello world let's get rid of where we assigned hello world to the components and let's get rid of this stuff up here and we can start to use ionic components now in this div right here i'm going to give a class of iron-page so basically every page you create you want to wrap in a div with that class and then we can proceed to use ionic components like the header which is the you know the part at the top so we'll do header and then we can do i and dash toolbar oops toolbar and inside the toolbar we can have ion-title and i'm going to give it a title of zip info and then under the header we'll have iron dash content which is just where we put our main content and i want some padding or else it'll be right up to the edge so we're going to give it a class of iron dash padding and for now i'm just going to say my app okay so let's save that and that should build okay and if we take a look now you can see we have our header our ion header with the title and then we have the content that just has my app in it so now we need to get our components in here now just for testing i like to when i'm dealing with progressive web apps anything to do with mobile i like to use the the chrome tools device toolbar so if you click this icon right here it'll show you in a device you can choose the device i like to use the chrome around it so i have the show device frame as well so if you want to go ahead and do that you can but this is how we'll be testing the application so let's jump into back into vs code and figure out what we need to do now we're going to have three main components right so we'll have in a zip search which would be the search form we'll have the zip info which will be the info that displays and then a clear info component which will be a button to clear out whatever zip is is basically in the state okay so let's start off with the zip search component so in components i'm going to create a new file called zip search dot view and by the way the the service worker stuff the progressive web app stuff that's going to be at the end after we build the the actual functional component so let's see zip search we're going to i should have probably mentioned this earlier i would highly recommend using the veda extension here if you're using vs code if you've used vue.js with vs code you've probably used this but it's fantastic for syntax highlighting snippets it allows us to use emmet within the templates all kinds of stuff so with that extension i can actually just say scaffold and it will give me a template a script and style now we're not going to need any style we're getting all of our style from ionic so we can completely get rid of that and then in the template up here we're going to use an iron dash grid component and if you want to style things differently later on if you want to look at the components and stuff you can do that but i'm just creating a just a basic clean style and then i'm going to have a form right here we don't need an action and inside the form we're going to have an iron dash call which is a column and inside there we'll have ion dash item which is kind of like a grid item it's like a grid system and in the item i want the label and the input for the text field okay for the zip code so let's do iron dash label and we'll say zip code and underneath the label let's do an iron dash input and this is going to have quite a few properties but for now i'm just going to add a name of zip and then inside here we don't want to actually don't want to put anything inside there so underneath the iron item i'm sorry underneath the iron call let's create another iron call sometimes emmett is a little finicky with this but inside this ion call i'm going to put the submit button so it's going to be iron dash button and we want to make sure we add the type of submit and then i'm going to add a color of primary and let's just say find so that's our submit actually one more property let's add expand and set that to block so that it goes all the way across all right so let's save that uh actually down here we have to do we have to go ahead and give this a name this component a name let's say zip search and now we should be able to bring it into our home dot view so right here i'm going to import zip search from we're going to go up one level into components into zip search and then let's add that let's register that as a component here okay and we'll save and it should show it let's see what do we got here um what did i do wrong we got name home components has been registered oh i didn't embed it up here where we have my app we need to embed zip search all right so that should work let's go ahead and check it out and there we go so we have our form our input here so we can type stuff in here 90210 but obviously nothing's going to happen it's just a form that does nothing so let's figure out what we want to happen here now when we submit i want to do some checking i want to make sure that it's it's formatted as a zip code we're going to do that in this component and then what what i want to happen is for it to emit the zip code up basically into the home component and then i want to pass that into a method where we can make a request to the zippopotam api and get back the data and then what i want to do is take that data and put it into another component called zip info which will be displayed below it all right so let's work on the validation we're going to be utilizing a modal or an alert i don't know what it's called part of ionic where we get a little pop-up nice looking little pop-up that will tell us that it's not a zip code so in zip search let's let's see i don't want to start this out let's create a piece of data so right here we're going to say data which is a function and we want to return from this an object with a value called zip that's going to be empty by default all right now this value here this zip we want to basically bind to this input now usually with view we would do v dash model and then zip but when we use ionic we can't we actually can't do that and there's a couple uh resources in the docs that that explain this a little bit more but what we have to do is do colon value and set that to zip and then we also have to set at input and we're going to say input equals and then inside quotes here we're going to say zip equals and then money sign event dot target dot value so whatever is typed in so basically whatever is typed in is going to be is going to be equal to this zip value and then i'm just going to put a placeholder as well so we'll say placeholder if i can spell it right so placeholder and we'll say enter us uh zip code okay so now we have this we have this bind we bound this zip to this input and now we need to submit so in the form tag here let's do at submit and let's set this to a method called on submit actually we want to do lowercase oh so it's going to call method called on submit so we'll create that down here so underneath the data let's put in methods methods is an object and we're going to add an onsubmit method all right and this is going to take in an event parameter and then we want to just prevent the default behavior so e dot prevent default and now we should be able to get that zip by let's just console.log by doing this dot zip so whatever we type in i'm going to save that whatever we type in should then display in the console okay so if i put in you know whatever and i click find it displays in the console now i want to do our validation here so i'm going to use a regular expression i'm actually going to paste this in because i don't want to type all this out but basically we just have a variable called is valid zip and then we have a regular expression between these slashes that is a zip code it's the 5 digits and then the four digits or whatever or just the five it's just a zip code regular expression and then we're calling the test method on it and passing in this dot zip to test so this will be either true or false it'll be either a valid true you know match or false it won't match so let's do a test for a valid zip and we can do that by saying if let's actually say if not is valid zip then what do we want to do if it's not so if it's not we want to show an alert now we could put the code in here the ionic stuff but i'm just going to create another method called show alert and uh and then right here we'll do that after let's just let's do the show alert so we want to go under the on submit which ends right here and say show alert now with ionic we can do return and we can say this dot money sign ionic dot alert controller okay now this alert controller has a method called create we're going to call that we're going to pass in an object with a couple values so header for header i'm going to say enter zip code and let's do message so for message i'm going to say please enter a valid us zip code and then finally we want buttons and we're just going to have one okay button and then this actually returns a promise so we have to do a dot then here and then we'll have a parameter called a and then we just need to call the present method so a dot present like that and that should set off the alert so let's try it out so we'll head over back here and let's just put like 11 and there we go enter zip code please enter a valid us zip code and we have an ok button so if i put in 90210 that works we don't get the error if i put one extra doesn't work okay so it has to be formatted as a zip code good so we have our validation now what we want to happen if this passes which is this else right here is we want to emit the zip code that's typed in we want to emit that upwards so that we can basically catch it in home dot view and patent and run a method on it where we can make a request to the api okay and there's a few ways you could do it you could make the request in here but i want to kind of keep our home dot view as kind of like our centralized uh you know place where we make our requests and stuff so let's say this dot money sign emit and we're going to emit an identifier let's call this get zip we could call this anything and then the data i want to pass up is just the zip okay whatever's typed in and then once that's done i just want to clear the zip from the form so i'm going to just set that to nothing after actually after the show alert let's do the same thing clear that up so we'll just set that to nothing all right so that's it now we need to catch this get zip in home dot view where we have our zip search right here so for zip search we're going to put the v dash on directive and we're going to say on get zip then we want to run a method or a method called get zip info so let's create that down here so we'll put in methods which is an object and we're going to have get zip info and that's actually going to provide us with the zip code that's that was passed in because we passed it in right here okay so it's going to be available to us so let's do a quick console log and see if this actually works if it gets sent up and then this method gets called so we'll just try this out if we put in something that is not a zip code we'll get an error let's do 90210 and there we go it's console logging so that means that this method is actually getting called now this method is where we want to make our request right so i'm going to use the fetch api i'm also going to use a sync await so i'm going to label this a sync and let's get rid of this console log and let's do const res okay so our response and we're going to set this to a weight fetch because the fetch api returns a promise and then we want to put our url in here now the url i actually have a sample open right here is going to be this api dot zip upon them dot u s slash us and then the actual zip code and this is the data that it's going to give us back so let's go ahead and copy this well you guys can type it out and we'll paste that in so api zip upon them us slash us and then just replace this with the zip that's passed into the method all right now with the fetch api um this doesn't give us back the data right away we actually want to format it as json but before i do that i'm going to make sure that this isn't a 404 because there are if there are uh you know five numbers that aren't zip codes so we want to make sure that it's an actual zip code so i'm going to say if res dot status is equal to 404 then let's um let's do another show alert so we'll say this dot show alert and i'm just going to copy from zip search the show alert we have there and put that under the get zip info right here i'm just going to change the header to not valid okay now we're going to keep going here if it's if it's not a 404 then let's say we'll just we'll just set a temporary variable here to res.json oops res.json which should give us the data and then we'll console.log info just to make sure that we got it so let's try this out now if i do five ones that's not a valid zip code and you can see i get not valid so let's do something that is valid and submit oh we get a promise over here because i forgot to do a wait this res.json returns a promise so we have to do a wait there been using axios too long so let's try it again and now we get the data so take note of the format of the data we get an object with a country country abbreviation postcode and then a places array because there could be more than one however we're only dealing with the first one so we're going to get the zero index which has the place name which is the city the state the state abbreviation the latitude and longitude and i hate when apis do put a space like this in the keys but it's just something we're going to have to deal with we just have to use brackets instead of dot syntax in the template all right so we know that we can get this data now what do we want to do with it we're going to want to pass it into another component so i'm actually going to add some data to this home tome dot view file here so let's say data and let's return an object and we're going to have this info value which by default is going to be null and then what happens is once we make the request we're going to set that value this dot info to that data that comes back we can get rid of the console log okay so hopefully that makes sense now i think yeah i think that's all we have to do here because now that the data will be put into that info so now we want a component called zip info that we can pass this into so i haven't created it yet but i'm going to import it i'll create it in a second let's import zip info from dot dot slash component slash zip info and we're just going to register it here and let's embed it up here right under zip search so zip info and then we want to bind we're going to v bind info to the info that's in the data all right so as soon as that response gets back it's going to get assigned to that info and it's going to get passed into zip info so let's save that and it's going to give us an error because there is no zip info so let's create it so components will say zip info dot view so let's just scaffold out here and we don't need styling get rid of that and let's give this a name of zip info and then let's create the template so we're gonna i'm gonna use an iron card here which is like any other card like a bootstrap card it just has a border and padding now i don't want that any anything at all to show if there's nothing in info if we haven't made a request if we haven't submit the form then i don't want anything to show so i'm going to do a v if directive here and we'll say if info basically if the info prop and one thing i forgot to do is down here if we're going to pass in a prop of info we need actually need to define that so let's say props and then pass in info okay so we'll say if info then let's see we have a card and then we're going to have a card header so iron card header when you're using ionic components you tend there tends to be a lot of markup so in here we can have a subtitle and a title so let's do iron dash card dash subtitle and i'm going to put the post code here so if we look at the response let's just look at this here we have post space code now since it's a space in the key we have to do it like this normally we could do like what is it info dot and if it was all if it was all one word like that we could do it like that but it's not so we're gonna do info brackets and then in here post space code okay and then under that we'll do an iron dash title all right yeah our iron card title fixed it for me no not subtitle title like that and in here i want to put the place name or the city now that is actually in the array of places okay it's going to be the first value in places and it has a key of place name so keep that in mind so we're going to do info and then oops we have to do brackets and it's going to be in the places array it's going to be the zero index and it's going to have a key of place name all right now i'm going to save this and i want to see if this actually works so we have we already embedded it here we're passing in info which by default is null so if we look at our app we shouldn't see anything right now let me see what's what are these errors okay so those went away so if we do 90210 and fine there we go we get our our zip info component which has the the zip code and the city now we want to add some other stuff here so we can continue to build on to it but we know that it's working so back in zip info let's go under the header still within the card and let's do iron dash card dash content and in here i'm going to do an iron list which is like an unordered list and we can do an iron dash item and in the item let's do a label and i'm going to do a strong tag here and say state colon and then underneath that i want the state so i'm going to put in oops put in my double curly braces and from info we want to get from the places array zero index and then we want the state okay and then i'm gonna put next to it a set of parentheses with the state abbreviation so we can do that let's just copy this whole thing we just did and put it in the parentheses and just change this to state abbreviation okay and then underneath that we'll do the latitude and longitude and we're going to put those in items as well so i'm just going to copy this item and let's do one and two and this one will be latitude get rid of this and latitude is also in the places array so we just want to say latitude and then let's do the same with longitude and get rid of this longitude okay so that should do it let's save it let's take a look so if we do 90210 find there we go so we have our card we have our city our heading header our list with all the data that we need good if we do let's say 30302 we get atlanta if we do something that doesn't exist we get an error we're going to get this over here as well but you can see in the ui we get that pop up now i want to wait to clear this from from the state from that info value so we're going to have another component let's call this we'll call it clear info dot view so clear info dot view this is going to be pretty simple we're going to let's scaffold and let's see we don't need styling and in our script here let's add the name which is clear info and we're actually going to pass in a prop of info into this as well and then in our template here let's have a button an iron dash button and we'll just say clear and there's a few attributes we need to add on to this button so let's do uh type so type actually no we don't need to type let's do color and we're going to make it light let's do expand and set that to block so it goes all the way across and then i only want this to show if there's info if info is null no need to show this so let's do a v if and set that to info okay that's why we're passing in info and then we'll have a click and all we want the click to do is emit an event so we're gonna do money sign emit and let's call this clear dash info and that's it so now let's go back to our home dot view and we're going to bring in that component so let's just copy this down we'll bring in clear info okay and let's register this here and what else we're gonna uh embed it up here so let's do clear info now what we want to pass in here is for one v bind info because remember it takes in that as a prop so we're going to say vbind colon info equals info and then remember we're emitting that clear info event so we want to say v on clear info and when that happens we're going to call a method called clear info all right so let's create that method down here which is going to be very very simple i'm going to put it between the get zip info and show alert so clear info make sure you put a comma and all we're doing here is setting this dot info back to null that's it everything else will be reactive to that so let's save and let's go back okay clear that up let's put in 90210 find and now you can see the clear button is displayed because something is in info if i click clear it clears it back up all right so our main functionality is complete it's a very simple application it's it's a handy application if you need to know what you know what city a zip code belongs to you could build on to it and add the reverse as well if you want to put a city in and get the zip code or zip codes you could do that as well but now we're going to make this progressive and in order to do that in order to add a service worker and all that and and actually test it we need to deploy it and we're going to use firebase for that so i'm going to go to firebase and you can use firebase for free there's a free tier i think it's the spark tier but i'm going to go to my console here so obviously you need an account which i don't think you need to sign up for a specific firebase account i think you just need a google account so i'm going to add a project and let's call this we'll call this zip finder i guess it's going to be zip finder and then this which is fine and then we'll just accept here i think you can create it from the firebase tools cli but i'm just going to do it here and we're not actually using like the database or authentication or anything like that from firebase or we're purely using it for hosting here because it's an easy option so let's say continue and it gives us https which we need for a progressive web app so we have our project created now we need to install the the tools the firebase tools so let's go back to our terminal here i'm going to just get out of my server for a second and let's do npm install firebase actually sudo here since i'm on a mac so sudo npm install firebase dash tools and we want to do dash g for global i actually don't remember if i have this on this particular machine all right so firebase tools are now installed so i'm going to do firebase login and looks like i'm already logged in so let's do a firebase if you're not then just go ahead and i think it opens chrome and you just select your account so let's do firebase list and this should list out the credentials were incorrect all right so if you get this then just do firebase log out and then log back in firebase login and i'm not going to allow collection of data okay so now i choose an account i'm going to choose this tech guy info and click allow okay so login is successful so we're now logged in through firebase tools as you can see and now we should be able to do firebase list and it should show our projects okay so it doesn't show my new project was i not logged in as the correct i wasn't i wasn't logged in as the correct person all right so i'm going to log back out sorry about this guys i'm going to log back out and then log back in with a different account the one that i actually used okay so now firebase list and now i have that zip finder okay so that's what i want to use now next thing we want to do is run firebase init and it's going to ask us the features we want to use from firebase date like database firestore cloud functions what we want is just hosting so i'm going to click the space bar for hosting and that's it and then select the default file for firebase project for this directory so we're going to go to i'm going to go to my zip finder now it's going to ask what we want to use as your public directory and this is very important we haven't built out our static assets for view yet when we do it's going to be in a dist folder so it's important if you're using default vue.js that you add dist right here for your public directory okay it's going to ask to configure as a single page app which yes we want and now we're all set okay so now all we should have to do is build out our application so npm run build and what that'll do is it'll build for production it's going to create a dist folder and we haven't done we haven't done the service worker stuff yet we're going to get to that after i just want to get this deployed once it's deployed it's very simple to to make changes and you know push to it again so next thing we need to do is simply run firebase we could run firebase serve and actually serve it from firebase but i'm going to go ahead and deploy and it's going to give us a temporary not a temporary but uh like a dummy url a very ugly url a firebaseapp.com one and of course you can go ahead and add your own domain if you wanted to but obviously we're not going to do that so our url is this right here i'm going to go ahead and open that up and see if it works good and you know what i'll do is use the iphone wrapper here and you can actually go to this domain or whatever your domain is it with your smartphone or with any device so let's try it out we'll do 90210 and looks like it works it reaches out to the api try clicking that good all right so our application works so now we want to start on the pwa part of this now there's a package that we can use called view slash pwa because when you build a progressive web app you need to have what's called the manifest file you need to have a service worker and you need basically what this package is going to do is it's going to give us a file to register a service worker and then we have to add some add some config values to it as well we need to add some code so that it caches all the requests that are made to our api okay so let's jump back into vs code and let's close all these up this is very confusing and down here i'm going to say view let's do view add and then we can do at view slash pwa and this is a this is a view plugin and again what it should do is oops what happened here permission issue okay let's do sudo it should create inside public okay so we have a manifest.json file let's see so in public we have a manifest.json and you can see it has a name zip info pwa for the short name i'm going to change it to zip info like that and then it has some icons for android the start url we're actually going to make this just slash because it could give us some issues if we don't do that just the way with with how firebase works also what else um the theme i'm gonna do the background color white and the theme color i'm gonna use that blue that we're using in the app so or that ionic blue which is 3 8 8 0 ff and i think this file should be good now some other things that happened when we ran when we installed the pwa is inside image you'll notice we have all these different icons so all these different size icons for different you know apple touch android and all that now what i've done is i've actually a bunch of my own that i'm going to throw in here and you can get these from the repository in the description but let me just look for those real quick so let's see this might take me a second okay so i'm going to go to our application which is right here and let's see inside images wait this isn't right that's the dist folder inside uh source not source public img icons we have all these icons that are basically vue.js so what i'm going to do is grab let's see one second all right so i have these icons which are just a little the little house with the zip so i'm going to just grab these and bring these over i'm going to replace um what we have here it's not a big deal you don't have to but if you want to they're in the repository just replace all and yeah i guess i'll just move those okay so another thing is the favicon here i have a custom favicon i'm just going to bring over here okay and again that those should be in the files in the description all right so now that we've handled that i want to look at a specific file which is register service worker so this is actually going to create our service worker when we build out our application it's going to be called service worker js now there's a couple ways we can do this we can use there's two plug two different plug-in modes there's one that's called i think it's inject manifest and one called generate sw and generate sw is like it pretty much does everything automatic for us so that's what we're going to use it doesn't allow you as much customization but we're not getting really deep into this i just want a basic pwa so that's what we're going to use and the way we use it is we need to create a config file in the root so make sure you're in the root directory and we're going to create view dot config dot js all right and then inside here we're going to do module dot exports set that to an object and we want to put pwa and set that to an object so everything we put in here has to do with the progressive web app options and this this plug-in we're using uses something called workbox if you've ever heard of that it's a basically a library for service workers and we're going to set a couple values here so let's say work box let's be excuse me box and we're going to set the plugin mode and we're going to set it to generate sw instead of inject manifest and then we're going to set workbox options and we want to set our navigate fallback and that's going to be our index our main index.html file actually want to do slash index.html navigate fallback and then we need to it this will actually cache all of our assets automatically like the images folder and stuff like that but we need to specify um runtime caching here so we want to do runtime caching to be able to cache our responses we get from the zipopottom api so the way we do this is we put an object here and we need to specify a couple things so we need a url pattern and we're going to use a regular expression here so new uh regular expression and we're going to say anything inside here inside these quotes we're going to say anything that starts with which we use the carrot which is the you know shift six number six and we want the api root url which is https and then api dot z i p p o p o t a m dot u s slash u s slash so it's gonna look for that okay and then we wanna add a handler and we wanna specify network first okay this is we're caching the data that's coming from a network request and then for options we can set things like the timeout so let's say network timeout seconds and we'll say 20 and we'll say cash name okay so what do we want to call this we'll call it api dash cache and let's say cachable cacheable response and we can set statuses and we'll set from 0 to 200 okay we don't want to cache like errors and stuff like that all right so i think that should be it let's save this file hopefully i didn't mess anything up and it should generate a serviceworker.js file automatically and it should include this stuff here okay unless i'm missing something which i don't think i am so let's give it a shot let's um you don't have to delete the dist folder but i'm going to just delete it and then i'm going to run npm run build and hopefully it creates our service worker file and then what we can do is push to firebase all right so let's see looks like failed to compile with one errors the dependency was not found register service worker to run it npm install register service worker uh let's see you know what let's try running npm i or npm install what's this permission denied okay so now i'm going to try to run npm run build again see if that works yeah now that's gone alright so hopefully this one works okay good so it created a disk folder let's take a look at it and inside our disk folder notice we have our service worker js and this was created for us it's using something called pre-cache and if we look right here see how it's registering the route for our api and has like our network timeout seconds and stuff this was generated because of what we have in the view uh the view config this stuff here okay and then we have our precache manifest here to cache all of our assets so this should be good so let's let's push it to firebase now so we have our dist folder so let's do firebase deploy and now hopefully we have a progressive web app okay so let's go back to our browser and reload i'm just gonna do a hard reload here you can see the favicon changed and over here on the console check it out service worker has been registered new content is downloading content has been cached for offline use and the reason we're seeing that is inside of our register service worker which is in our source you can see right here at these certain points when it's registered it console logs when it's updated console logs all right so let's go ahead and jump into application and there's our service worker so it's it's running and if we look in our cache storage we have our zip info pwa so this should be yep all of our assets and if i make a request here say 30302 and check it out right here api cache remember that's what we called it and if we look at it gives us the path it gives us the response so the response from the api is now being cached so that if for some reason the internet goes out we can still make this request now it's only gonna if the internet goes out it's only gonna let us make you know get data from requests we've already made that have been cached uh but if you were getting let's say you had an end point where you were just fetching like users or blog posts or something like that that would all get cached our application is a little different because we have to keep looking up different zip codes and it's caching each response but you can see how this works so if i do 90210 and find you'll see that that gets added let's do 30303 30304 all right let's do one two one oh which is actually not valid and you can see that didn't get cached because we're not caching anything above 200 let's do oh uh 01860 merrimack massachusetts all right so you can see all the responses that were cached now what i'm going to do is mimic uh just having no internet so we can do that in chrome by going to network and i need to make this a little bigger so i can see the offline right here i'm going to check that and then once i reload we're offline okay no internet connection and the the application still works now if i make a request and i search for 30302 there we go it works and it's coming from our service worker actually if you look down here in the network tab right here see how it says from service from service worker that's that's the stuff that's being cached if i do 018 when i do 60 that works as well now if i do 30306 that we're not going to get that okay because it's not cached it's just going to stay on the last screen now you could implement something that says you know in offline mode or something like that figure out some kind of way to let the user know but i think just having it like this i mean i think that's fine for this for this course or for this tutorial so hopefully you guys enjoyed this i'll go ahead and put the repository in the description and if you want to add to it make it more advanced feel free to to do whatever you'd like with it but that's it thanks for watching and i'll see you in the next video hey guys one of the best if not the best resource i can refer you to for starting a freelance business is at studyweb development.com freelancing the creator kyle shared it with me and i can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposals html and css templates a portfolio website access to a private facebook community and much more so use the code brad 25 to get 25 percent off today

Channel: Traversy Media

Views: 62,784

Rating: 4.9614921 out of 5

Keywords: vue, vue.js, pwa, progressive web app, ionic, ionic 4, vue ionic

Id: 6H1wftPS0oo

Length: 59min 35sec (3575 seconds)

Published: Mon May 27 2019