From a3be426f3c9db386c75a5895397bbf4ce149c3a2 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 17 Sep 2025 12:14:35 -0400 Subject: [PATCH 1/3] Create notifications from service worker so it works on mobile --- .../api/notification/notification/index.md | 19 ++++++------------- .../using_the_notifications_api/index.md | 3 +++ .../js13kgames/app_structure/index.md | 11 +++++++++-- .../offline_service_workers/index.md | 8 +++++++- .../re-engageable_notifications_push/index.md | 3 ++- 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/files/en-us/web/api/notification/notification/index.md b/files/en-us/web/api/notification/notification/index.md index c1a654f321d31c4..c8f9d23e68e899e 100644 --- a/files/en-us/web/api/notification/notification/index.md +++ b/files/en-us/web/api/notification/notification/index.md @@ -8,11 +8,13 @@ browser-compat: api.Notification.Notification {{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}} -The **`Notification()`** constructor creates a new -{{domxref("Notification")}} object instance, which represents a user notification. +The **`Notification()`** constructor creates a new {{domxref("Notification")}} object instance, which represents a user notification. -> [!NOTE] -> Trying to create a notification inside the {{domxref("ServiceWorkerGlobalScope")}} using the `Notification()` constructor will throw a `TypeError`. Use {{domxref("ServiceWorkerRegistration.showNotification()")}} instead. +Trying to create a notification inside the {{domxref("ServiceWorkerGlobalScope")}} using the `Notification()` constructor will throw a `TypeError`. Use {{domxref("ServiceWorkerRegistration.showNotification()")}} instead. + +You must first get permission before being able to display notifications, using {{domxref("Notification.requestPermission()")}}. The permission may not be grantable, for example if the page is in private browsing mode. + +This constructor throws a {{jsxref("TypeError")}} when called in nearly all mobile browsers and this is unlikely to change, because web pages on mobile devices almost never "run in the background", which is the main use case for notifications. Instead, you need to make the web page persistent, such as installing it to the home screen or registering a service worker and using {{domxref("ServiceWorkerRegistration.showNotification()")}}. See [Chrome issue](https://crbug.com/481856) for more information. ## Syntax @@ -89,15 +91,6 @@ if (Notification.permission === "granted") { {{Compat}} -### Chrome notes - -Starting in Chrome 49, notifications don't work in incognito mode. - -Chrome for Android will throw a {{jsxref("TypeError")}} when calling the -`Notification` constructor. It only supports creating -notifications from a service worker. See the -[Chromium issue tracker](https://crbug.com/481856) for more details. - ## See also - [Using the Notifications API](/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) diff --git a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md index 759121aa370e330..42f3fd6b601b970 100644 --- a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md @@ -28,6 +28,9 @@ Because of abuses of push notifications in the past, web browsers and developers In addition, In Chrome and Firefox you cannot request notifications at all unless the site is a secure context (i.e., HTTPS), and you can no longer allow notification permissions to be requested from cross-origin {{htmlelement("iframe")}}s. +> [!NOTE] +> The examples in this article uses the {{domxref("Notification/Notification", "Notification()")}} constructor to create notifications. This is fine for desktop, but on most mobile browsers this will throw a {{jsxref("TypeError")}}. If you are targeting mobile devices, you should use {{domxref("ServiceWorkerRegistration.showNotification()")}} from a service worker instead. + ### Checking current permission status You can check to see if you already have permission by checking the value of the {{domxref("Notification.permission_static", "Notification.permission")}} read only property. It can have one of three possible values: diff --git a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md index 9664500bbb69fb2..f87c5618f4d5fa3 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md @@ -114,8 +114,14 @@ document.getElementById("content").innerHTML = content; Next, it registers a service worker: ```js +let swRegistration = null; + if ("serviceWorker" in navigator) { - navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js"); + navigator.serviceWorker + .register("/pwa-examples/js13kpwa/sw.js") + .then((reg) => { + swRegistration = reg; + }); } ``` @@ -136,6 +142,7 @@ The last block creates notifications that display a randomly-selected item from ```js function randomNotification() { + if (!swRegistration) return; const randomItem = Math.floor(Math.random() * games.length); const notifTitle = games[randomItem].name; const notifBody = `Created by ${games[randomItem].author}.`; @@ -144,7 +151,7 @@ function randomNotification() { body: notifBody, icon: notifImg, }; - new Notification(notifTitle, options); + swRegistration.showNotification(notifTitle, options); setTimeout(randomNotification, 30000); } ``` diff --git a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md index 1bcbc942dbf8061..823ff279ce708ad 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md @@ -29,8 +29,14 @@ Let's see how the js13kPWA app uses Service Workers to provide offline capabilit We'll start by looking at the code that registers a new Service Worker, in the app.js file: ```js +let swRegistration = null; + if ("serviceWorker" in navigator) { - navigator.serviceWorker.register("./pwa-examples/js13kpwa/sw.js"); + navigator.serviceWorker + .register("./pwa-examples/js13kpwa/sw.js") + .then((reg) => { + swRegistration = reg; + }); } ``` diff --git a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md index 50d7cf6b5e91280..be8d3413e750d9a 100644 --- a/files/en-us/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md +++ b/files/en-us/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md @@ -49,6 +49,7 @@ The example app creates a notification out of the available data — a game is p ```js function randomNotification() { + if (!swRegistration) return; const randomItem = Math.floor(Math.random() * games.length); const notifTitle = games[randomItem].name; const notifBody = `Created by ${games[randomItem].author}.`; @@ -57,7 +58,7 @@ function randomNotification() { body: notifBody, icon: notifImg, }; - new Notification(notifTitle, options); + swRegistration.showNotification(notifTitle, options); setTimeout(randomNotification, 30000); } ``` From 05d422b708e0b82bca4663f496d6966479539fd1 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Fri, 19 Sep 2025 19:42:01 -0400 Subject: [PATCH 2/3] Update files/en-us/web/api/notification/notification/index.md --- files/en-us/web/api/notification/notification/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/notification/notification/index.md b/files/en-us/web/api/notification/notification/index.md index c8f9d23e68e899e..7232e4a13fcd672 100644 --- a/files/en-us/web/api/notification/notification/index.md +++ b/files/en-us/web/api/notification/notification/index.md @@ -14,7 +14,7 @@ Trying to create a notification inside the {{domxref("ServiceWorkerGlobalScope") You must first get permission before being able to display notifications, using {{domxref("Notification.requestPermission()")}}. The permission may not be grantable, for example if the page is in private browsing mode. -This constructor throws a {{jsxref("TypeError")}} when called in nearly all mobile browsers and this is unlikely to change, because web pages on mobile devices almost never "run in the background", which is the main use case for notifications. Instead, you need to make the web page persistent, such as installing it to the home screen or registering a service worker and using {{domxref("ServiceWorkerRegistration.showNotification()")}}. See [Chrome issue](https://crbug.com/481856) for more information. +This constructor throws a {{jsxref("TypeError")}} when called in nearly all mobile browsers and this is unlikely to change, because web pages on mobile devices almost never "run in the background", which is the main use case for notifications. Instead, you need to register a service worker and use {{domxref("ServiceWorkerRegistration.showNotification()")}}. See [Chrome issue](https://crbug.com/481856) for more information. ## Syntax From 88b0846ce73229e6aa8ee7e81576c8060c852a07 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Fri, 19 Sep 2025 19:42:08 -0400 Subject: [PATCH 3/3] Update files/en-us/web/api/notifications_api/using_the_notifications_api/index.md --- .../api/notifications_api/using_the_notifications_api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md index 42f3fd6b601b970..41365ca5a9302d7 100644 --- a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md @@ -29,7 +29,7 @@ Because of abuses of push notifications in the past, web browsers and developers In addition, In Chrome and Firefox you cannot request notifications at all unless the site is a secure context (i.e., HTTPS), and you can no longer allow notification permissions to be requested from cross-origin {{htmlelement("iframe")}}s. > [!NOTE] -> The examples in this article uses the {{domxref("Notification/Notification", "Notification()")}} constructor to create notifications. This is fine for desktop, but on most mobile browsers this will throw a {{jsxref("TypeError")}}. If you are targeting mobile devices, you should use {{domxref("ServiceWorkerRegistration.showNotification()")}} from a service worker instead. +> The examples in this article uses the {{domxref("Notification/Notification", "Notification()")}} constructor to create notifications. This is fine for desktop, but on most mobile browsers this will throw a {{jsxref("TypeError")}}. If you are targeting mobile devices, you should register a service worker and use {{domxref("ServiceWorkerRegistration.showNotification()")}} instead. ### Checking current permission status