Course Introduction: Progressive Web Apps in React with create-react-app

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

egghead
egghead
~ 41 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today