404 error for the resource "/partytown/partytown-sandbox-sw.html?1646853715625"

See original GitHub issue

I recently tried integrating Partytown for my website Mustakbil.com but encountered this error https://github.com/BuilderIO/partytown/issues/38#issuecomment-1060066828

Which thankfully, has been fixed in the latest version of Partytown (v 0.4.5), but now I am receiving 404 error for the resource “/partytown/partytown-sandbox-sw.html?1646853715625”

Below are the steps I followed to add partytown to my website:

I copied contents of @builder.io\partytown\lib\partytown.js and added it to the script tag in my index.html file.

  <script>
    !function (t, e, n, i, r, o, a, d, s, c, p, l) { function u() { l || (l = 1, "/" == (a = (o.lib || "/~partytown/") + (o.debug ? "debug/" : ""))[0] && (s = e.querySelectorAll('script[type="text/partytown"]'), i != t ? i.dispatchEvent(new CustomEvent("pt1", { detail: t })) : (d = setTimeout(w, 1e4), e.addEventListener("pt0", f), r ? h(1) : n.serviceWorker ? n.serviceWorker.register(a + (o.swPath || "partytown-sw.js"), { scope: a }).then((function (t) { t.active ? h() : t.installing && t.installing.addEventListener("statechange", (function (t) { "activated" == t.target.state && h() })) }), console.error) : w()))) } function h(t) { c = e.createElement(t ? "script" : "iframe"), t || (c.setAttribute("style", "display:block;width:0;height:0;border:0;visibility:hidden"), c.setAttribute("aria-hidden", !0)), c.src = a + "partytown-" + (t ? "atomics.js?v=0.4.5" : "sandbox-sw.html?" + Date.now()), e.body.appendChild(c) } function w(t, n) { for (f(), t = 0; t < s.length; t++)(n = e.createElement("script")).innerHTML = s[t].innerHTML, e.head.appendChild(n); c && c.parentNode.removeChild(c) } function f() { clearTimeout(d) } o = t.partytown || {}, i == t && (o.forward || []).map((function (e) { p = t, e.split(".").map((function (e, n, i) { p = p[i[n]] = n + 1 < i.length ? "push" == i[n + 1] ? [] : p[i[n]] || {} : function () { (t._ptf = t._ptf || []).push(i, arguments) } })) })), "complete" == e.readyState ? u() : (t.addEventListener("DOMContentLoaded", u), t.addEventListener("load", u)) }(window, document, navigator, top, window.crossOriginIsolated);
  </script>

Added below config just above the Partytown script:

  <script>
    window.partytown = {
      forward: ["dataLayer.push", "fbq"],
      lib: "/partytown/",
      resolveUrl: function (url) {
        if (url.hostname === 'www.google-analytics.com') {
          var proxyUrl = new URL('https://myproxyurl.com/');
          proxyUrl.searchParams.append('url', url.href);
          return proxyUrl;
        }
        return url;
      }

    };
  </script>

Below is my Google Tag Manager code:

<script type="text/partytown">
    (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-NJFTK74');
  </script>

Tag Manager code adds: