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

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

Web Share Target API を使用すると、 プログレッシブ ウェブアプリを インストール後のシステムレベルの共有シート。サーバーがある場合や 理解できないと、仕事に就くのが難しくなります。

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

<ph type="x-smartling-placeholder">
</ph> [共有方法] をオンにした Android スマートフォン引き出します。 <ph type="x-smartling-placeholder">
</ph> という PWA がインストールされた、システムレベルの共有ターゲット選択ツール Share Target Test(オプション)。

同じページ

ウェブ共有ターゲットの仕組みについて不明な点がある場合は、ウェブ共有との共有データの受信についてご覧ください。 Target API で、概要を確認できます。 簡単に復習しましょう。

ウェブ共有のターゲット機能の実装は、2 つの部分に分かれています。まず、 ウェブアプリ マニフェストを更新して、アプリを共有させることを明示します。 ターゲットにできます。次の例では、共有を /share URL に転送します。 POST リクエストで使用します。マルチパート形式にエンコードされ、title が呼び出されます。 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 でルートを登録して、 リクエストできます。これにより、バックエンドのない共有ターゲットにすることができます。

[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
};

これらのファイルは自由に操作できます。キャッシュできます。マイページ フェッチ リクエストでどこかに送信できます。もう 1 つの 別のクエリ パラメータを含むページを提供したり、 キャッシュ ストレージ API または IndexedDB を使用します。

サンプルアプリ Fugu でお試しいただけます。 Journal を参照し、その Service Worker を確認します。 示しています。 コードをご覧ください。

よくあることの一つは、ネットワークが安定するまで共有リソースを保持することです。 使用できます。ワークボックスは定期的な背景もサポート 同期します

まとめ

Share Target API は、プログレッシブ ウェブとプログレッシブ ウェブアプリと アプリをユーザーのデバイスに組み込むことで、 アプリ間でのコンテンツ共有という重要なタスクを実行します。しかしそのためには サーバーがリクエストを受信できることを意味します。Workbox を利用して共有を作成する ターゲット ルートを Service Worker で直接設定している場合、 アプリに対して共有ターゲットを機能させることができます。ただし、オフライン時でも使用していなくても 使用できます。

写真撮影: Elaine CasapUnsplash より)