How to trigger desktop notification 24 hours later without backend server?

Question

Assuming:

1. User has allowed notifications on my website.
2. Service worker is installed and ready.
3. User sets a client side reminder to be reminded 24 hours from now.
4. No backend service or server to push the notification to the user.

How can I trigger a desktop notification if there is no backend server to push that notification? Is this possible?

The service worker will be shutdown by the browser if provided a timeout/interval and the web-alarm/task-scheduler specification is not yet ready for use. Is there no client side only approach to trigger a notification at some designated time in the future?

Is there a desktop notification that is strictly not a "push notification"? A push notification, by nature, is pushed from a server. Can a notification be triggered from the client side?

Answer 1

I do not believe this is possible at this point in time.

Push notifications are specified in RFC8030, from its abstract:

This document describes a simple protocol for the delivery of real-
time events to user agents. This scheme uses HTTP/2 server push.

Which implies the requirement for a server supporting HTTP/2 push.

I do love to rant at Javascript, and I do not seem to be able to find an Javascript implementation of an HTTP2 server to run in the browser (there is for node), which is a shame for me, and would be awesome to mock about.

So, looking for fame, http2-server.js is missing.

Answer 2

You might be able to consider using localStorage. However, this is only beneficial for users that utilize the same device and browser.

Below is a function that kicks off on page load. If you want it to occur periodically throughout a session, you could wrap it into a setInterval and check periodically. This is assuming it needs to be exactly 24 hours later to the millisecond.

// on page load
window.onload = () => {
    const dayMs = 24*60*60*1000; // 1 day in milliseconds
    const notificationTimer = localStorage.getItem('notificationTimer');
    if(notificationTimer){
        const sendNotification = (Date.now() - (new Date(notificationTimer)).getTime()) > dayMs;
        if(sendNotification){
            const notification = new Notification('Displaying next day reminder from yesterday');
        }
    }

};

When the user selects the next day reminder you can then set the notificationTimer:

localStorage.setItem(notificationTimer, Date.now());

You'd have to make some caveats about the next day reminder not working across browsers or devices, which may or may not be desirable.