svelte.dev has a stale service worker that prevents it from loading in my browser

[Hornwitser]

Describe the bug

Every time I open svelte.dev after (re)starting the Edge browser it take 5 minutes of waiting before the site actually loads. This is due to a broken service worker that has been installed in the past but have since been removed from the site. The problem is that there is either no code to remove the cached service-worker, or this code does not work. Note that once installed in a users browser a copy of the service worker will live forever there, it is not enough to remove the code installing it to get rid of it on users browsers.

The script url for the service worker is https://svelte.dev/service-worker.js (this currently returns 404).
The source code cached on in my browser for this service worker is (unminified)

!function() {
    "use strict";
    const s = ["client/client.098b7f95.js", "client/examples.83e383fd.js", "client/index.3976da8e.js", "client/InputOutputToggle.027a26b7.js", "client/config.806c4a62.js", "client/ReplWidget.e30046bf.js", "client/_layout.e3618ca9.js", "client/index.0085019c.js", "client/index.eea181dc.js", "client/index.a95d9460.js", "client/index.71c3f10a.js", "client/index.91fcf348.js", "client/index.f0486929.js", "client/index.327170c0.js", "client/index.62b5a44d.js", "client/[slug].0b256578.js", "client/embed.37affaeb.js", "client/app.21ea5998.js", "client/index.15c283f2.js", "client/index.5b4c9dc9.js", "client/index.43e00c11.js", "client/Repl.2e5e8b83.js", "client/codemirror.bc7e52bb.js"].concat(["service-worker-index.html", "contributors.jpg", "examples/thumbnails/7guis-circles.jpg", "examples/thumbnails/7guis-counter.jpg", "examples/thumbnails/7guis-crud.jpg", "examples/thumbnails/7guis-flight-booker.jpg", "examples/thumbnails/7guis-temperature.jpg", "examples/thumbnails/7guis-timer.jpg", "examples/thumbnails/actions.jpg", "examples/thumbnails/adding-parameters-to-actions.jpg", "examples/thumbnails/adding-parameters-to-transitions.jpg", "examples/thumbnails/animate.jpg", "examples/thumbnails/area-chart.jpg", "examples/thumbnails/auto-subscriptions.jpg", "examples/thumbnails/await-blocks.jpg", "examples/thumbnails/bar-chart.jpg", "examples/thumbnails/bind-this.jpg", "examples/thumbnails/checkbox-inputs.jpg", "examples/thumbnails/class-shorthand.jpg", "examples/thumbnails/classes.jpg", "examples/thumbnails/clock.jpg", "examples/thumbnails/component-bindings.jpg", "examples/thumbnails/component-events.jpg", "examples/thumbnails/context-api.jpg", "examples/thumbnails/custom-css-transitions.jpg", "examples/thumbnails/custom-js-transitions.jpg", "examples/thumbnails/custom-stores.jpg", "examples/thumbnails/debug.jpg", "examples/thumbnails/declaring-props.jpg", "examples/thumbnails/default-values.jpg", "examples/thumbnails/deferred-transitions.jpg", "examples/thumbnails/derived-stores.jpg", "examples/thumbnails/dimensions.jpg", "examples/thumbnails/dom-event-forwarding.jpg", "examples/thumbnails/dom-events.jpg", "examples/thumbnails/dynamic-attributes.jpg", "examples/thumbnails/each-block-bindings.jpg", "examples/thumbnails/each-blocks.jpg", "examples/thumbnails/easing.jpg", "examples/thumbnails/else-blocks.jpg", "examples/thumbnails/else-if-blocks.jpg", "examples/thumbnails/event-forwarding.jpg", "examples/thumbnails/event-modifiers.jpg", "examples/thumbnails/group-inputs.jpg", "examples/thumbnails/hacker-news.jpg", "examples/thumbnails/hello-world.jpg", "examples/thumbnails/html-tags.jpg", "examples/thumbnails/if-blocks.jpg", "examples/thumbnails/immutable-data.jpg", "examples/thumbnails/in-and-out.jpg", "examples/thumbnails/inline-handlers.jpg", "examples/thumbnails/keyed-each-blocks.jpg", "examples/thumbnails/media-elements.jpg", "examples/thumbnails/modal.jpg", "examples/thumbnails/module-exports.jpg", "examples/thumbnails/multiple-select-bindings.jpg", "examples/thumbnails/named-slots.jpg", "examples/thumbnails/nested-components.jpg", "examples/thumbnails/numeric-inputs.jpg", "examples/thumbnails/ondestroy.jpg", "examples/thumbnails/onmount.jpg", "examples/thumbnails/reactive-assignments.jpg", "examples/thumbnails/reactive-declarations.jpg", "examples/thumbnails/reactive-statements.jpg", "examples/thumbnails/readable-stores.jpg", "examples/thumbnails/scatterplot.jpg", "examples/thumbnails/select-bindings.jpg", "examples/thumbnails/sharing-code.jpg", "examples/thumbnails/slot-fallbacks.jpg", "examples/thumbnails/slot-props.jpg", "examples/thumbnails/slots.jpg", "examples/thumbnails/spread-props.jpg", "examples/thumbnails/spring.jpg", "examples/thumbnails/styling.jpg", "examples/thumbnails/svelte-body.jpg", "examples/thumbnails/svelte-component.jpg", "examples/thumbnails/svelte-head.jpg", "examples/thumbnails/svelte-self.jpg", "examples/thumbnails/svelte-window-bindings.jpg", "examples/thumbnails/svelte-window.jpg", "examples/thumbnails/svg-transitions.jpg", "examples/thumbnails/text-inputs.jpg", "examples/thumbnails/textarea-inputs.jpg", "examples/thumbnails/tick.jpg", "examples/thumbnails/transition-events.jpg", "examples/thumbnails/transition.jpg", "examples/thumbnails/tweened.jpg", "examples/thumbnails/update.jpg", "examples/thumbnails/writable-stores.jpg", "favicon.ico", "favicon.png", "fonts/fira-mono/fira-mono-latin-400.woff2", "fonts/overpass/overpass-latin-100.woff2", "fonts/overpass/overpass-latin-300.woff2", "fonts/overpass/overpass-latin-400.woff2", "fonts/overpass/overpass-latin-600.woff2", "fonts/overpass/overpass-latin-700.woff2", "fonts/roboto/roboto-latin-400.woff2", "fonts/roboto/roboto-latin-400italic.woff2", "fonts/roboto/roboto-latin-500.woff2", "fonts/roboto/roboto-latin-500italic.woff2", "global.css", "icons/arrow-right.svg", "icons/check.svg", "icons/chevron.svg", "icons/collapse.svg", "icons/download.svg", "icons/dropdown.svg", "icons/edit.svg", "icons/expand.svg", "icons/flip.svg", "icons/fork.svg", "icons/link.svg", "icons/loading.svg", "icons/save.svg", "images/svelte-android-chrome-192.png", "images/svelte-android-chrome-512.png", "images/svelte-apple-touch-icon.png", "images/svelte-mstile-150.png", "images/twitter-card.png", "manifest.json", "media/rethinking-best-practices.jpg", "organisations/1password.png", "organisations/VIPFY.svg", "organisations/ablab.svg", "organisations/absoluteweb.svg", "organisations/bekchy.png", "organisations/beyonk.svg", "organisations/blockvigil.png", "organisations/bluehive.svg", "organisations/buydotstar.svg", "organisations/cashfree.svg", "organisations/chess.svg", "organisations/cliniciannexus.png", "organisations/comigo.svg", "organisations/datawrapper.svg", "organisations/dbnomics.jpg", "organisations/dbnomics.webp", "organisations/deck.svg", "organisations/dextra.png", "organisations/entriwise.png", "organisations/entur.svg", "organisations/etherbit-dev.svg", "organisations/farmbox.svg", "organisations/from-now-on.png", "organisations/frontend_bastards.svg", "organisations/fusioncharts.svg", "organisations/godaddy.svg", "organisations/grainger.svg", "organisations/healthtree.png", "organisations/in1.svg", "organisations/iota.svg", "organisations/itslearning.svg", "organisations/jacoux.png", "organisations/jingmnt.png", "organisations/librelingo.svg", "organisations/luigi.png", "organisations/mentorcv.png", "organisations/metrovias.svg", "organisations/mustlab.png", "organisations/nesta.svg", "organisations/nonkosi.svg", "organisations/noppo.png", "organisations/nyt.svg", "organisations/nzz.svg", "organisations/oberonspace.svg", "organisations/ofof.png", "organisations/open-state-foundation.svg", "organisations/panascais.svg", "organisations/pankod.svg", "organisations/paperform.svg", "organisations/phonerefer.png", "organisations/playpilot-logo.svg", "organisations/pqina.svg", "organisations/rakuten.svg", "organisations/razorpay.svg", "organisations/santiment.svg", "organisations/socialist-party.svg", "organisations/softmus.png", "organisations/sqltribe.svg", "organisations/stone.svg", "organisations/strixcloud.svg", "organisations/sucuri.png", "organisations/superchargify.svg", "organisations/swissdev-javascript-jobs.png", "organisations/thunderdome.svg", "organisations/tokopedia.svg", "organisations/tsh.svg", "organisations/vrstugan.svg", "organisations/webdesq.svg", "organisations/zeoagency.svg", "organisations/zevvle.svg", "prism.css", "svelte-app.json", "svelte-logo-horizontal.svg", "svelte-logo-mask.svg", "svelte-logo-outline.svg", "svelte-logo-vertical.svg", "svelte-logo.svg", "svelte-logotype.svg", "tutorial/dark-theme.css", "tutorial/icons/email.svg", "tutorial/icons/folder-open.svg", "tutorial/icons/folder.svg", "tutorial/icons/gif.svg", "tutorial/icons/map-marker.svg", "tutorial/icons/md.svg", "tutorial/icons/xlsx.svg", "tutorial/image.gif", "tutorial/kitten.png", "workers/bundler.js", "workers/compiler.js"].filter(s=>{
        const a = s.split("/").pop();
        return "." !== a[0] && !a.endsWith(".mp3")
    }
    ))
      , a = new Set(s);
    self.addEventListener("install", a=>{
        a.waitUntil(caches.open("cache1584708355229").then(a=>a.addAll(s)).then(()=>{
            self.skipWaiting()
        }
        ))
    }
    ),
    self.addEventListener("activate", s=>{
        s.waitUntil(caches.keys().then(async s=>{
            for (const a of s)
                "cache1584708355229" !== a && await caches.delete(a);
            self.clients.claim()
        }
        ))
    }
    ),
    self.addEventListener("fetch", s=>{
        if ("GET" !== s.request.method || s.request.headers.has("range"))
            return;
        const e = new URL(s.request.url);
        e.protocol.startsWith("http") && (e.hostname === self.location.hostname && e.port !== self.location.port || (e.host === self.location.host && a.has(e.pathname) ? s.respondWith(caches.match(s.request)) : "only-if-cached" !== s.request.cache && s.respondWith(caches.open("offline1584708355229").then(async a=>{
            try {
                const e = await fetch(s.request);
                return a.put(s.request, e.clone()),
                e
            } catch (e) {
                const n = await a.match(s.request);
                if (n)
                    return n;
                throw e
            }
        }
        ))))
    }
    )
}();

Suggested actions:

• Rehost a service worker that uninstalls itself on https://svelte.dev/service-worker.js so that it gets updated and removed for people who have it on their browser. (Browsers will try updating the service worker if it hasn't been updated in 24 hours and the site is accessed.)
• Add code to remove all service workers on the site, something like this should work:

  navigator.serviceWorker.getRegistrations().then(
    function(registrations) {
      for(let registration of registrations) {
        registration.unregister();
      }
    }
  );

See https://love2dev.com/blog/how-to-uninstall-a-service-worker/ for more details.

Reproduction

This is not to my knowledge reproducible as it requires a browser that loaded the stale service worker before it was removed from the site. But if you have a browser with the stale service worker installed simply trying to open svelte.dev after restarting the browser greets you with 5 minutes of waiting for it to load.

Logs

No response

System Info

Windows 10
Microsoft Edge Version 112.0.1722.39 (Official build) (64-bit)

Severity

annoyance

[benmccann]

FYI, in Chrome you can remove a service worker by going to the "Application" tab in the developer tools (F12)