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

Chrome に通知とプッシュ メッセージが導入されてから、Google は多くのことを学びました。デスクトップ クラスのデバイスに関する具体的なフィードバックとして、ユーザーが積極的に閉じるまで、通知がユーザーの画面に残り、表示されるというものがありました。

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

通知の仕様が最近更新され、デベロッパーは通知がシステムによって自動的に閉じられないことを指定できるようになりました

通知には、最初は設定されていない、インタラクションの必要性の設定フラグが関連付けられています。設定すると、十分に大きな画面のデバイスで、ユーザーが通知を有効または破棄するまで通知をすぐに利用できるようにします。

奇妙に思えるかもしれませんが、これは、特に指示がない限り、通知は短時間後に非表示にされることを意味します。

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

Android 版 Chrome では、通知が通知トレイ領域に最小化されるため、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'
        });
        });
    }
    });
}

デモを試す