Send A Notification when PWA is Closed

Question

I have made a PWA Todo List App (Link To App) using Angular. I am now planning on adding Notifications which can reach the user when the app is closed. Since it is a PWA which works offline, I cannot depend on Push Notifications. Thanks in advance

Answer 1

You can make use of Web Periodic Background Sync API You can run this feature offline too and even app is closed, it doesn't require backend server for push as it triggers by the service worker periodically (min 24 hr I guess)

in your project files register sync event:

registration.periodicSync.register(constants.periodicBgSyncEventName, {
    minInterval: syncMinInterval,
    networkState: "any",
});

in your service worker file listen to the sync and show web notification:

self.addEventListener("periodicsync", (event) => {
  if (event.tag === constants.periodicBgSyncEventName) {
    self.registration.showNotification("Wake Time !!!", {
      body: `Hi, Good Morning`,
    });
  }
});

Note - In order to use this Periodic Sync API you need to install the PWA first.