I have a question after skimming that tutorial. When I knew there was some content on a web page in the past, and it was being obscured by some css/js code, I would often just view source and search for some of the content I knew was there. I'm finding this harder to do sometimes.
So if I go to this page (Disconnect. Offline only) and view source, I see a link to a js file. No matter where I go with this, I can't find the content of the article. But it's somewhere on my system, isn't it?
Is there a way to use dev tools to see this content?
I'm not sure what you're asking. "View source" will only show you the "source" text of the HTML page as the server sent it to you. Since this page is built with React without server-side rendering, said source just contains an empty div where the content would go (the one with id="root").
If you mean you want to see the DOM tree that has been generated with JS after you've loaded the page, you can see it in the corresponding tab in your browser's devtools. Eg in Chrome that's the "Elements" tab.
If you mean you want to know how the page works when you're offline, the information is again in the JS. You can use your browser's devtools to prettify it (both Chrome and FF have this feature) and search for "Do you want to be productive?" to see the code.
The Service Worker is only involved in that it returns the page and JS from its cache. It's the JS that detects whether it's offline or online and renders different content on the page accordingly. [1]
So if I go to this page (Disconnect. Offline only) and view source, I see a link to a js file. No matter where I go with this, I can't find the content of the article. But it's somewhere on my system, isn't it?
Is there a way to use dev tools to see this content?