Web アプリマニフェストを使用してプログレッシブ Web アプリをオペレーティングシステムに統合する

[アーティクル]
03/15/2023

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

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

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

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

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

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

マニフェストメンバー

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

{
    "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 Appsでのプロトコルの処理」を参照してください。

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

ほとんどのオペレーティングシステムでは、アプリのアイコンに接続されている右クリックメニューのショートカットを使用して、主要なアプリ機能にすばやくアクセスできます。 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。この例では、そのページtitleに渡される action 3 つのパラメーター (、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 Appsでファイルを処理する」を参照してください。

Web アプリ マニフェストを使用してプログレッシブ Web アプリをオペレーティング システムに統合する

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

マニフェスト メンバー

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