Course Introduction: Progressive Web Apps in React with create-react-app
Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device! However, setting up a PWA correctly can be tricky.
In this course, we'll create a PWA from start to finish, using create-react-app. We'll create a custom service worker, and use different caching strategies for different types of assets.
Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.
Instructor: [00:00] Hello, and welcome to this course about how to create a progressive web app with React using create-react-app. With create-react-app, we can make a progressive web app, or a PWA, that caches the static resources used in our app, which will make it load faster, especially on slow connections.
[00:18] However, we can also go so much further. Throughout this course, we'll create a to-do list PWA that starts out with just the basic configuration, but then we'll override that config and develop a fully custom PWA service worker, using Workbox. All without needing to eject from create-react-app.
[00:35] Throughout the project, we'll look at how to run the app completely offline, how to cache dynamic assets as well as static ones, and how to use the features of Workbox to create a custom service worker that does exactly what we want it to. We'll also look at how you can actually install a PWA to a mobile device home screen.
[00:53] Including how you can change the app icon, app name, and splash screen, and we'll look at some design considerations that you should consider when developing a PWA to give your users the best experience possible.
[01:06] Finally, we'll explore how you can use a PWA to access device-specific features as well, like the camera, and even how to add push notification support for Android and Chrome. Even though making a PWA means that you can get closer to a traditional native app experience, it's also important to know that not all device features are supported in PWAs.
[01:28] However, it may be a good choice for your app, even if you're just taking advantage of the loading time speed-up available by caching the resources used in your app. I'm excited to show you how to build a fully-featured, offline operating, progressive web app, using create-react-app.