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

Indeed, Service Worker provides a range of powerful features, particularly in enhancing offline experiences and background processing for web applications. To trigger desktop notifications 24 hours later without a backend server, we can leverage Service Worker in conjunction with the browser's Notifications API. Here are the steps to achieve this functionality:

Step 1: Register Service Worker

First, ensure your website registers a Service Worker. This is a prerequisite for using Service Worker functionality.

javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered successfully:', registration);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

Step 2: Request Notification Permissions

Before sending notifications to users, we need to obtain their permission. This can be done using the Notifications API.

javascript
Notification.requestPermission().then(function(permission) {
  if (permission === "granted") {
    console.log("Notification permissions granted");
  } else {
    console.log("Notification permissions denied");
  }
});

Step 3: Schedule Notifications

By leveraging Service Worker, we can use setTimeout or setInterval to schedule notifications. However, due to the lifecycle of Service Worker, this approach may not be reliable. A better approach is to use the browser's Background Sync API or set timestamps via IndexedDB to periodically check if notifications should be triggered. However, these methods may require the user to revisit the website during this period.

If precise triggering 24 hours later is required, and the user may not visit the website for an extended period, we can consider using setTimeout, but this does not guarantee precision. Example code follows:

javascript
self.addEventListener('install', event => {
  event.waitUntil(
    self.skipWaiting() // Activate the new Service Worker as soon as possible
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    self.clients.claim() // Claim control of all clients
  );
});

self.addEventListener('message', event => {
  if (event.data && event.data.type === 'SCHEDULE_NOTIFICATION') {
    setTimeout(() => {
      self.registration.showNotification("24-hour notification", {
        body: "This is a notification triggered 24 hours later.",
        icon: "/path/to/icon.png"
      });
    }, 24 * 60 * 60 * 1000); // 24 hours later
  }
});

Step 4: Trigger the Scheduled Task

When users visit the website, a message can be sent from the frontend to the Service Worker to initiate the scheduled task.

javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then(function(registration) {
    registration.active.postMessage({type: 'SCHEDULE_NOTIFICATION'});
  });
}

Summary

By following these steps, we can trigger desktop notifications 24 hours later without backend support using Service Worker. However, due to its dependency on the lifecycle of Service Worker and user website visit behavior, this approach may not be the most reliable method for triggering notifications. If more reliable background task processing is required, consider migrating the application to an architecture that supports backend services or using periodic client-triggered checks.