Building a PWA

[00:00:00]
>> So what about the web and PWAs, as I mentioned before? So I already build the web version with flutter build web, and now there is an output folder, so it's build > web, okay? And here you have actually the files that you need to deploy on your web server, okay?

[00:00:26]
So actually, if I get in build/web and I start the server, for example, I can use npx serve, it's actually a free open source server available on npm. Now I have localhost:3000 that I can open. And this is how the app looks like on Safari. Yeah, we might need to center things, but the app should be working.

[00:01:01]
Okay, this is Safari. We have a problem, for example, in the favicon at the top, look at that. Yeah, it's the Flutter icon. So I will show you how to replace that. But what happens if I open this in Chrome? So if I open this in Chrome, Chrome supports progressive web apps.

[00:01:20]
So I have that little icon there, that one. And also, if I go to the menu, it says, Install coffee_masters. If I do that, I will install a progressive web app. It has the Flutter icon. So if I installed the progressive web app, this is how my PWA mapper, this is how it looks like today on my Mac.

[00:01:46]
I have actually now a Mac application with the name coffee_masters. It also appears as an installed application. And this will work on Windows, Linux, Chromebooks, and Mac OS devices. It also works on iPhones. It also works on Android. So this is the PWA version. It's a web version that can be installed.

[00:02:10]
And after its installed, it has an icon in the homescreen or in the, wherever place you put apps in that operating system, and it works offline as well. Everything is done with service workers, JavaScript, and PWA stuff. Flutter is creating the PWA for you automatically. The only thing that you need to set or change maybe is the name of the app, the icon, and where is that?

[00:02:36]
That is actually in the web folder, not the build folder. In the web folder you have index.html to change. You can change anything in the index.html, such as the favicon. So you need to replace the icon. And also have manifest.json. Manifest.json, it's where you set the metadata for your progressive web app, okay?

[00:03:00]
So for example, here we have the name of the app. So instead of coffee_master, I can use Coffee Masters, the best app, whatever, for coffee. The short_name is actually something that will appear below the icon, so it should be short. The background_color is the background color of your splash screen.

[00:03:24]
And the theme_color, it's actually used for the title bar. Okay, so it's that color that you see in the title bar. So you can change this, you can change the description as well. Okay, blah blah blah blah blah, we have description, and your icons. Here there is a set of icons, that by default, they have the Flutter icon.

[00:03:50]
So what do I need to do? Well, replace this icon. So, from the same assets, where you have all the icons, I can take, the only mandatory one is 512 or 1024. So I can put that one there, 1024, that icon. I can delete the Flutter ones. I don't need them.

[00:04:16]
And now in the manifesto.json, I will just stay with one icon. By the way, who is writing that? That's copilot. Yeah, let me disable the copilot for a while. So 1024 by 1024, and this is icons/1024.png. So if I do this, I think I'm good, yep, now it's better.

[00:04:44]
So now my app is installed, so I need to uninstall it so I can install it again with a new name and a new icon. So in the menu you can uninstall the PWA in desktop. So we can try again, so localhost:3000. We can install the app. Let me first try to refresh, I'm still getting the, probably, the cached version.

[00:05:13]
Let me go to inspect application. Yeah, it's still getting the preview's manifest. By the way, if you wanna learn more about manifest and progressive web apps, there are a lot of content in the Frontend Master library, including a workshop that I did on PWAs. And also if you wanna read stuff, I encourage you to read this, kind of book, okay, Learn PWA.

[00:05:43]
I'm suggesting this one because basically I wrote it. So it's a book that I wrote it with the Chrome team about PWAs. And if you wanna learn everything that you can put in that JSON file, if you wanna read about that, you have this free book, it's free.

[00:06:01]
Or you can check the videos on progressive web apps. So let's refresh that manifest.json. Let's see if the server is still here. I don't need to restart the server. Well, that server is using some cache, so probably I need to first go, and the typical problem of caching on the web.

[00:06:30]
So I'm gonna clear the cache, refresh. Let's see if we can get the new manifest. Yeah, my fault. I need to rebuild because I'm still with the old version of the output, okay, yeah. That is the end of the workshop. Okay, so I've done it, so now again, by the way, is this the right one?

[00:06:57]
No, this is the one, flutter build web. Okay, so now I will get into build web and I will run, The server again. Okay, refresh, now we are getting the new binaries. So when you're trying to install the app, it has the right name, the right icon. And now I have in my Mac, okay, nice app with the name coffee_master.

[00:07:30]
This is not a native Mac application. It's a progressive web app.