View the Service Worker and the Cache, and Debug a PWA with Chrome’s Dev Tools
Share this video with your friends
Progressive Web Apps can be difficult to debug because of how they are cached by the browser, and also because they aggressively cache static assets from your app. In the Application tab of the Chrome Dev Tools, you can choose to update the service worker on every reload, bypass the service worker entirely, or switch to offline mode - all of which help to debug your PWA.
You can also see what is in the service worker’s cache, and you can use the Network tab to see what is being served by the service worker, and when assets are coming directly from the web server.
Is there any REAL downside to having a Service Worker? I've read Tweets from people(Kent C Dodds) in particular that was having one HECK of a time removing / re-loading of a defunct ServiceWorker. it's incredibly scary to think that if anything was to happen, it could be catastrophic to your users.
Yes, there are a few potential downsides.
One is exactly what Kent pointed out - that once a user is running a service worker, to get a new version, they HAVE to close all tabs that were running the old one - there is no way to force a new one to install. (In that way, it's a lot like a native app).
The other downside I would mention is that not every browser supports service workers - or doesn't support all the features. So, you always have to keep in mind that some users won't be able to use the service worker, and you site should always be able to operate without it.
Should I be concerned that my service worker info (in Application tab) displays 'Received 12/31/1969, 7:00:00 PM'?
That's possibly a problem with Chrome? I found the following bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=845629
If you force it to update the cache, does the date/time update? Also, does the service worker work as expected anyway?
Thanks for quick response. I was not too concerned because everything seems to be working fine. I tried a number of things when I noticed the date. My cache is always set to disabled. I stopped/started the service worker, hit the 'Update' link and even opened and closed the tab and no difference in the date displayed. The same date shows up from other domains' service workers (like Code Sandbox). And I have never had any issues with those other domains either. As long as it does not start acting up, I can ignore this for the time being. Otherwise, I have the Firefox Developer Edition I can fall back on, or might download Chromium down the road. As an aside, I am just beginning to look into mobile side of React. After React (PWA) I wanted to explore React Native. Do mobile frameworks also rely on service workers?
Ok yeah, sounds like it's ok then - just a weird display issue or bug.
Nope - React Native doesn't use service workers - it's a different thing all together. React Native takes React code that you write (using special react-native components, not web components), and builds a separate ios and android app. Those apps take those components, and run them as actual native components. That means you're not writing a webpage that's running in a view like some other frameworks - but you're creating apps that use real, native components.
Egghead has some great courses about React Native too!
Thanks. That gives me a good starting point for comparing the two approaches down the road.
There is a header "Clear-Site-Data" that can be sent by the server to the browsers to clear bad service worker implementations or rougue files. The only catch is that the usual suspects in the browser work (IE, Edge, Safari) has not implemented it yet.