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

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

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

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

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

Android スマートフォンで [共有] ドロワーが開いている。
Share Target Test という名前のインストール済み PWA をオプションとして含む、システムレベルの共有ターゲット選択ツール。

同じページの場合

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"]
      }
    ]
  }
}
…

Workbox でサービス ワーカーの共有ターゲットを使用する

通常はサーバー エンドポイントで処理されますが、共有ターゲットに対しては、サービス ワーカーに直接ルートを登録してリクエストを処理するという便利な方法があります。これにより、アプリはバックエンドなしで共有ターゲットになります。

Workbox では、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
};

これらのファイルは、その後自由に利用できます。キャッシュに保存できます。fetch リクエストを使用して、それらをどこかに送信できます。他のマニフェスト オプションを使用することもできます。たとえば、他の共有アイテムのクエリ パラメータを含むページを配信したり、Cache Storage API や IndexedDB でメディアのデータとポインタを保存したりできます。

サンプルアプリ Fugu Journal で試すことができます。また、ソースコードでサービス ワーカーの実装を確認できます。

一般的な方法として、ネットワーク接続が改善されるまで共有リソースを保持することがあります。Workbox は、定期的なバックグラウンド同期もサポートしています。

まとめ

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

写真: Elaine Casap（出典: Unsplash）