 Have you ever seen the dreaded a service worker can't load its script to error? Do you wonder why your caches don't seem to work? Well, I'm Sam Dutton and I'm gonna show you how to debug service workers in Firefox Firefox has really solid support for debugging PWAs. So let's take it one piece at a time We'll work in the order that you might create a PWA creating a service worker making it work offline Testing that and then debugging the code and testing push notifications We're going to start with this minimal site and build it into a PWA Now the code is simple enough an index dot HTML file an empty file for the service worker and the usual CSS So let's start with registering the service worker. We'll also see what happens when the service worker changes We'll add the code to register a service worker into the site if registration fails. This will log the error Now we can switch to the service worker and add its code This should look familiar. We're listening for the install and activate events and writing a log message Make sure to save everything now. Let's look at what we just did Notice that there's nothing in the console yet When I reload the page, you should see two messages in the console One is the service worker installing and the other is when it activates if you see an error Check your install code and the service worker for syntax errors Firefox has a dashboard that shows all workers including service workers We'll get there by going to about debugging and then clicking on workers Now notice this first section labelled service workers in this case Our source file is service worker.js and the service worker is registered This also shows that we haven't implemented a fetch handler yet. Well, don't worry. We'll get to that soon Let's see what happens when we update the service worker with the new code When I switch back to the browser, you can see that nothing has changed yet. It's the same console messages as before Now I can reload the page. Look at the console log The browser saw that the service worker changed and it's being reinstalled Now notice that it hasn't been activated yet. The old service worker is hanging on until the next reload Instead of reloading everything we can come back to the workers screen and click unregister This terminates the old worker so the new one can take over Now you can see the log message showing the new service worker is active Now let's see how to pre-cache resources and look at them in the developer tools We want to cache these files when the service worker installs Remember that the service worker lives at the root of our site and all of these URLs are relative to the root Now we can change the install event listener to cache all of the files Notice that the log message is gone. We will know when this worked by seeing the files in the cache Now I can reload the site. The call to skip waiting during install makes the new service worker take effect immediately I cleared the console in case any error messages might pop up Our service worker installed and activated. Let's take a look at the cache just made Caches will appear in the storage panel when I click on the apps one cache I can see all of the items in it Before we go on make sure your service worker is building its cache If you don't see these files in the cache check your code and reload the site until they are ready You can pop over to the network tap and see the difference between the files loaded by the browser and the ones loaded by the service worker The initiator column will show you which is which If needed you can delete the old cache before reloading and you can do this with a right click on the cache name Or you can use the clear storage option to wipe out everything including your caches and the current service worker We have a service worker and it's creating a cache now. We want to make the app work offline Remember that we need to add a fetch handler to the service worker This will intercept network requests and serve them from the cache This code adds a fetch handler that serves cache first with a network fallback In other words the app will use its cached files and only go to the network if something is missing Let's reload the browser and make sure there are no errors The workers panel confirms we have an active service worker with a fetch handler so far so good Now we can see if we work offline There are several ways to take the site offline including killing the server But the easiest way is in the file menu. All we need to do is select work offline Firefox will block traffic between your app and the server I'm going to reload this offline app now watch the network panel the size column indicates which items came from the service worker So that's enough to give you a basic PWA that works offline Well, what happens when you need to actually debug something you may get an error loading the service worker or a runtime error So let's look at the tools and a couple of the common bugs that you may encounter To debug a service worker the worker must already be running click on the Associated debug button or click start if the worker isn't running yet This will pop up a new window with the code of the service worker Here you can do all the usual debugging you would expect setting break points step-by-step Execution inspecting variables and so on You can set a break point in the usual way by clicking in the left margin of the source code Or if you prefer insert a debugger statement right into your code Of course the usual resume and step commands work here So we've seen most of what you would do in building and debugging a PWA But I saved one of the most complex things for last push notifications There's already a button and code for subscribing to push notifications, but it still needs a push listener The service worker needs to listen for push events. It then creates a notification object and calls show notification This notification is wrapped in a promise. So we need to call event dot wait until to pause until it appears We have to load the new service worker after making the change and I'm checking the usual places to make sure it loaded Now I can click to subscribe. Of course, I have to also give permission to show notifications Now I can go back to the service worker panel When I click the button it sends a push message straight to the service worker without needing a server success So thanks for listening now that you've seen how to debug service workers in Firefox try it out on your own projects See the other videos in this series to learn debugging for other browsers and then come back for more PWA videos