システムレベルの共有 UI で PWA をプラットフォーム固有のアプリの横に表示する方法
Web Share Target API を使用すると、インストール後にユーザーのシステムレベルの共有シートにプログレッシブ ウェブアプリを表示できます。リクエストを受信できるサーバーが存在する場合は非常に便利ですが、存在しない場合、動作させるのははるかに困難です。
この記事では、ウェブアプリにオフライン サポートを追加するための JavaScript ライブラリ セットである Workbox を使用して、Service Worker 内に完全に存在する共有ターゲット URL を作成します。これにより、静的サイトとシングルページ アプリは、専用のサーバー エンドポイントなしで共有ターゲットとして機能できます。
同じページ
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 Casap(Unsplash)