Check out a free preview of the full Build Progressive Web Apps (PWAs) from Scratch course

The "Wrapping Up" Lesson is part of the full, Build Progressive Web Apps (PWAs) from Scratch course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano wraps up the course by providing a brief overview of the material covered and thanking students for attending the workshop.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> We are getting to the end of the workshop. So, remember what we have covered. We started with a web app that was not a PWA. It's not installable, it wasn't available offline. Then we added installation. Remember there was a manifest, some properties there, including display standalone and name start URL.

[00:00:25]
We set up the icons. Remember we have normal icons, we have the maskable icon for Android, we have the iOS icon, but it's actually in the HTML. Maybe in the future, Apple will support icons directly from the manifest, it's not now. Then we enhance a little bit the user interface, we remove for example selection over icons.

[00:00:47]
We also add a safe area so we are not having a toolbar over places that are managed by the OS. We added a Service Worker. So we understood what a Service Worker is, this new paradigm on the web, where we can actually code a web server, but client side.

[00:01:06]
Remember, it's a middleware, so, and the P in PWA means progressive enhancement. So if it's not there, everything should work anyway. So don't rely on the existence of the Service Worker to create the good for web app. If it's there, it's great, you will have a faster experience, but if it's not everything should work anyway.

[00:01:27]
We made an offline experience, so now our app works completely offline. We have all the assets that we need, HTML, CSS, JavaScript, and web font. And also we're using local storage to save the notes that we are typing. We have added or enhanced the Installation Support. So we have now an Install button that with the before install prompt, and we have a better installation dialog on Android.

[00:01:54]
Add in the screenshot, and also some descriptions. And finally, we discussed how to create the package for different app stores. So that's actually how you can take any website, any web app that you have and convert that into an app, and convert that into a progressive web app.

[00:02:14]
Thank you for attending this workshop and see you around.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now