However, Approach #3 has two major drawbacks.įirst, this approach is hella complicated. All of the tabs will display the “update available” prompt when the user clicks the “refresh” link in any one of them, the new Service Worker will take control of all of the tabs, causing all of them to refresh to the new version. Note that this Approach #3 works even if there are multiple open tabs. Do not press the red button gif code#So suppose we skipWaiting() during installation and add code like this in the web page: ('controllerchange', function() listenForWaitingServiceWorker(reg, promptUserToRefresh) rviceWorker is a ServiceWorkerContainer object it has a controllerchange event which fires when a new Service Worker takes control of the current page. This is just a slight tweak on the previous approach. Approach #2: Refresh old tabs when a new Service Worker is installed The worst thing about blindly calling skipWaiting() is that it appears to work perfectly at first, but it results in bugs in production that are difficult to understand and reproduce. At worst, the user might be offline at the time, resulting in a broken v1 tab, but the user won’t know why. What happens if the v1 tab tries to load /v1/styles.css at that point?Īt best, the v1 tab will attempt to load our style sheet from the network, which is a waste of bandwidth, because we just discarded a perfectly good cached copy of the file. The new v2 Service Worker will activate and delete the old v1 Cache while a v1 tab is still open. When we use it, the new v2 Service Worker will immediately kill the old v1 activated Service Worker once the v2 Service Worker installs.īut beware: this approach eliminates any guarantees of code consistency or data consistency. There’s a one-line function in the global scope of all Service Workers, skipWaiting(), that will do this for us. The simplest and most dangerous approach is to just skip waiting during installation. “For every complex problem there is an answer that is clear, simple, and wrong.” - H. Here are four different approaches to fixing the Refresh button and forcing an update, each associated with a different stage of developer mindfulness and intellectual development.Īpproach #1: We can just skip waiting (but beware) Let’s fix this, shall we? Four Ways to Solve the Same Problem While the v1 Service Worker lives, the Refresh button will generate pages from the old v1 Service Worker’s cache, no matter how many times we refresh. (The Service Worker API calls tabs “clients.”) The old v1 Service Worker won’t die until all of the v1 Service Worker’s tabs have closed. Do not press the red button gif install#By default, once a v1 Service Worker activates, the v2 version of the Service Worker can install but will refuse to activate, “waiting” until the old v1 Service Worker dies. Service Workers can install a bundle of files atomically with the install event, then run data migration during the activate event. Do not press the red button gif upgrade#You can’t safely upgrade an app (or a Service Worker) while it’s still running you need to shut the old version down first, ensuring what I call “code consistency.” In addition, since new versions of an app may change the schema of client-side data, it’s important to run only one version of the app at a time, ensuring “data consistency.” You can install them, start them, stop them, and upgrade them. This tight coupling makes them “application caches.” The app must be completely shut down (all tabs closed) in order to upgrade atomically to the newest cache of code. V1 tabs tightly couple to their v1 Cache v2 tabs tightly couple to their v2 Cache. I’ll try to summarize it in this section, but I think you’ll probably just have to read the whole thing first, because Service Workers are rocket science. My previous article on refreshing Service Workers provides a lot of valuable background material. By the time you’ve plowed through this article, you’ll know pretty much everything you need to know about the Service Worker API.ĭiscuss on Hacker News Discuss on Reddit Step One: Read my previous article Do not press the red button gif registration#Getting this right requires an intimate understanding of the Service Worker lifecycle, the Caches API, the Registration API, and the Clients API. Do not press the red button gif how to#In a previous article, I explained how and why Service Workers break the browser’s Refresh button by default.īut nobody likes a whiner! In this article, I’ll document how to fix the Refresh button. I’m afraid you’ll have to learn the entire Service Worker API along the way.ĭan Fabulich is a Principal Engineer at Redfin.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |