When you install a progressive web app, it almost seems magical, because it, well, it can look like a conventional or a native app. But it's not magic. There are, of course, many moving parts, but one of the important pieces is the manifest. Now, before we do anything, we need to address how our website is being delivered. A progressive web app needs to be delivered using HTTPS. And for me, it's not that difficult, because I'm using Laravel Hurd. Just select your site, click on the Secure Site button, and voila! Our website is now being served with HTTPS, which now we can pull up the developer tools. And let's go to the Application tab, because this is going to contain really all of the information about our progressive web app. But you can see that we don't have really anything here. The manifest is, well, it's empty, because there's no manifest detected.

But you can see that we don't have really anything here. The manifest is, well, it's empty, because there's no manifest detected. We don't have any service workers, because, of course, we don't. But those are another piece that we will need to implement. And then there's the storage. But right now, we're going to focus on our manifest. And this isn't really magical. It's just a JSON file that we serve from our application. And, of course, this is a file that needs to be publicly accessible. So for right now, we are going to create that file inside of the public folder.

And, of course, this is a file that needs to be publicly accessible. So for right now, we are going to create that file inside of the public folder. And we're going to call it manifest.webmanifest. As I mentioned, it is a JSON file, and we just need to add the properties that we need. So the first is going to be the ID. And for most applications, it's just going to be a slash for really the URL of this application. Now, we can actually have multiple progressive web apps on the same website, in which case, you know, maybe we would have field notes. And then maybe we would have field data or things like that. I'm just throwing these off the top of my head.

And then maybe we would have field data or things like that. I'm just throwing these off the top of my head. In which case, we would want to change the ID so that they reflected usually the URL of the application. But in our case, it's just going to be a slash for home, basically. The next thing we need is the name of our app, which in this case is field logger. But for some devices, that might be a little too long. In which case, we would want a short name, which we could just set to logger. I think that that is going to be fine. And any application is going to need icons. Icons are how we associate, you know, an application on our device.

And any application is going to need icons. Icons are how we associate, you know, an application on our device. If it's a mobile device, we tap on it. If it's a desktop or a laptop, we, you know, double-click the icon. So we want to define our icons, which we do here. It's an array of individual objects. The first property of these objects are the source. We need to tell it where these icons live. And we don't have any icons yet, or at least we don't have them as part of the project. And naturally, they need to be available publicly.

And we don't have any icons yet, or at least we don't have them as part of the project. And naturally, they need to be available publicly. So for right now, we're going to drop them into the public folder. Now, I'm also going to include the screenshots, which we will talk about here in a moment. But I'm dropping in two folders. One has the icons, which are PNG files. And technically, we can use any kind of image, you know, format that we wanted. But more often than not, we want to use PNGs because they're more flexible. We can have transparency. And they adapt to the device and to the themes of those devices.

We can have transparency. And they adapt to the device and to the themes of those devices. And typically, we want to have two kinds of icons. I say kinds. Really, they are two different sizes. The first is going to be 192 pixels by 192 pixels. So basically, they need to be a square. So after we define the source of an icon, we need to specify the size, which in this case is 192 by 192. And we also need to specify the type of these images, which is an image slash PNG.

which in this case is 192 by 192. And we also need to specify the type of these images, which is an image slash PNG. Now, there's also a purpose property that we could use, which is going to default to any, which is the default. It's the standard icon. But maybe we also want to define an icon that can be maskable, you know, just in case if one of our other normal icons looks a little awkward on the device, we can have one where the purpose is maskable. I don't have a maskable one, so we're just going to go with any. And I have two icons, one with 192 by 192.

I don't have a maskable one, so we're just going to go with any. And I have two icons, one with 192 by 192. The other is going to be 512 by 512. So that is our icons. The next thing that we need are called screenshots. And you can think of the screenshots kind of like the screenshots that you would see in an app store. They provide visual previews that the browsers use whenever it prompts people to install your application on their device. And there are really two kinds. There's the desktop preview, and then there's the mobile preview.

And there are really two kinds. There's the desktop preview, and then there's the mobile preview. So these are two images that we need to provide, which I've already done with the screenshots that we dropped in. Like the icons, the screenshots are an array where each item has a source property. And this is going to be the screenshot for the mobile install. So we'll have screenshots slash mobile dot png. And like icons, this also has a sizes property. But the size needs to be exactly the size of the screenshots. And unfortunately, I don't remember what those sizes are,

But the size needs to be exactly the size of the screenshots. And unfortunately, I don't remember what those sizes are, but it's going to tell us whenever we try to load this within the browser. So I'm just going to pick some size that is definitely not it. And then we'll set the type equal to image slash png. Now, there's also another form factor property that we can set, but it's going to default to narrow, which that's what we want for our mobile. For the desktop, we're going to change that to desktop. Let's change the sizes to be 512 by 512. Once again, that's wrong.

Let's change the sizes to be 512 by 512. Once again, that's wrong. We will find out what those values actually are here. But the type is going to be the same. But this is where we want to set the form factor property to wide. The idea being that narrow is something that would be mobile. Wide would be something that is more laptop or desktop oriented. And then those are our screenshots. So we have the ID. We have the name.

So we have the ID. We have the name. We have the short name. We have the icons. We have the screenshots that are used to display to the user when they install our app. But then we have other properties that we need to define. The first is going to be start URL, which isn't as necessary anymore because we have the ID here. But basically, we want its value to mirror the ID property

which isn't as necessary anymore because we have the ID here. But basically, we want its value to mirror the ID property so that when someone opens up the application, it's going to automatically navigate to the home of our application, which is what we want in this particular case. In other applications, we might want to open up to another URL. It really just depends upon the application, in which case it's home for us. But then we have a display property. And this is going to determine how our application is displayed on the device.

But then we have a display property. And this is going to determine how our application is displayed on the device. Standalone is going to give us an application window. Full screen is going to run our application in full screen. Minimal UI is going to show our application with minimal Chrome. And then finally, we have browser, which is essentially going to open up another browser window that has all of the buttons and everything that a browser window does. The standalone is probably the most common. It's going to give us an application window,

The standalone is probably the most common. It's going to give us an application window, but it's going to have very, very minimal Chrome. So it's not going to have a back button or anything like that. Well, it might have a back button. We'll see whenever we get to that point. But for right now, we're just going to go with standalone because that's the typical setting that people use. And then we are going to have two values, one called background color, the other is going to be called theme color.

And then we are going to have two values, one called background color, the other is going to be called theme color. Now, the background color is the color of the background whenever our application is launched. So this is going to essentially be the splash screen. And we can set this to whatever we want. I'm going to use the background color of the webpage, which resolves to 030712. The theme color is going to change, or it's going to tint everything about the window.

The theme color is going to change, or it's going to tint everything about the window. So since we are using a display of standalone, we are going to have an application window and everything about that window is going to be tinted based upon what we set for the theme color. And I'm going to use the same value as the background color. And so that's basically everything that we need for our manifest. ID, name, short name, icons, screenshots, start URL, display, background color, and theme color.

ID, name, short name, icons, screenshots, start URL, display, background color, and theme color. But, you know, the manifest is just a file. It's not going to do anything. It's not magically detected by the browser. We have to tell the browser that this file exists. And so we can do that inside of our layout page. And technically, we can do this anywhere, but it's best to do it inside of the head element. That is adding a link where the rel is set to manifest.

but it's best to do it inside of the head element. That is adding a link where the rel is set to manifest. And then the href is the URL to our manifest.webmanifest. Now, I say that we can technically put this file anywhere. We could put it inside of the body, but it might be ignored. And if it's not ignored, it might be loaded too late because the browser might not be aware of it at that point. So putting it in the head is really the best option here. And so we're going to save that. And whenever we go to the browser,

And so we're going to save that. And whenever we go to the browser, we are going to see that now we have a manifest. And we thankfully get some errors and some warnings about this. We can see that the actual size of the screenshot does not match the specified size. So this is great. This is why I did this, so that it will tell us what the actual size is. So for the mobile, it's 842 by 933. So let's change that.

So for the mobile, it's 842 by 933. So let's change that. We'll find our screenshots, 842 by 933. For the desktop screenshot, that's 2525 by 1252. 2525 by 1252. So we'll save that. We do need to reload this so that the browser will reload that manifest file. But those errors go away. And we can see that we have the name, field logger, short name, logger, description, which we didn't do.

And we can see that we have the name, field logger, short name, logger, description, which we didn't do. But we can see that the computed app ID is listed here. It also shows the starting URL, the theme color, the background color, the orientation, which in this particular case is empty. But we will talk about orientation later. And then we have the display of standalone. There's also some other things here, such as our icons, window controls, overlay. And here are the screenshots.

window controls, overlay. And here are the screenshots. But most importantly, now that we have this manifest file, if you look in the address bar, we have the install button. So we can click that, and we can install our app. But let's not do that just yet, because in the next episode, I want to talk about dynamically creating our manifest.