WIP: feat: add periodicSync service

env.d.ts

@@ -8,3 +8,25 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+interface SyncManager {
+  getTags(): Promise<string[]>;
+  register(tag: string, options?: { minInterval: number }): Promise<undefined>;
+  unregister(tag: string): Promise<void>;
+  getTags(): Promise<Array<string>>;
+}
+
+interface ServiceWorkerRegistration {
+  readonly sync: SyncManager;
+  readonly periodicSync: SyncManager;
+}
+
+interface SyncEvent extends ExtendableEvent {
+  readonly lastChance: boolean;
+  readonly tag: string;
+}
+
+interface ServiceWorkerGlobalScopeEventMap {
+  sync: SyncEvent;
+  periodicSync: SyncEvent;
+}

src/services/periodicSync.ts

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+
+const MIN_INTERVAL = 24 * 60 * 60 * 1000;
+const registration = ref<ServiceWorkerRegistration | null>(null);
+
+async function isActive(tag: string) {
+  if (!registration.value) registration.value = await navigator.serviceWorker.ready;
+  const tags: string[] = await registration.value.periodicSync.getTags();
+  return tags.includes(tag);
+}
+
+async function register(tag: string, minInterval = MIN_INTERVAL) {
+  if (!registration.value) registration.value = await navigator.serviceWorker.ready;
+  return registration.value.periodicSync.register(tag, { minInterval });
+}
+
+async function unregister(tag: string) {
+  if (!registration.value) registration.value = await navigator.serviceWorker.ready;
+  return registration.value.periodicSync.unregister(tag);
+}
+
+export function usePeriodicSync(tag: string) {
+  return {
+    isActive: () => isActive(tag),
+    register: () => register(tag),
+    unregister: () => unregister(tag)
+  };
+}

src/sw.ts

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from "workbox-precaching";
 import { NavigationRoute, registerRoute } from "workbox-routing";
 import { CacheFirst } from "workbox-strategies";
@@ -8,6 +9,11 @@ self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
 });
 
+self.addEventListener("periodicsync", (event) => {
+  const promiseChain = self.registration.showNotification(`${dayjs().format("dddd HH:mm:ss")} Test`);
+  (event as ExtendableEvent).waitUntil(promiseChain);
+});
+
 // self.__WB_MANIFEST is default injection point
 precacheAndRoute(self.__WB_MANIFEST);