You know, we talked about the manifest and how we need one for our progressive web application, but, you know, it's just a static file. Let's make it dynamic. Now, granted, we don't need a dynamic manifest, but considering that, you know, this is a dynamic application, it just kind of goes without saying to have a dynamic manifest. And, you know, this way we can control our manifest through a configuration. So let's create a config. We'll use Artisan to make a new config. We'll just call it PWA so that all of our progressive web app settings will be inside of this config file. And since we're here, let's go ahead and let's also make a controller because we are going to serve up our dynamic manifest with a controller. So let's call it PWA Controller or no, let's say PWA Manifest Controller. And we're just going to make this invocable. It also helps if you type invocable correctly. But that's going to give us

So let's call it PWA Controller or no, let's say PWA Manifest Controller. And we're just going to make this invocable. It also helps if you type invocable correctly. But that's going to give us the two files that we need so that we can open up pwa.php. And then we just need to essentially translate our manifest properties and values into a PHP array. So admittedly, this is going to be a little boring simply because we are going to be taking our values from our static file manifest and just transferring it into this configuration file. So let's start with our name. And we're going to pull this from our environment variables of app name, which, speaking of, let's open up our .env file and let's change our app name from Laravel to Field Logger. Actually, no, let's not. We will eventually do that. But let's leave this as Laravel just so that we can see the changes inside of the browser whenever we finally flip

Field Logger. Actually, no, let's not. We will eventually do that. But let's leave this as Laravel just so that we can see the changes inside of the browser whenever we finally flip the switch from our static file to our dynamic file. So we're going to pull the name from the environment app name, and then we will have our short name, which we will set to just Logger. Then from here, we're going to add a description. We didn't talk about description in the previous episode, but we saw in the browser where there was a place for a description. So our description will be to record and review field meter data. That kind of doesn't make sense. Let's say meter readings because that's more along the lines of what we would expect for meters. Then we will have our start URL, which we will set to just the root of our application. We'll follow that up with the ID. Now, one thing in the previous episode, I mentioned that the ID typically mirrors the start

have our start URL, which we will set to just the root of our application. We'll follow that up with the ID. Now, one thing in the previous episode, I mentioned that the ID typically mirrors the start URL or vice versa. And that is the case, but we can have a different start URL. The ID is exactly what it sounds like. It is the ID of our application because the start URL can change. So just be aware of the difference between those. They typically mirror one another, but they don't have to. The ID is the ID of the application. Then we will have our display, which I believe we had set to stand alone. So that's we will get a nice application window and it's not going to have any of the browser Chrome. So that's going to be nice. But we also saw that there was a place for orientation whenever we were viewing the information inside of the browser. And there's several different values that we can use here. I'm going to stick with portrait because we could say that

orientation whenever we were viewing the information inside of the browser. And there's several different values that we can use here. I'm going to stick with portrait because we could say that a user could use this within a browser, which would be more landscape. But ideally, this would be something that someone would use out in the field on their mobile device. So we're going to start with the orientation portrait. And of course, that doesn't mean that we can't view it on a laptop. This is just what we prefer for this to be right now. Then we will have our background color and we will have our theme color. And I don't remember what the actual value here is. So I'm just going to copy that and we will paste that for the background color and the theme color. And then we have the icons and the screenshots. And frankly, I don't want you to see me type all of that. I don't want to type all of that. So I'm just going to paste it in. And it's just lifting

And then we have the icons and the screenshots. And frankly, I don't want you to see me type all of that. I don't want to type all of that. So I'm just going to paste it in. And it's just lifting the information that we had from our static web manifest file and just putting it in the form of a PHP array. I've added little comments here that the icons live in public. The screenshots are there for a richer install user interface, which is that's really all that the screenshots are for. They're there for whenever we install the application so that someone can see what they are going to install. And really, that's it. There are some other properties that we can set. Like, for example, there is a categories and this could be an array to where we could say that this is a productivity and utilities. And there are many other things that we could do. But for right now, this is going to be just fine so that now that we have this config, we can turn around and

is a productivity and utilities. And there are many other things that we could do. But for right now, this is going to be just fine so that now that we have this config, we can turn around and we can open up our PWA manifest controller because here we just want to take that information and return a JSON structure. So to start, let's say PWA equals config get PWA. We do need a use statement for the config facade. So let's add that in. And then it's just a matter of building this manifest. So once again, rather boring, rather repetitive. But once we get this in place, then all we have to do is make changes to our config. And any change that we make to the manifest is going to flow through to our manifest, which is great. So here we are going to have the key and the value, which we're just going to start with this. So we will have PWA and the name. I'm going to copy this line and paste it several times because this makes it a little bit easier

the key and the value, which we're just going to start with this. So we will have PWA and the name. I'm going to copy this line and paste it several times because this makes it a little bit easier so that we can add in the short name. We can also add in the description, also the start URL, as well as ID. Then we can have the display. We also had the orientation, so let's add that in. But then we also want the background color and we want the theme color as well. And then we can set the icons to, let's do this. Well, no, we can do this. We'll have our icons. Then we will have our screenshots. And then finally, we will have our categories. And I just messed that up. All right, so now we'll have our categories. And that's going to be our manifest. If we wanted to add more things, we can so that then we're going to build our JSON using JSON encode, passing in our manifest. And I want to use a couple of flags because we do have slashes as far as the paths are concerned.

things, we can so that then we're going to build our JSON using JSON encode, passing in our manifest. And I want to use a couple of flags because we do have slashes as far as the paths are concerned. So I want to use JSON unescaped slashes. I also want JSON unescaped Unicode. That way, our manifest is a lot easier to read if we were to just open it up and view it. So now that we have our JSON, we just need to make our response. So we can return response and we're going to make a response based upon this JSON. And we want to set a few headers. First of all, we want to set the content type to application application slash manifest plus JSON. Now, this is very important. We might be able to get away with just application slash JSON. But usually, we wouldn't be able to because the browser is really expecting this manifest plus JSON. So we're going to explicitly set the content type here so that the browser will readily read it

we wouldn't be able to because the browser is really expecting this manifest plus JSON. So we're going to explicitly set the content type here so that the browser will readily read it and accept it and everything should work, hopefully. But then we also want to set the cache control. Now, the cache control can be a little tricky because ideally, we want to cache this. But especially as we are developing, cache is going to stink really much. So we could say that eventually, we would set a max age of 86400, which is essentially a day. But I don't want to do that. For development purposes, I want to set the cache control to public max age equals zero because I don't want it cached at all. If I refresh, I want to pull that manifest with any new changes that we might have made and we must revalidate. So that way, as we are developing our application, we don't have to go into the browser, clear all of the browser data and go

new changes that we might have made and we must revalidate. So that way, as we are developing our application, we don't have to go into the browser, clear all of the browser data and go through that whole thing. So we do need a use statement for the response facade. But other than that, we have our controller ready to go. We are building that manifest, creating the JSON structure and then returning the JSON structure as application slash manifest plus JSON. So great. So now, we just need to open up our routing files so that we can add a get request for manifest dot JSON. This is for our PWA manifest controller class. And let's call this route PWA dot manifest. That way, we can build this URL, well, right inside of our layout. So instead of hard coding this manifest right here, we can now call route PWA manifest. And yeah, that should work. So as long as I didn't break anything, well, apparently I've broken something. Let's take a look at the

this manifest right here, we can now call route PWA manifest. And yeah, that should work. So as long as I didn't break anything, well, apparently I've broken something. Let's take a look at the network and let's see what is being pulled in. So as we refresh, manifest dot JSON is getting a 500. So if we take a look at the response, what is wrong here? Can we navigate here? Let's open up in a new tab and we see undefined array key theme colors. Yeah, because it's not colors, it should be color. So where was that though? Let's take a look at the controller first of all. And yeah, that's theme colors, theme colors. Okay. So with that fixed inside of the browser, let's refresh. Hopefully we will see something. Well, we see something. Oh, we need to set the status code. That's the second argument. Whenever you call response make, you need to specify what we are passing for the response plus the status code. That's very important. So now there we go.

status code. That's the second argument. Whenever you call response make, you need to specify what we are passing for the response plus the status code. That's very important. So now there we go. We have our JSON structure. So if we go back to the application tab, let's refresh. We see that the name is Laravel because that is being pulled from our .env file. We can see that the short name is logger. So therefore we are pulling data from manifest dot JSON. We can see that right here because before it showed manifest.webmanifest. So let's do this. Let's open up the .env file so that we can change Laravel to field logger. And by doing that, whenever we go back to the browser, since we're not caching this, we can refresh and we can see that the name updates. So we are successfully pulling our manifest information from our config, which is ultimately going to make it easier to manage our manifest. And so now that we have a dynamic manifest,

So we are successfully pulling our manifest information from our config, which is ultimately going to make it easier to manage our manifest. And so now that we have a dynamic manifest, we can begin work on our service worker.