OS の統合

ウェブアプリは幅広くリーチできます。複数のプラットフォームで実行します。リンクで簡単に共有できます。しかし、従来はオペレーティング・システムとの統合ができませんでした。つい最近までインストールすらできませんでした。幸いなことに、このインテグレーションを利用して、PWA に便利な機能を追加できるようになりました。それらのオプションをいくつか見ていきましょう

ファイル システムの操作

ファイルを使用した一般的なユーザー ワークフローは次のようになります。

  • デバイスのファイルやフォルダを選択して直接開きます。
  • これらのファイルやフォルダに変更を加えて、変更内容を直接保存します。
  • 新しいファイルやフォルダを作成する。

File System Access API が導入される前は、ウェブアプリではこの操作は不可能でした。ファイルを開くにはファイルのアップロードが必要で、変更を保存するにはユーザーがファイルをダウンロードする必要があります。また、ユーザーのファイルシステムに新しいファイルやフォルダを作成するためのアクセス権がウェブからまったくありませんでした。

ファイルを開く

ファイルを開くには、window.showOpenFilePicker() メソッドを使用します。このメソッドには、ボタンのクリックなどのユーザー操作が必要です。ファイルを開くための残りの設定は次のとおりです。

  1. ファイル システム アクセスのファイル選択ツール API からファイル ハンドルを取得します。これにより、ファイルに関する基本情報を確認できます。
  2. ハンドルの getFile() メソッドを使用すると、File という特別な種類の Blob を取得できます。これには、ファイルに関する追加の読み取り専用プロパティ（名前や最終更新日など）が含まれます。これは blob であるため、Blob メソッド（text() など）を呼び出してコンテンツを取得できます。
// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

変更を保存しています

ファイルに変更を保存するには、ユーザー操作も必要です。その後:

  1. ファイル ハンドルを使用して FileSystemWritableFileStream を作成します。
  2. ストリームに変更を加えます。インプレース ファイルは更新されません。代わりに一時ファイルが作成されます
  3. 最後に、変更が完了したらストリームを閉じます。これにより、変更が一時的から永続的なものに移行されます。

次のコードで見てみましょう。

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

ファイル処理

File System Access API を使用するとアプリ内からファイルを開くことができますが、その逆の場合はどうでしょうか。ユーザーは、お気に入りのアプリをファイルを開くデフォルトとして設定したいと考えています。ファイル処理 API は、インストール済みの PWA を可能にする試験運用版の API です。 ユーザーのデバイスでファイル ハンドラとして登録し、ウェブアプリ マニフェストで PWA がサポートする MIME タイプとファイル拡張子を指定します。サポートされている拡張機能のカスタム ファイル アイコンを指定できます。

登録が完了すると、インストールした PWA がユーザーのファイル システムにオプションとして表示され、ユーザーはファイルを直接開けるようになります。 PWA がテキスト ファイルを読み取るためのマニフェスト設定の例を次に示します。

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

URL の処理

URL 処理を使用すると、PWA はオペレーティング システムからスコープに含まれるリンクをキャプチャし、デフォルトのブラウザのタブではなく PWA ウィンドウ内にレンダリングできます。たとえば、PWA にリンクするメッセージを受信した場合や、PWA でディープリンク（特定のコンテンツを指す URL）をクリックすると、コンテンツはスタンドアロン ウィンドウで開きます。

この動作は、ユーザーが Chrome で PWA をインストールする場合など、WebAPK が使用される場合に Android で自動的に有効になります。iOS または iPadOS にインストールされた PWA の URL を Safari からキャプチャすることはできません。

パソコンのブラウザ向けに、ウェブブラウザ コミュニティが新しい仕様を作成しました。この仕様は現在試験運用版です。マニフェスト ファイルの新しいメンバー url_handlers が追加されます。このプロパティには、PWA がキャプチャするオリジンの配列が必要です。PWA のオリジンは自動的に付与されます。他のオリジンは、web-app-origin-association という名前のファイルを介した処理を受け入れる必要があります。 たとえば、PWA のマニフェストが web.dev でホストされていて、app.web.dev オリジンを追加する場合は、次のようになります。

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

この場合、ブラウザは app.web.dev/.well-known/web-app-origin-association にファイルが存在するかどうかを確認し、PWA スコープ URL からの URL 処理を受け入れます。このファイルはデベロッパーが作成する必要があります。ファイルの例を次に示します。

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

URL プロトコルの処理

URL 処理は標準の https プロトコル URL でも機能しますが、pwa:// などのカスタム URI スキームを使用することもできます。一部のオペレーティング システムでは、アプリがスキームを登録することで、インストール済みのアプリがこの機能を利用できるようになります。

PWA の場合、この機能は URL プロトコル ハンドラ API を使用して有効にします。この API はデスクトップ デバイスでのみ利用可能です。モバイル デバイス向けのカスタム プロトコルを許可するには、アプリストアで PWA を配布する必要があります。

登録するには、registerProtocolHandler() メソッドを使用するか、マニフェストで protocol_handlers メンバーを使用して、PWA のコンテキストに読み込む目的のスキームと URL を指定します。次に例を示します。

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

URL from-protocol を適切なハンドラにルーティングして、PWA でクエリ文字列 value を取得できます。%s は、オペレーションをトリガーしたエスケープ URL のプレースホルダであるため、<a href="web+pwa://testing"> などのリンクがある場合は、PWA で /from-protocol?value=testing が開きます。

他のアプリの呼び出し

URI スキームを使用すると、ユーザーの環境内でインストールされている他のアプリ（PWA かどうか）に接続できます。ほぼ不可能です必要な操作は、リンクを作成するか navigator.href を使用して、必要な URI スキームを指定し、URL エスケープ形式で引数を渡すだけです。

通話には tel:、メール送信には mailto:、テキスト メッセージには sms: など、よく知られた標準スキームを使用できます。他のアプリのよく知られているメッセージング、地図、ナビゲーション、オンライン会議、ソーシャル ネットワーク、アプリストアなどの URL スキーム。

ウェブ共有

対応ブラウザ

  • Chrome: 89。 <ph type="x-smartling-placeholder">
  • Edge: 93。 <ph type="x-smartling-placeholder">
  • Firefox: 旗の裏側。
  • Safari: 12.1。 <ph type="x-smartling-placeholder">

ソース

Web Share API を使用すると、PWA は共有チャネルを介して、デバイス内の他のインストール済みアプリにコンテンツを送信できます。

この API は、share メカニズムを備えたオペレーティング システム（Android、iOS、iPadOS、Windows、ChromeOS など）でのみ使用できます。 次のものを含むオブジェクトを共有できます。

  • テキスト（title プロパティと text プロパティ）
  • URL（url プロパティ）
  • ファイル（files プロパティ）。

現在のデバイスがテキストなどの単純なデータを共有できるかどうかを確認するには、navigator.share() メソッドの存在を確認します。共有するには、navigator.canShare() メソッドの有無をチェックします。

共有アクションをリクエストするには、navigator.share(objectToShare) を呼び出します。この呼び出しは、undefined で解決されるか、例外で拒否される Promise を返します。

Android 版 Chrome と iOS 版 Safari でウェブ共有機能によって共有シートが開かれている様子。

ウェブ共有ターゲット

Web Share Target API を使用すると、PWA が PWA であるかどうかにかかわらず、その PWA をそのデバイス上の別のアプリからの共有オペレーションのターゲットにできます。PWA は別のアプリから共有されたデータを受け取ります。

現時点では、WebAPK および ChromeOS を搭載した Android で利用でき、ユーザーが PWA をインストールした後にのみ機能します。共有ターゲットは、アプリのインストール時にブラウザによってオペレーティング システムに登録されます。

ウェブ共有ターゲットのドラフト仕様で定義されている share_target メンバーを使用して、マニフェストでウェブ共有ターゲットをセットアップしました。share_target は、次のプロパティを持つオブジェクトに設定されます。

action
共有データを受け取ることが想定される PWA ウィンドウで読み込まれる URL。
method
GET、POST、PUT などの HTTP 動詞メソッドがアクションに使用されます。
enctype
（省略可）パラメータのエンコードの型はデフォルトで application/x-www-form-urlencoded ですが、POST などのメソッドに対して multipart/form-data に設定することもできます。
params
共有データ（Web Share のキー title、text、url、files から）を、ブラウザが URL（method: 'GET' 上）またはリクエストの本文で渡す引数に、選択したエンコードを使用してマッピングするオブジェクト。
で確認できます。

たとえば、マニフェストに次のように追加することで、PWA に対して共有データ（タイトルと URL のみ）を受け取るように定義できます。

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

前述のサンプルで、システム内のいずれかのアプリでタイトル付きの URL を共有しているときに、ユーザーがダイアログから PWA を選択すると、ブラウザはオリジンの /receive-share/?shared_title=AAA&shared_url=BBB への新しいナビゲーションを作成します。ここで、AAA は共有タイトル、BBB は共有 URL です。JavaScript を使用して、URL コンストラクタで解析することで window.location 文字列からデータを読み取ることができます。

ブラウザは、マニフェストの PWA 名とアイコンを使用して、オペレーティング システムの共有エントリにフィードします。この目的のために別のセットを選択することはできません。

詳細な例とファイルの受信方法については、Web Share Target API を使用して共有データを受信するをご覧ください。

連絡先ピッカー

対応ブラウザ

  • Chrome: サポートされていません。 <ph type="x-smartling-placeholder">
  • Edge: サポートされていません。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

Contact Picker API を使用すると、ユーザーのすべての連絡先を含むネイティブ ダイアログを表示するようデバイスにリクエストし、ユーザーが 1 つ以上の連絡先を選択できるようになります。これにより、PWA はこれらの連絡先から必要なデータを受け取れるようになります。

Contact Picker API は主にモバイル デバイスで利用可能です。すべての処理は、互換性のあるプラットフォームの navigator.contacts インターフェースを介して行います。

navigator.contacts.getProperties() でクエリに使用できるプロパティをリクエストし、必要なプロパティのリストを使用して、単一または複数の連絡先の選択をリクエストできます。

プロパティの例としては、name、email、address、tel などがあります。ユーザーに 1 つ以上の連絡先を選択するよう求める場合は、navigator.contacts.select(properties) を呼び出して、取得するプロパティの配列を渡すことができます。

次のサンプルは、選択ツールが受信した連絡先を一覧表示します。

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

リソース