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

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

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

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

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

同じページ

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 とターゲットを共有する

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

これは、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
};

これらのファイルに対して、任意の操作を行うことができます。キャッシュに保存できます。フェッチ リクエストを使用して、どこかに送信できます。他のマニフェスト オプションを使用することもできます。たとえば、他の共有アイテムのクエリ パラメータを含むページを提供する、またはデータとメディアへのポインタを Cache Storage API または IndexedDB に保存します。

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

一般的な方法の 1 つは、より優れたネットワーク接続が利用可能になるまで共有リソースを保持することです。Workbox は、定期的なバックグラウンド同期もサポートしています。

まとめ

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

写真提供: Elaine CasapUnsplash