次の方法で共有

Web アプリ マニフェストを使用して PWA を OS に統合する

  • [アーティクル]

プログレッシブ Web アプリ (PWA) には、PWA とオペレーティング システム (OS) の統合方法を定義する Web アプリ マニフェストが必要です。 この記事では、Web アプリ マニフェストとは何か、および Web アプリ マニフェストに含まれる必要なデータと省略可能なデータについて説明します。

Web アプリ マニフェスト ファイルは、デバイスにインストールされたときの PWA の外観と動作を制御します。 Web アプリ マニフェストは、アプリの名前、システム メニューでアプリを表すアイコンのファイルの場所、OS がタイトル バーで使用するテーマの色などの情報を提供します。

Web アプリ マニフェストは、マニフェスト リンクを使用して Web サイトの HTML ページから参照する必要がある JSON ファイルです。 Web サイトの HTML ページの <head> タグと </head> タグの間に次のコードを挿入して、マニフェスト ファイルにリンクします。

<link rel="manifest" href="/manifest.json">

Web アプリ マニフェスト ファイルの種類

Web アプリ マニフェストの内容は有効な JSON である必要がありますが、ファイル拡張子は .json または .webmanifestにすることができます。

.webmanifest拡張機能を使用する場合は、HTTP サーバーが MIME の種類で提供されていることを確認します。

マニフェスト メンバー

少なくとも、マニフェスト ファイルには次のマニフェスト メンバーが含まれている必要があります。

{
    "name": "My Sample PWA",
    "lang": "en-US",
    "start_url": "/"
}

次に、より多くのメンバーを含むマニフェスト ファイルの例を示します。

{
    "name": "My Sample PWA",
    "lang": "en-us",
    "short_name": "SamplePWA",
    "description": "A sample PWA for testing purposes",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#2f3d58",
    "background_color": "#2f3d58",
    "orientation": "any",
    "icons": [
        {
            "src": "/icon512.png",
            "sizes": "512x512"
        }
    ]
}

PWA は、次のような他のマニフェスト メンバーを使用してさらにカスタマイズできます。

メンバー 説明
name オペレーティング システムがアプリのアイコンの横に表示するために使用するアプリの名前。
short_name これは、 nameのための十分な領域がない場合にアプリの名前を表示するために使用できます。
description アプリの説明。
categories アプリが属するカテゴリの一覧。
icons さまざまなコンテキストで OS によって使用されるアイコン イメージ オブジェクトの配列。
screenshots 異なるコンテキストで OS によっても使用されるスクリーンショット イメージ オブジェクトの配列。
start_url オペレーティング システムがアプリを起動するときに に移動する必要がある推奨 URL。
scope アプリのナビゲーション スコープを定義します。 このスコープ外では、アクセスしたページは PWA ではなく通常の Web ページに戻ります。 既定値は start_url です。
display アプリの外観。 これにより、ユーザーに表示されるブラウザー UI の量が変更されます。
display_override デバイスでサポートされている内容に応じて、アプリの優先表示を決定するために使用されます。
theme_color アプリの既定のテーマの色。 これは、OS によるサイトの表示方法に影響します。
background_color スタイルシートが適用される前に、アプリが起動されるウィンドウの背景色。
orientation サポート デバイスでは、アプリの既定の向き (横向きや縦向きなど) が定義されます。
protocol_handlers アプリが関連付けられている定義済みまたはカスタム URI プロトコル スキームの一覧。
shortcuts ユーザーが実行できる一般的なタスクの一覧は、アプリ アイコンを右クリックするか長押しします。
share_target OS 共有ダイアログでコンテンツを共有するときにアプリが受け入れるデータの種類。
file_handlers アプリを起動できるファイルの種類。

マニフェスト メンバーの詳細については、MDN の Web アプリ マニフェストに関するページを 参照してください。

特定のプロトコル スキームを処理する

PWA をプロトコル ハンドラーとして登録できます。 アプリが登録されているプロトコル スキームを使用するリンクをユーザーがクリックすると、アプリが自動的に起動されます。 これにより、ユーザーはアプリの特定の部分や機能へのリンクを互いに簡単に共有できます。

プロトコル ハンドラーとして登録するには、 protocol_handlers マニフェスト メンバーを使用します。

{
    "protocol_handlers": [
        {
            "protocol": "mailto",
            "url": "/newEmail?to=%s"
        }
    ]
}

詳細については、「 プログレッシブ Web アプリでのプロトコルの処理」を参照してください。

ショートカットを使用して機能にすばやくアクセスする

ほとんどのオペレーティング システムでは、アプリのアイコンに接続されている右クリック メニューのショートカットを使用して、主要なアプリ機能にすばやくアクセスできます。 PWA でショートカットを使用するには、Web アプリ マニフェストに shortcuts メンバーを含めます。

次のコードは、Web アプリ マニフェストでショートカットを定義する方法を示しています。

"shortcuts": [
    {
        "name": "Play Later",
        "description": "View the list of podcasts you saved for later",
        "url": "/play-later",
        "icons": [
            {
                "src": "/icons/play-later.svg",
                "type": "image/svg+xml",
                "purpose": "any"
            }
        ]
    },
    {
        "name": "Subscriptions",
        "description": "View the list of podcasts available in your subscription",
        "url": "/subscriptions?sort=desc"
    }
]

詳細については、「 アプリのショートカットを定義する」を参照してください。

アプリを共有ターゲットとして識別する

ユーザーがネイティブ アプリケーションとリンクやファイルをすばやく共有できるようにするには、Web アプリ マニフェストで share_target オブジェクトを使用します。 action ページはフォームに似ています。 share_target オブジェクトでは、action ページと、action ページに渡されるパラメーターを定義します。

"share_target": {
    "action": "/share.html",
    "params": {
        "title": "name",
        "text": "description",
        "url": "link"
    }
}

上記のshare_target オブジェクトは、共有のaction ページとして/share.htmlを確立します。 この例では、その action ページに渡される 3 つのパラメーター ( title、 text、 url) も定義します。

共有ターゲット機能の使用方法の詳細については、「他の アプリとコンテンツを共有する」を参照してください。

アプリをファイルに関連付ける

PWA が特定のファイルの種類のファイル ハンドラーとして登録されている場合、オペレーティング システムは、Microsoft Word がファイル .docx 処理する方法と同様に、ユーザーがファイルを開いたときにアプリを自動的に起動できます。 ファイルを処理する PWA は、ユーザーに対するネイティブな感じがし、オペレーティング システムへの統合が向上します。

ファイルを処理するには、アプリを関連付けるファイル MIME の種類と拡張子を一覧表示し、アプリを起動する URL を定義します。

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

次に、 window.launchQueue() メソッドを使用してファイルを処理します。

if ('launchQueue' in window) {
    launchQueue.setConsumer(launchParams => {
        // Do something with launchParams.files ...
    });
}

詳細については、「 プログレッシブ Web アプリでファイルを処理する」を参照してください。