Fix push notification on safari (#1110)

* fix push notificaiton in safari

* text fix notification

* restore actions

Author: maxence-charriere

docs/src/notifications-page.go

@@ -103,13 +103,13 @@ func (p *notificationsPage) testNotification(ctx app.Context, e app.Event) {
 		Title: fmt.Sprintln("go-app test", n),
 		Body:  fmt.Sprintln("Test notification for go-app number", n),
 		Path:  "/notifications#example",
-		// Actions: []app.NotificationAction{
-		// 	{
-		// 		Title:  "test",
-		// 		Action: ":test",
-		// 		Path:   "/notifications",
-		// 	},
-		// },
+		Actions: []app.NotificationAction{
+			{
+				Title:  "test",
+				Action: ":test",
+				Path:   "/notifications",
+			},
+		},
 	})
 }
 

docs/web/app.wasm

@@ -1643,7 +1643,7 @@ <h2 id="pkg-constants">Constants</h2>
 
 				<pre>const (
     <span class="comment">// The default template used to generate app-worker.js.</span>
-    <span id="DefaultAppWorkerJS">DefaultAppWorkerJS</span> = &#34;// -----------------------------------------------------------------------------\n// PWA\n// -----------------------------------------------------------------------------\nconst cacheName = \&#34;app-\&#34; + \&#34;{{.Version}}\&#34;;\nconst resourcesToCache = {{.ResourcesToCache}};\n\nself.addEventListener(\&#34;install\&#34;, async (event) =&gt; {\n  try {\n    console.log(\&#34;installing app worker {{.Version}}\&#34;);\n    await installWorker();\n    await self.skipWaiting();\n  } catch (error) {\n    console.error(\&#34;error during installation:\&#34;, error);\n  }\n});\n\nasync function installWorker() {\n  const cache = await caches.open(cacheName);\n  await cache.addAll(resourcesToCache);\n}\n\nself.addEventListener(\&#34;activate\&#34;, async (event) =&gt; {\n  try {\n    await deletePreviousCaches(); // Await cache cleanup\n    await self.clients.claim(); // Ensure the service worker takes control of the clients\n    console.log(\&#34;app worker {{.Version}} is activated\&#34;);\n  } catch (error) {\n    console.error(\&#34;error during activation:\&#34;, error);\n  }\n});\n\nasync function deletePreviousCaches() {\n  const keys = await caches.keys();\n  await Promise.all(\n    keys.map(async (key) =&gt; {\n      if (key !== cacheName) {\n        try {\n          console.log(\&#34;deleting\&#34;, key, \&#34;cache\&#34;);\n          await caches.delete(key);\n        } catch (err) {\n          console.error(\&#34;deleting\&#34;, key, \&#34;cache failed:\&#34;, err);\n        }\n      }\n    })\n  );\n}\n\nself.addEventListener(\&#34;fetch\&#34;, (event) =&gt; {\n  event.respondWith(fetchWithCache(event.request));\n});\n\nasync function fetchWithCache(request) {\n  const cachedResponse = await caches.match(request);\n  if (cachedResponse) {\n    return cachedResponse;\n  }\n  return await fetch(request);\n}\n\n// -----------------------------------------------------------------------------\n// Push Notifications\n// -----------------------------------------------------------------------------\nself.addEventListener(\&#34;push\&#34;, (event) =&gt; {\n  if (!event.data || !event.data.text()) {\n    return;\n  }\n\n  const notification = JSON.parse(event.data.text());\n  if (!notification) {\n    return;\n  }\n\n  event.waitUntil(\n    showNotification(self.registration, notification)\n  );\n});\n\nself.addEventListener(\&#34;message\&#34;, (event) =&gt; {\n  const msg = event.data;\n  if (!msg || msg.type !== \&#34;goapp:notify\&#34;) {\n    return;\n  }\n\n  event.waitUntil(\n    showNotification(self.registration, msg.options)\n  );\n});\n\nasync function showNotification(registration, notification) {\n  const title = notification.title || \&#34;\&#34;;\n\n  let actions = [];\n  for (let i in notification.actions) {\n    const action = notification.actions[i];\n    actions.push({\n      action: action.action,\n      path: action.path,\n    });\n    delete action.path;\n  }\n\n  notification.data = notification.data || {};\n  notification.data.goapp = {\n    path: notification.path,\n    actions: actions,\n  };\n  delete notification.title;\n  delete notification.path;\n\n  await registration.showNotification(title, notification);\n}\n\nfunction sleep(ms) {\n  return new Promise((resolve) =&gt; setTimeout(resolve, ms));\n}\n\nself.addEventListener(\&#34;notificationclick\&#34;, (event) =&gt; {\n  event.notification.close();\n\n  const notification = event.notification;\n  let path = notification.data.goapp.path;\n\n  for (let i in notification.data.goapp.actions) {\n    const action = notification.data.goapp.actions[i];\n    if (action.action === event.action) {\n      path = action.path;\n      break;\n    }\n  }\n\n  event.waitUntil(\n    clients\n      .matchAll({\n        type: \&#34;window\&#34;,\n      })\n      .then((clientList) =&gt; {\n        for (var i = 0; i &lt; clientList.length; i++) {\n          let client = clientList[i];\n          if (\&#34;focus\&#34; in client) {\n            client.focus();\n            client.postMessage({\n              goapp: {\n                type: \&#34;notification\&#34;,\n                path: path,\n              },\n            });\n            return;\n          }\n        }\n\n        if (clients.openWindow) {\n          return clients.openWindow(path);\n        }\n      })\n  );\n});&#34;
+    <span id="DefaultAppWorkerJS">DefaultAppWorkerJS</span> = &#34;// -----------------------------------------------------------------------------\n// PWA\n// -----------------------------------------------------------------------------\nconst cacheName = \&#34;app-\&#34; + \&#34;{{.Version}}\&#34;;\nconst resourcesToCache = {{.ResourcesToCache}};\n\nself.addEventListener(\&#34;install\&#34;, async (event) =&gt; {\n  try {\n    console.log(\&#34;installing app worker {{.Version}}\&#34;);\n    await installWorker();\n    await self.skipWaiting();\n  } catch (error) {\n    console.error(\&#34;error during installation:\&#34;, error);\n  }\n});\n\nasync function installWorker() {\n  const cache = await caches.open(cacheName);\n  await cache.addAll(resourcesToCache);\n}\n\nself.addEventListener(\&#34;activate\&#34;, async (event) =&gt; {\n  try {\n    await deletePreviousCaches(); // Await cache cleanup\n    await self.clients.claim(); // Ensure the service worker takes control of the clients\n    console.log(\&#34;app worker {{.Version}} is activated\&#34;);\n  } catch (error) {\n    console.error(\&#34;error during activation:\&#34;, error);\n  }\n});\n\nasync function deletePreviousCaches() {\n  const keys = await caches.keys();\n  await Promise.all(\n    keys.map(async (key) =&gt; {\n      if (key !== cacheName) {\n        try {\n          console.log(\&#34;deleting\&#34;, key, \&#34;cache\&#34;);\n          await caches.delete(key);\n        } catch (err) {\n          console.error(\&#34;deleting\&#34;, key, \&#34;cache failed:\&#34;, err);\n        }\n      }\n    })\n  );\n}\n\nself.addEventListener(\&#34;fetch\&#34;, (event) =&gt; {\n  event.respondWith(fetchWithCache(event.request));\n});\n\nasync function fetchWithCache(request) {\n  const cachedResponse = await caches.match(request);\n  if (cachedResponse) {\n    return cachedResponse;\n  }\n  return await fetch(request);\n}\n\n// -----------------------------------------------------------------------------\n// Push Notifications\n// -----------------------------------------------------------------------------\nself.addEventListener(\&#34;push\&#34;, (event) =&gt; {\n  event.waitUntil((async () =&gt; {\n    let notification;\n\n    try {\n      notification = event.data ? event.data.json() : null;\n    } catch {\n      notification = null;\n    }\n\n    if (!notification) {\n      return;\n    }\n\n    await showNotification(self.registration, notification);\n  })());\n});\n\nself.addEventListener(\&#34;message\&#34;, (event) =&gt; {\n  const msg = event.data;\n  if (!msg || msg.type !== \&#34;goapp:notify\&#34;) {\n    return;\n  }\n\n  event.waitUntil(\n    showNotification(self.registration, msg.options)\n  );\n});\n\nasync function showNotification(registration, notification) {\n  const title = notification.title || \&#34;Notification\&#34;;\n\n  let actions = [];\n  for (let i in notification.actions) {\n    const action = notification.actions[i];\n    actions.push({\n      action: action.action,\n      path: action.path,\n    });\n    delete action.path;\n  }\n\n  await registration.showNotification(title, {\n    body: notification.body,\n    icon: notification.icon,\n    badge: notification.badge,\n    actions: notification.actions,\n    data: {\n      goapp: {\n        path: notification.path,\n        actions: actions\n      }\n    }\n  });\n}\n\nself.addEventListener(\&#34;notificationclick\&#34;, (event) =&gt; {\n  event.notification.close();\n\n  const notification = event.notification;\n  let path = notification.data.goapp.path;\n\n  for (let i in notification.data.goapp.actions) {\n    const action = notification.data.goapp.actions[i];\n    if (action.action === event.action) {\n      path = action.path;\n      break;\n    }\n  }\n\n  event.waitUntil(\n    clients\n      .matchAll({\n        type: \&#34;window\&#34;,\n      })\n      .then((clientList) =&gt; {\n        for (var i = 0; i &lt; clientList.length; i++) {\n          let client = clientList[i];\n          if (\&#34;focus\&#34; in client) {\n            client.focus();\n            client.postMessage({\n              goapp: {\n                type: \&#34;notification\&#34;,\n                path: path,\n              },\n            });\n            return;\n          }\n        }\n\n        if (clients.openWindow) {\n          return clients.openWindow(path);\n        }\n      })\n  );\n});&#34;
 )</pre>
 
 

docs/web/documents/reference.html

@@ -61,18 +61,21 @@ async function fetchWithCache(request) {
 // Push Notifications
 // -----------------------------------------------------------------------------
 self.addEventListener("push", (event) => {
-  if (!event.data || !event.data.text()) {
-    return;
-  }
+  event.waitUntil((async () => {
+    let notification;
 
-  const notification = JSON.parse(event.data.text());
-  if (!notification) {
-    return;
-  }
+    try {
+      notification = event.data ? event.data.json() : null;
+    } catch {
+      notification = null;
+    }
 
-  event.waitUntil(
-    showNotification(self.registration, notification)
-  );
+    if (!notification) {
+      return;
+    }
+
+    await showNotification(self.registration, notification);
+  })());
 });
 
 self.addEventListener("message", (event) => {
@@ -87,7 +90,7 @@ self.addEventListener("message", (event) => {
 });
 
 async function showNotification(registration, notification) {
-  const title = notification.title || "";
+  const title = notification.title || "Notification";
 
   let actions = [];
   for (let i in notification.actions) {
@@ -99,19 +102,18 @@ async function showNotification(registration, notification) {
     delete action.path;
   }
 
-  notification.data = notification.data || {};
-  notification.data.goapp = {
-    path: notification.path,
-    actions: actions,
-  };
-  delete notification.title;
-  delete notification.path;
-
-  await registration.showNotification(title, notification);
-}
-
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  await registration.showNotification(title, {
+    body: notification.body,
+    icon: notification.icon,
+    badge: notification.badge,
+    actions: notification.actions,
+    data: {
+      goapp: {
+        path: notification.path,
+        actions: actions
+      }
+    }
+  });
 }
 
 self.addEventListener("notificationclick", (event) => {