Progressive Web Apps と Windows Share の統合

  • [アーティクル]

この記事では、Progressive Web App (PWA) と Windows Share 機能の統合方法について説明します。 この機能を使用すると、ユーザーは Windows アプリ間でコンテンツを共有できます。 PWA は共有対象として登録され、アプリ内で共有ファイルを受信して処理します。

共有対象とは

共有対象は、Windows 8 で導入された機能であり、アプリが別のアプリからデータを受信できるようにします。 共有対象はクリップボードのように機能しますが、動的コンテンツを使用します。

PWA からコンテンツを共有する

コンテンツを共有するために、PWA はコンテンツ (テキスト、リンク、ファイルなど) を生成し、共有コンテンツをオペレーティング システムに渡します。 オペレーティング システムを使用すると、ユーザーはそのコンテンツを受け取るために使用するアプリを決定できます。 PWA は、Web Share API を使用して、Windows 内で Share Sheet を表示します。 Web Share API は、Microsoft Edge やその他の Chromium ベースのブラウザーでサポートされています。

PWA からコンテンツを共有する方法の完全な例については、Microsoft Edge ドキュメントの「コンテンツの共有」を参照してください。

PWA で共有ファイルを受信する

コンテンツを受信するために、PWA はコンテンツ対象として機能します。 PWA は、コンテンツ共有対象としてオペレーティング システムに登録する必要があります。

share_target メンバーには、共有コンテンツをアプリに渡すためにシステムに必要な情報が含まれている必要があります。 次のマニフェスト share_target 構成の例を考慮します。

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

ユーザーが共有コンテンツの対象としてアプリを選択すると、PWA が起動します。 action プロパティで指定された URL に対して GET HTTP 要求が行われます。 共有データは、title、text および url クエリ パラメーターとして渡されます。 /handle-shared-content/?title=shared title&text=shared text&url=shared url の要求が行われます。

次の例は、スコープ付きサービス ワーカーを登録する方法を示しています。

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

サービス ワーカーは必要に応じて共有データを処理し、要求を満たすか、カスタム パスから要求をリダイレクトできます。 次の例は、カスタム パスから要求をリダイレクトする方法を示しています。

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

詳細については、Microsoft Edge ドキュメントの「共有コンテンツの受信」の例を参照してください。

パフォーマンスに関する考慮事項

フェッチ ハンドラーが共有のサポートのみを目的として追加された場合は、サービス ワーカーによって要求が中断されるため、潜在的な待機時間の問題が発生する可能性があります。 この問題に対処するには、擬似サブパスとして share_target を設定し、そのパスに特化したサービス ワーカーを登録することを検討してください。 この方法では、他の呼び出しに同じフェッチ ハンドラーを登録せずに、共有対象のフェッチ ハンドラーを使用できます。

PWA アプリのサンプル

GitHub の PWA ロゴ プリンター サンプル アプリでは、PWA と Windows Share Sheet を統合する方法を示します。 このアプリを使用すると、ユーザーは PWA ロゴをプリンターで印刷できます。 このアプリでは、Windows Share Sheet を使用してロゴを他のアプリと共有します。

関連項目