1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    reactReact
    16.6.3-16.8.6
    chrome-devtoolsChrome DevTools
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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. 

    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.

    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.