sveltejs / sites

Monorepo for the sites in the Svelte ecosystem
https://svelte.dev
MIT License
286 stars 123 forks source link

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

Open Hornwitser opened 1 year ago

Hornwitser commented 1 year ago

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:

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 commented 1 year ago

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