通知 needInteraction - デスクトップでのスムーズな通知 UX

Chrome に Notifications と Push Messaging が導入されて以来、私たちは多くのことを学んできました。デスクトップ クラスのデバイスに関する特定のフィードバックの 1 つは、ユーザーが積極的に拒否するまで、通知がユーザーの画面上に留まるというものでした。

ページが開いているときに、通知を自動的に閉じるシンプルな JavaScript タイマーを作成できます。しかし、今は Service Worker が存在します。つまり、ウェブアプリはウィンドウの存続期間を過ぎても存続でき、リソースを節約するために Service Worker は可能な限り早くスリープ状態になります。つまり、ユーザーに優れたエクスペリエンスを提供するには、別の方法が必要です。

通知の仕様が最近更新され、デベロッパーは通知がシステムによって自動的に閉じられるように指定する機能が追加されました。

通知に操作設定フラグが関連付けられていますが、最初は未設定です。設定されている場合、画面の大きなデバイスで、ユーザーが通知を有効にするか非表示にするまで、通知をすぐに利用できることを示します。

これは奇妙に思えるかもしれませんが、特に断りのない限り、通知はしばらくすると表示から削除する必要があることを意味します。

Chrome 47(2015 年 10 月ベータ版)で requireInteraction オプションがサポートされるようになりました。明示的に指定し、かつ true に設定しない限り、デスクトップのすべての通知は約 20 秒後に閉じられます。興味深いのは、Chrome が最近、すべてのデスクトップ プラットフォーム(ChromeOS を除く)から通知センターを削除したことです。つまり、最小化された通知は閉じられるとみなされ、Service Worker の getNotifications 呼び出しでアクセスできなくなります。

Chrome for Android では、通知は通知トレイ領域で最小化されるため、requireInteraction オプションは無視されます。

navigator.serviceWorker.register('sw.js');

function showNotifications() {
    Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('requireInteraction: true', {
            body: 'Requires interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: true,
            tag: 'require-interaction'
        });

        registration.showNotification('requireInteraction: false', {
            body: 'Does not require interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: false,
            tag: 'no-require-interaction'
        });
        });
    }
    });
}

デモをお試しください