tokono.ma
A music player that connects to your cloud/distributed storage.
1import { DiffuseElement } from "~/common/element.js";
2
3////////////////////////////////////////////
4// ELEMENT
5////////////////////////////////////////////
6
7/**
8 * Registers a service worker that makes the page available offline.
9 *
10 * All resources, except audio & video, fetched by the page are cached as they load.
11 * While online, requests always go to the network (the cache is bypassed),
12 * and successful responses are stored for later. While offline, the cache
13 * is used as a fallback.
14 *
15 * Attributes:
16 * cache-name Name of the cache to use (default: "diffuse-offline")
17 * scope Service worker scope (default: "./")
18 * src URL of the service worker script (default: built-in service-worker.js)
19 * Must be served from a path within the requested scope, or the server
20 * must include a `Service-Worker-Allowed: /` response header.
21 */
22class OfflineOrchestrator extends DiffuseElement {
23 static NAME = "diffuse/orchestrator/offline";
24
25 // LIFECYCLE
26
27 /** @override */
28 async connectedCallback() {
29 super.connectedCallback();
30
31 if (!("serviceWorker" in navigator)) return;
32
33 const cacheName = this.getAttribute("cache-name") ?? "diffuse-offline";
34 const scope = this.getAttribute("scope") ?? "./";
35 const src = this.getAttribute("src");
36
37 const swUrl = new URL(
38 src ?? import.meta.resolve("../../../service-worker-offline.js"),
39 );
40
41 swUrl.searchParams.set("cache-name", cacheName);
42
43 try {
44 await navigator.serviceWorker.register(swUrl.href, {
45 type: "module",
46 scope,
47 });
48 } catch (error) {
49 console.warn("[do-offline] Failed to register service worker:", error);
50 }
51 }
52}
53
54export default OfflineOrchestrator;
55
56////////////////////////////////////////////
57// REGISTER
58////////////////////////////////////////////
59
60export const CLASS = OfflineOrchestrator;
61export const NAME = "do-offline";
62
63customElements.define(NAME, OfflineOrchestrator);