アプリ間でデータを共有する

function canBrowserShareData(data) {
  if (!navigator.share || !navigator.canShare) {
    return false;
  }

  return navigator.canShare(data);
}

const sharedDataSample = {
  title: "Some text title",
  text: "More text",
  url: "A url we want to share",
};

if (canBrowserShareData(sharedDataSample)) {
  // UI の共有ボタンを有効にする
  renderAppSharingUI();
} else {
  // このブラウザー/オペレーティングシステムでは共有が使えない
}

async function shareData(data) {
  try {
    await navigator.share(data);
    // データの共有に成功した
  } catch (e) {
    // データが共有できなかった
    console.error(`エラー: ${e}`);
  }
}

// DOM からボタンを取得します。ボタンはこれで非表示になります。
const button = document.querySelector("#share");

if (canBrowserShareData({ text: "text", url: "https://example.com" })) {
  // ボタンを表示
  button.style.display = "inline";

  // ボタンをクリックしたイベントを待ち受けして、データを共有します。
  button.addEventListener("click", async () => {
    try {
      await navigator.share({
        text: "アプリ間でデータを共有する方法を学ぶための MDN 記事",
        url: "https://developer.mozilla.org/docs/Web/Progressive_web_apps/How_to/Share_data_between_apps",
      });

      console.log("URL の共有に成功しました。");
    } catch (err) {
      console.error(`URL が共有できませんでした: ${err}`);
    }
  });
}

function canBrowserShareFiles() {
  if (!navigator.share || !navigator.canShare) {
    return false;
  }

  // ファイルで検査用のデータを作成し、ブラウザーが共有に対応しているかどうかを調べます。
  const testFile = new File(["foo"], "foo.txt", { type: "text/plain" });
  const data = { files: [testFile] };

  return navigator.canShare(data);
}

// DOM からボタンを取得します。ボタンはこれで非表示になります。
const button = document.querySelector("#share");

if (canBrowserShareFiles()) {
  // このブラウザーはファイルの共有に対応しています。ボタンを表示します
  button.style.display = "inline";

  // ボタンがクリックされるのを待ち受けし、ファイルを共有します。
  button.addEventListener("click", async () => {
    try {
      // 共有するファイルを取得します。
      // この関数は、File オブジェクトを返す必要があります。
      // これはおそらく動的に作成するか、 IndexedDB から取得します。
      const file = await getTheFileToShare();

      await navigator.share({
        title: "My shared file",
        files: [file],
      });

      console.log("ファイルの共有に成功しました。");
    } catch (err) {
      console.error(`ファイルの共有ができませんでした: ${err}`);
    }
  });
}

{
  "name": "ChattyBox",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "images/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-handler",
    "method": "GET",
    "params": {
      "text": "description",
      "url": "link"
    }
  }
}

const url = new URL(document.location);
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");

{
  "name": "ChattyBox",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "images/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-file-handler",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "textFiles",
          "accept": ["text/plain", ".txt"]
        },
        {
          "name": "htmlFiles",
          "accept": ["text/html", ".html"]
        },
        {
          "name": "images",
          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
        }
      ]
    }
  }
}

// service-worker.js

self.addEventListener("fetch", (event) => {
  // このイベントリスナーは、 POST リクエストが /share-file-handler に送信された時だけ使用します。
  const url = new URL(event.request.url);
  if (
    event.request.method !== "POST" ||
    url.pathname !== "/share-file-handler"
  ) {
    return;
  }

  event.respondWith(
    (async () => {
      // 送信されたフォームからデータを取得します。
      const formData = await event.request.formData();

      // 送信されたファイルを取得します。
      const textFiles = formData.getAll("textFiles");
      const htmlFiles = formData.getAll("htmlFiles");
      const imageFiles = formData.getAll("images");

      // ファイルをフロントエンドアプリに送信してください。
      sendFilesToFrontend(textFiles, htmlFiles, imageFiles);

      // インポートされたファイルを表示する URL にユーザーをリダイレクトします。
      return Response.redirect("/display-new-files", 303);
    })(),
  );
});