2018年10月23日 Google Chrome 70で実装されたネイティブアプリのようなデスクトップPWA

UI開発者泉口

2018年5月に開催されたGoogle I/O 2018のPWAに関連するセッションの通り、10月16日にリリースされたGoogle Chrome 70において正式にWindows、LinuxデスクトップへのPWAインストールが可能になりました。（macOSのサポートはGoogle Chrome 72以降）

実際にはWebアプリ・WebサイトがGoogle Chromeブラウザを介してChromeアプリとして追加され、当該アプリへのショートカットをデスクトップにアイコンとして配置する機能ですが、今までAndroidやiOSでは使用できなかったWebアプリ・Webサイトでもネイティブアプリのような操作感をユーザーに提供できるようになります。

2018年10月現在、公開されている代表的なデスクトップPWAの1つとして「Twitter Lite」があります。元々Android向けのPWAとして存在していましたが、現在ではWindows 10のストアで配信されるなど「デスクトップでもモバイルでも使えるアプリ」として成り立っているように感じます。

オフライン、プッシュ通知など元来のPWA特有の機能はもちろん、デスクトップPWAでは次のようなメリットもあります。

アドレスバー、タブのない統合された新しいウィンドウ

ウィンドウからアドレスバー及びタブが消え、ブックマークバーも表示しなくなるため、Webアプリ・Webサイトそのものに集中して閲覧してもらうことが期待できます。
また、タスクバーにアイコンが表示され、アプリをタスクバーに固定することでブラウザを立ち上げることなく単体のアプリとして起動することもできますし、スタートメニューに登録することでPC起動と同時にデスクトップPWAを起動することも可能になります。

日に一度必ず確認するWebサイトやツールなど、都度ブラウザを立ち上げてブックマークを開くことなく閲覧できるとても便利な機能と言えます。

開発者ツールを用いることなく誰でも簡単にインストール

従来のAndoroidのような条件に応じたインストールではなく、Webアプリ・Webサイトに設置した「ボタンなどのユーザーのアクション」によってインストールすることができます。

次のコードはボタンを押下することでPWAをインストールする方法の一例です。

let deferredPrompt;

// `beforeinstallprompt`が発火したのち、イベントを変数に格納する
window.addEventListener('beforeinstallprompt', function (event) {
    event.preventDefault();

    deferredPrompt = event;
});

// 要素の押下に応じて`prompt`メソッドを実行する
document.getElementById('myButton').addEventListener('click', function () {
    if (deferredPrompt) {
        deferredPrompt.prompt();
    }
});

このコードではclickに応じてインストールを促すプロンプトを表示しますが、例えばevent.prompt()のように直接プロンプトを表示させようとしたり、mouseenterのような強制的にインストールを促す手法を取ろうとした場合、コンソールには「The prompt() method must be called with a user gesture」のようにエラーが表示され、インストールすることはできません。

デスクトップPWAの今後はキーボードショートカットや、バッジなどの追加も予定されています。HTTPS環境や、マニフェストの記述が必要であったり、何かと手間を求められるPWAですが、その恩恵は大きく、デスクトップへのインストールが追加された今、対応しない方がデメリットになるかもしれませんね。