Skip to content

Instantly share code, notes, and snippets.

@fnordfish

fnordfish/index.html

Created September 27, 2023 13:44
Show Gist options
  • Save fnordfish/9b38b90fba54093ee601887a3bd3e11e to your computer and use it in GitHub Desktop.
Save fnordfish/9b38b90fba54093ee601887a3bd3e11e to your computer and use it in GitHub Desktop.
Download ZIP
simple test case for a JS ServiceWorker with import statement.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h2>Output:</h2>
<div id="out"></div>
<script type="module">
const out = document.getElementById('out');
const processResponse = (event) => {
const p = document.createElement('p')
p.innerText = JSON.stringify(event.data)
out.appendChild(p)
}
const pingWorker = () => {
navigator.serviceWorker.controller?.postMessage("ping " + (new Date()).getTime())
}
navigator.serviceWorker.register('./sw.js', { type: "module" })
.catch((err) => {
console.error("ServiceWorker failed to register.");
console.error(err);
})
navigator.serviceWorker.addEventListener("message", processResponse);
setInterval(pingWorker, 2000);
</script>
</body>
</html>
Raw
module.js
export const FOO = "BAR";
Raw
sw.js
// This is supposed to be working on Firefox 114 and later
import { FOO } from './module.js';
self.addEventListener("install", (_event) => {
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(clients.claim());
});
self.addEventListener("message", (event) => {
event.source.postMessage({ pong: event.data, foo: FOO });
})
@fnordfish
Copy link
Author

fnordfish commented Sep 27, 2023 •
edited

In Firefox (up to the current nightly v120), the import statement in sw.js makes the registration of the service worker crash with TypeError: ServiceWorker script at https://localhost:9292/sw.js for scope https://localhost:9292/ threw an exception during script evaluation.

It works:

  • In Safari, Chrome
  • Without the import statement (and usage of the imported constant)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment