ExtendableEvent.md

ExtendableEvent

Namespace: SpawnDev.SpawnJS.JSObjects
Inherits: Event
Source: JSObjects/ExtendableEvent.cs
MDN Reference: ExtendableEvent on MDN

The ExtendableEvent interface extends the lifetime of the install and activate events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like FetchEvent) are not dispatched until it upgrades database schemas and deletes the outdated cache entries. https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent

Constructors

Signature	Description
ExtendableEvent(SpawnJSObjectReference _ref)	Deserialization constructor

Methods

Method	Return Type	Description
WaitUntil(Promise promise)	void	Extends the lifetime of the event. It is intended to be called in the install event handler for the installing worker and on the activate event handler for the active worker.
WaitUntil(Task promise)	void	Extends the lifetime of the event. It is intended to be called in the install event handler for the installing worker and on the activate event handler for the active worker.

Examples

SpawnDev.SpawnJS Mapping Note: The JavaScript examples below show the standard Web API usage. In SpawnDev.SpawnJS, the same API is available with C# conventions:

• Properties and methods use PascalCase (e.g., readyState becomes ReadyState)
• Events use ActionEvent with +=/-= (e.g., addEventListener("click", fn) becomes OnClick += handler)
• Async methods return Task<T> instead of Promise<T>
• Objects should be disposed with using statements
• Access via JS.Get<ExtendableEvent>(...) or constructor new ExtendableEvent(...)

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then((cache) =>
        cache.addAll(
          urlsToPrefetch.map(
            (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
          ),
        ),
      )
      .then(() => {
        console.log("All resources have been fetched and cached.");
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

See full example on MDN

Examples

JavaScript (MDN):

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then((cache) =>
        cache.addAll(
          urlsToPrefetch.map(
            (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
          ),
        ),
      )
      .then(() => {
        console.log("All resources have been fetched and cached.");
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

C# (SpawnDev.SpawnJS):

// Requires: builder.Services.AddSpawnJSRuntime();
// Inject SpawnJSRuntime in your component or service:
// [Inject] SpawnJSRuntime JS { get; set; }

var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: $"prefetch-cache-v{CACHE_VERSION}",
};

self.addEventListener("install", (event) => {
var urlsToPrefetch = [;
"./static/pre_fetched.txt",
"./static/pre_fetched.html",
"https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
];

console.log(
"Handling install event. Resources to pre-fetch:",
urlsToPrefetch,
);

event.WaitUntil(
caches
.open(CURRENT_CACHES["prefetch"])
; // then: use await instead
cache.addAll(
urlsToPrefetch.map(
(urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),
),
),
)
.then(() => {
Console.WriteLine("All resources have been fetched and cached.");
})
// catch: use try/catch instead
Console.Error.WriteLine("Pre-fetching failed:", error);
}),
);
});