Web Share

declare const btn: HTMLButtonElement;
 
btn.addEventListener("click", async () => {
  try {
    await navigator.share({
      title: "Fetch API cheatsheet",
      text: "Typed fetch patterns",
      url: "/typescript/web-apis/fetch-api/",
    });
  } catch (err) {
    if (err instanceof DOMException &&
        err.name === "AbortError") return; // canceled
    throw err;
  }
});

declare const blob: Blob; // e.g. from canvas.toBlob
 
const file = new File([blob], "chart.png", {
  type: "image/png",
});
const data: ShareData = { files: [file], title: "Q3 chart" };
 
if (navigator.canShare?.(data)) {
  await navigator.share(data);
}

function mailtoHref(subject: string, body: string) {
  const q = new URLSearchParams({ subject, body });
  // mailto wants %20, not +
  return `mailto:?${q.toString().replaceAll("+", "%20")}`;
}

{
  "share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        { "name": "media", "accept": ["image/*", "video/*"] }
      ]
    }
  }
}

type Shared = "shared" | "copied" | "canceled";
 
export async function shareLink(
  data: { title: string; url: string },
): Promise<Shared> {
  if (typeof navigator.share === "function" &&
      navigator.canShare?.(data) !== false) {
    try {
      await navigator.share(data);
      return "shared";
    } catch (err) {
      const name = err instanceof DOMException && err.name;
      if (name === "AbortError") return "canceled";
      // NotAllowedError etc.: fall through to copy
    }
  }
  const url = new URL(data.url, location.href).href;
  await navigator.clipboard.writeText(url);
  return "copied"; // show a "Link copied" toast
}

function toBlob(canvas: HTMLCanvasElement) {
  return new Promise<Blob>((resolve, reject) =>
    canvas.toBlob(
      (b) => (b ? resolve(b) : reject(new Error("empty"))),
      "image/png",
    ),
  );
}
 
export async function shareCanvas(c: HTMLCanvasElement) {
  const blob = await toBlob(c);
  const file = new File([blob], "score.png", {
    type: "image/png",
  });
  if (navigator.canShare?.({ files: [file] })) {
    return navigator.share({ files: [file] });
  }
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = file.name;
  a.click();
  setTimeout(() => URL.revokeObjectURL(a.href), 1_000);
}

declare const shareBtn: HTMLButtonElement;
declare const copyBtn: HTMLButtonElement;
 
const canNativeShare =
  window.isSecureContext &&
  typeof navigator.share === "function";
 
shareBtn.hidden = !canNativeShare;
copyBtn.hidden = canNativeShare;

/// <reference lib="webworker" />
declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (url.pathname !== "/share-target") return;
  if (event.request.method !== "POST") return;
  event.respondWith(
    (async () => {
      const form = await event.request.formData();
      const files = form.getAll("media")
        .filter((v): v is File => v instanceof File);
      const cache = await caches.open("shared");
      await Promise.all(files.map((f, i) =>
        cache.put(`/shared/${i}`, new Response(f)),
      ));
      return Response.redirect("/inbox?shared=1", 303);
    })(),
  );
});