@virtualstate/internal
v1.0.0-alpha.31
Published
[//]: # (badges)
Downloads
15
Readme
@virtualstate/internal
Support
Test Coverage
Usage
Service Worker API
self.addEventListener("fetch", event => {
console.log(event.request.method, event.request.url);
event.respondWith(new Response("Hello"))
});import { serviceWorker, createServiceWorkerFetch } from "@virtualstate/internal";
import { fileURLToPath } from "node:url";
import { dirname, join } from "node:path";
const pathname = fileURLToPath(import.meta.url);
const worker = join(dirname(pathname), "./worker.js");
const registration = await serviceWorker.register(worker);
const fetch = createServiceWorkerFetch(registration);
const response = await fetch("/");
const text = await response.text();
console.log(response.status, text); // 200 "Hello";REDIS_MEMORY=1 node main.jsCacheStorage
import { caches } from "@virtualstate/internal";
const cache = await caches.open("cache");
const url = "https://example.com";
await cache.add(url);
const response = await cache.match(url);
const text = await response.text();
console.log(response.status, text.substring(0, 15), text.length); // 200 "<!doctype html>" 1256;ContentIndex
import { index, caches } from "@virtualstate/internal";
const entry = {
id: "post-1",
url: "/posts/amet.html",
title: "Amet consectetur adipisicing",
description:
"Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.",
icons: [
{
src: "https://javascript.org.nz/logo.png",
sizes: "200x200",
type: "image/png",
},
],
category: "article",
};
await index.add(entry);
console.log(await index.getAll()) // [{ id: "post-1" }]
const cache = await caches.open("contentIndex");
for (const { src } of entry.icons) {
const response = await cache.match(src);
const { byteLength } = await response.arrayBuffer();
console.log(src, response.status, byteLength) // ... 200 5348
}Background Sync API
import { addEventListener, sync, caches, index, dispatchEvent } from "@virtualstate/internal";
addEventListener("sync", ({ tag, waitUntil }) => {
if (tag === "images") {
waitUntil(onSyncImages());
}
async function onSyncImages() {
const cache = await caches.open("contentIndex");
for (const { id, icons } of await index.getAll()) {
for (const { src } of icons) {
console.log(`Updating icon "${src}" for ${id}`);
await cache.put(
src,
await fetch(src)
);
}
}
}
});
await sync.register("images");
// Ran elsewhere by scheduler
// Is usually managed by generateVirtualSyncEvents
await dispatchEvent({
type: "sync",
tag: "images",
schedule: {
immediate: true
}
});Periodic Sync API
import { addEventListener, periodicSync, caches, index, dispatchEvent } from "@virtualstate/internal";
addEventListener("periodicsync", ({ tag, waitUntil }) => {
if (tag === "images") {
waitUntil(onSyncImages());
}
async function onSyncImages() {
const cache = await caches.open("contentIndex");
for (const { id, icons } of await index.getAll()) {
for (const { src } of icons) {
console.log(`Updating icon "${src}" for ${id}`);
await cache.put(
src,
await fetch(src)
);
}
}
}
});
await periodicSync.register("images", {
minInterval: 5 * 60 * 1000 // Refresh every 5 minutes
});
// Ran elsewhere by scheduler
// Is usually managed by generatePeriodicSyncVirtualEvents
await dispatchEvent({
type: "periodicsync",
tag: "images",
schedule: {
immediate: true
// can give delay here or cron
// minInterval doesn't always mean a fixed rate
//
// delay: 5 * 60 * 1000,
// repeat: true
}
});Events
import { addEventListener, dispatchEvent } from "@virtualstate/internal";
addEventListener("bingpop", () => {
console.log("Received bingpop event");
});
dispatchEvent({
type: "bingpop"
});Schedules
schedule.immediate
Use this to have the event be dispatched immediately
dispatchEvent({
type: "bingpop",
schedule: {
immediate: true
}
});schedule.delay
Use this to have the event be dispatched after a period of time
dispatchEvent({
type: "bingpop",
schedule: {
delay: 1000
}
});dispatchEvent({
type: "bingpop",
schedule: {
delay: "1h"
}
});schedule.cron
Use this to have the event be dispatched according to a cron schedule
dispatchEvent({
type: "bingpop",
schedule: {
// Triggers at 5am each day
cron: "0 5 * * *"
}
});