次の方法で共有

プログレッシブ Web アプリと Windows 共有の統合

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

共有ターゲットとは

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

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

コンテンツを共有するために、PWA はコンテンツ (テキスト、リンク、ファイルなど) を生成し、共有コンテンツをオペレーティング システムに渡します。 オペレーティング システムを使用すると、ユーザーはそのコンテンツを受け取るために使用するアプリを決定できます。 PWA は 、Web 共有 API を使用して、Windows での共有シートの表示をトリガーできます。 Web 共有 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 が起動します。 GET HTTP 要求は、action プロパティで指定された URL に対して行われます。 共有データは、 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 共有シートを使用してロゴを他のアプリと共有します。

こちらも参照ください

  • Last updated on