
Summary of what the course addresses and what is and is not covered.
Overview of the software and tools used in this course and what you'll need to get started.
Some cleanup we need to do if using an earlier version of CRA (versions before 4). In this video we look at an app made with CRA v3 and what we need to do to get things in place to create our custom service worker. You can skip this if you are using CRA 4.
Overview of creating and registering your basic custom service worker in a Create-React-App application without using Workbox
Brief overview of how to implement Workbox into the project so we can use it in our custom service worker.
Demonstration in the code editor of setting up and configuring Workbox in the CRA project for use in the custom service worker.
This lecture will demonstrate how to handle static assets such as images - where to store them and how to solve missing or broken entries in the cache.
Addressing how to set up Navigation Routes when using React-Router for SPA routing in your application to allow the user to refresh the page on any app route.
Bonus material - using realfavicongenerator.net to easily generate some common icons and a splash screen for our PWA.
Bonus material - We remove the icons generated automatically by CRA to avoid conflicts with our custom icons.
Bonus material - Basic implementation of making the app installable to the home screen.
A brief summary/cheat sheet of the steps you take during development while working on your custom service worker.
This course is for developers who want to create a custom Service Worker for a React app made with Create-React-App without having to eject from CRA.
While Create-React-App comes with a Service Worker and some built in PWA capability, some developers may want to implement a more custom implementation (using custom dynamic caching and route handling for example). The conventional approach to doing this is to eject from CRA in order to have more control, but the disadvantage of this is losing the management and zero configuration benefits that Create-React-App provides.
So is it possible to create your own custom Service Worker and gain more control over its implementation for an app made with CRA without having to eject?
Yes, it is, but the documentation and instructions for how to do this exactly are not uniform or official and difficult to piece together. Some proposed solutions direct the developer to install third party libraries which can add complexity and require additional configuration, while other approaches come with negative side effects such as making the development workflow a cumbersome process. The documentation of these approaches are also sometimes incomplete, disparate and not helpful.
What this course aims to do is provide a clear, concise and effective solution for accomplishing this.
While it is a short course, don't mistake that to mean there is not a lot of value. The aim is to save you as much time as possible and get you the pertinent information you need to reach the goal as quickly as possible.
The developer who takes this course will learn how to gain more control over the Service Worker and PWA functionality while maintaining the benefit of allowing Create-React-App to remain in control and manage their web application bundle while retaining the ease of use provided by the tool.
If you've struggled with finding clear documentation and methods for developing a custom Service Worker for an app made with CRA without having to eject, then this course is for you.
Note that this course assumes some prior coding experience and JavaScript knowledge, as well as familiarity with React, Create-React-App and PWA concepts in general.