Service Workerのポーリングがタブ非アクティブ時に止まる問題

Question

Service Worker内でsetIntervalを使ってポーリング処理を実装しています。タブがアクティブなときは正常に動作しますが、非アクティブ（別タブや別ウィンドウに切り替え）にすると止まってしまいます。

奇妙な挙動

DevToolsを別ウィンドウで開いて監視していると、タブが非アクティブでもポーリングが継続します。DevToolsを閉じると止まります。

コード

sw.js

var timer = null;
var baseId = null;
var apiUrl = null;
var interval = 60000;

self.addEventListener('message', function(e) {
    var data = e.data;
    if (data.type === 'start') {
        apiUrl = data.apiUrl;
        interval = data.interval;
        if (data.baseId !== null && data.baseId !== undefined) baseId = data.baseId;
        startPolling();
    }
    if (data.type === 'stop') {
        stopPolling();
    }
});

function startPolling() {
    stopPolling();
    poll();
    timer = setInterval(poll, interval);
}

function stopPolling() {
    if (timer) { clearInterval(timer); timer = null; }
}

function poll() {
    fetch(apiUrl)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (baseId === null) { baseId = data.id; return; }
            if (baseId !== null && data.id > baseId) {
                stopPolling();
                self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(function(clients) {
                    clients.forEach(function(client) {
                        client.postMessage({ type: 'new_posts' });
                    });
                });
            }
        })
        .catch(function(e) {});
}

ページ側（layout.html）

navigator.serviceWorker.register('/sw.js').then(function(reg) {
    // 登録
});

navigator.serviceWorker.ready.then(function(reg) {
    sw = reg.active;
    if (sw) sw.postMessage({ type: 'start', apiUrl: apiUrl, interval: interval, baseId: baseId });
});

navigator.serviceWorker.addEventListener('message', function(e) {
    if (e.data.type === 'new_posts') showNotification();
});

環境

• Chrome（最新）
• HTTPS環境
• Service WorkerのスコープはサイトルートURL（/sw.jsをルートに配置）

質問

1. DevToolsを開いているときだけ動く原因はなんでしょうか？
2. Service Worker内のsetIntervalをタブ非アクティブ時も動かし続ける方法はありますか？
3. Push API以外で実現する方法はありますか？

最終的にやりたいのはYahoo!メールのように、タブが非アクティブでもタブのアイコンにバッジが付く挙動です。
通知許可はしていない状態です。現在はService Worker内でsetIntervalを使ってポーリングし、新着を検知したらcanvasでファビコンに色丸を追加する実装をしています。タブがアクティブなときは動作しますが、非アクティブだと止まってしまいます。