ワークボックスを使用して、組み込みの共有 UI に PWA を統合

システムレベルの共有 UI でプラットフォーム固有のアプリの横に PWA を表示する方法

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API を使用すると、プログレッシブ ウェブアプリをインストール後、ユーザーのシステムレベルの共有シートに表示できます。リクエストを受信できるサーバーがある場合は適切に機能しますが、そうでなければ機能させるのは非常に困難です。

この記事では、ウェブアプリにオフライン サポートを追加するための JavaScript ライブラリのセットであるワークボックスを使用して、Service Worker 内で完全に動作する共有ターゲット URL を作成します。これにより、静的サイトとシングルページ アプリを専用のサーバー エンドポイントなしで共有ターゲットとして使用できます。

同じページ

Web Share Target の仕組みについて詳しくは、Web Share Target API で共有データを受信するをご覧ください。簡単に復習しましょう

ウェブ共有ターゲット機能の実装は、2 つの部分に分かれています。まず、ウェブアプリ マニフェストを更新して、インストール時にアプリが共有ターゲットになるように指定します。次の例では、POST リクエストを介して共有を /share URL に転送しています。マルチパート形式でエンコードされます。タイトルは name、テキストは description、JPEG 画像は photos と呼ばれます。

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Service Worker が Workbox とターゲットを共有する

通常はサーバー エンドポイントによって処理されますが、共有ターゲットでは、リクエストを処理するルートを Service Worker に直接登録すると便利です。これにより、アプリをバックエンドなしで共有ターゲットにできます。

これを行うには、Service Worker で処理するルートをワークボックスに登録します。まず、'workbox-routing' から registerRoute をインポートします。サンプルのウェブアプリ マニフェストにリストされているものと同じ /share ルートに登録されていることに注意してください。これにより、shareTargetHandler() が呼び出されます。

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

shareTargetHandler() 関数は非同期で、イベントを受け取り、フォームデータを待ってから、そこからメディア ファイルを取得します。

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

こうすれば、これらのファイルを自由に操作できます。キャッシュに保存できます。フェッチ リクエストを使用して、任意の場所に送信できます。他のマニフェスト オプションを使用することもできます。たとえば、他の共有アイテム用のクエリ パラメータを使用してページを表示したり、Cache Storage API や IndexedDB にデータとメディアへのポインタを格納したりできます。

サンプルアプリ Fugu Journal で試すと、ソースコードで Service Worker の実装を確認できます。

よく行われるのは、ネットワーク接続が安定するまで共有リソースを保持することです。Workbox は定期的なバックグラウンド同期もサポートしています。

おわりに

Share Target API を使用すると、プログレッシブ ウェブアプリをユーザーのデバイスに簡単に統合できます。アプリ間でコンテンツを共有するという重要なタスクにおいて、プラットフォーム固有のアプリと同等になります。ただし、これを行うには、通常、リクエストを受信できるサーバーが必要です。Workbox を利用して共有ターゲット ルートを Service Worker で直接作成すると、アプリでこの制約がなくなり、オフラインでもバックエンドのないアプリでも共有ターゲットが機能できるようになります。

写真撮影: Elaine Casap、Unsplash