Search code examples
javascriptreactjsnotificationsjob-schedulingweb-notifications

How to schedule recurring web notification in React locally?


I'm trying to build a React web application that would notify the user every day on a set time without the need to be connected to a server.

For example: The user sets that he/she wants to be notified every day at 5 pm. The application would then somehow locally set this recurring web notification. The user would be notified even if the device isn't connected to the server and even if the web app isn't open.

I'm a beginner in React development. I've read that this might somehow be done with a service worker but I haven't found any way to set a recurring notification locally.

I tried packages such as node-schedule or react-browser-notifications but I haven't found a way to use them with a service worker.

So my question is the following: Is it possible to set recurring web notifications locally? If so, how would you do that?

import React, { Component } from "react";

class NotificationScheduler extends Component {
  constructor() {
    super();
    this.state = {
      // information about the notification time...
    };

    this.setNotification = this.setNotification.bind(this);
  }

  setNotification = () => {
    // What should be here?
  };

  render() {
    return <Button onClick={this.setNotification}>{"Schedule notitication"}</Button>;
  }
}


Solution

  • Apparently there is no way to do it locally in browsers because browsers don't support time triggers in service workers.

    That being said, these Notification Triggers are in development but it's very unlikely that we will see them anytime soon.

    You can read more on that here: https://web.dev/notification-triggers/

    So if you are trying to create something like regular notifications, you will have to send push notifications from the server every time.

    If anyone has updates or different information about this topic, more answers are appreciated :)