最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Delay an HTML5 notification? - Stack Overflow

programmeradmin3浏览0评论

I've been looking at the state of HTML notifications and service workers, and was wondering - is it possible to show a notification on a delay? Basically, I would like to be able to say "remind me in 30 minutes" (or whatever), then push a notification to the user 30 minutes later. That could be scheduled immediately, but I'm not seeing any functionality that allows it.

Am I missing something or is it impossible in the current state of (particularly) Chrome APIs?

I've been looking at the state of HTML notifications and service workers, and was wondering - is it possible to show a notification on a delay? Basically, I would like to be able to say "remind me in 30 minutes" (or whatever), then push a notification to the user 30 minutes later. That could be scheduled immediately, but I'm not seeing any functionality that allows it.

Am I missing something or is it impossible in the current state of (particularly) Chrome APIs?

Share Improve this question edited Aug 31, 2015 at 15:22 sideshowbarker 88.6k30 gold badges215 silver badges212 bronze badges asked Jul 21, 2015 at 21:47 AlastairAlastair 6,1447 gold badges37 silver badges69 bronze badges 3
  • 1 Why not just send the notification via a timeout handler? – Pointy Commented Jul 21, 2015 at 21:49
  • @Pointy things like this suggest that it would not work: github./slightlyoff/ServiceWorker/issues/107 and in any case, it would presumably mean the service worker is constantly running in the background, which doesn't seem so good for mobile devices. – Alastair Commented Jul 21, 2015 at 21:51
  • See github./slightlyoff/BackgroundSync/blob/master/… for a possible approach, with a few large caveats: it's not currently implemented in any browser, it doesn't give you a guarantee about exact execution time, and it's meant for recurring events (so you'd need to unregister after the first event fired). – Jeff Posnick Commented Jul 22, 2015 at 15:44
Add a ment  | 

2 Answers 2

Reset to default 6

This is possible but not straightforward with service workers, at least in their present form. It's not straightforward because a service worker can't keep itself awake for half an hour or wake itself up with a setTimeout or setInterval. The browser will just shut the worker down and will keep no record of any timeouts or intervals. You could wake it up with a message from an open tab, but you said that you don't want to have to have to keep an open tab, and if you assume an open tab then why even bother with the service worker anyway? As Jeff Posnick suggested in a ment, you could perhaps eventually use the Sync or PeriodicSync APIs, but, as he also points out, they aren't implemented yet and aren't really intended for this anyway.

You can acplish what you want in current versions of Chrome using the Push API, but you'll have to include the server in the loop and set yourself up with a push notification service (i.e. GCM). Here's how it would work, roughly:

  • When you decide to delay a notification, let the server know about it
  • After a delay, the server sends out a push message for your user
  • The service worker is woken up in response to the push and creates a new notification

This last part will be a hassle, because currently you can't actually send any kind of payload with a push, so your service worker will need some way of figuring out what the notification is supposed to be. Maybe the server has a list of snoozed notifications and the service worker can get it from there, or maybe you saved them in IndexedDB.

Adapted from https://developer.cdn.mozilla/media/uploads/demos/e/l/elfoxero/c17223c414d8ddafb7808972b5617d9e/html5-notifications_1400214081_demo_package/:

<script>
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;

    function show() {
        window.setTimeout(function () {
            var instance = new Notification("Hello World!");
        }, 5000);

        return false;
    }
</script>

<a href="#" onclick="return show()">Notify me!</a>
发布评论

评论列表(0)

  1. 暂无评论