Create notifications from service worker so it works on mobile

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 register a service worker and use {{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)

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 register a service worker and use {{domxref("ServiceWorkerRegistration.showNotification()")}} 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:

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);
 }
 ```

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;
+    });
 }
 ```
 

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);
 }
 ```