FEATURE: Replyable chat push notifications (#18973)

Allows quick inline replies in chat push notifications. This will allow users
in compatible platforms (Windows 10+ / Chrome OS / Android N+) to reply
directly from the notification UI.

Probable follow ups include:

  - inline replies for posts

  - handling failure of reply
    - fallback to draft creation if business logic error
    - store and try again later if connectivity error

  - sent inline replies lack the in_reply_to param

  - i18n of inline reply action text and placeholder

app/assets/javascripts/service-worker.js.erb

@@ -8,6 +8,8 @@ workbox.setConfig({
 });
 
 var authUrls = ["auth", "session/sso_login", "session/sso"].map(path => `<%= Discourse.base_path %>/${path}`);
+var chatRegex = /\/chat\/channel\/(\d+)\//;
+var inlineReplyIcon = "<%= UrlHelper.absolute("/images/push-notifications/inline_reply.png") %>";
 
 var cacheVersion = "1";
 var discourseCacheName = "discourse-" + cacheVersion;
@@ -134,6 +136,16 @@ function showNotification(title, body, icon, badge, tag, baseUrl, url) {
     tag: tag
   }
 
+  if (chatRegex.test(url)) {
+    notificationOptions['actions'] = [{
+      action: "reply",
+      title: "Reply",
+      placeholder: "reply",
+      type: "text",
+      icon: inlineReplyIcon
+    }];
+  }
+
   return self.registration.showNotification(title, notificationOptions);
 }
 
@@ -163,18 +175,51 @@ self.addEventListener('notificationclick', function(event) {
   var url = event.notification.data.url;
   var baseUrl = event.notification.data.baseUrl;
 
-  // This looks to see if the current window is already open and
-  // focuses if it is
-  event.waitUntil(
-    clients.matchAll({ type: "window" })
-      .then(function(clientList) {
-        var reusedClientWindow = clientList.some(function(client) {
-          if (client.url === baseUrl + url && 'focus' in client) {
+  if (event.action === "reply") {
+    let csrf;
+    fetch("/session/csrf", {
+      credentials: "include",
+      headers: {
+        Accept: "application/json",
+      },
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not OK");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        csrf = data.csrf;
+
+        let chatTest = url.match(chatRegex);
+        if (chatTest.length > 0) {
+          let chatChannel = chatTest[1];
+
+          fetch(`${baseUrl}/chat/${chatChannel}.json`, {
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+              "X-CSRF-Token": csrf,
+            },
+            body: `message=${event.reply}`,
+            method: "POST",
+            mode: "cors",
+          });
+        }
+      });
+  } else {
+    // This looks to see if the current window is already open and
+    // focuses if it is
+    event.waitUntil(
+      clients.matchAll({ type: "window" }).then(function (clientList) {
+        var reusedClientWindow = clientList.some(function (client) {
+          if (client.url === baseUrl + url && "focus" in client) {
             client.focus();
             return true;
           }
 
-          if ('postMessage' in client && 'focus' in client) {
+          if ("postMessage" in client && "focus" in client) {
             client.focus();
             client.postMessage({ url: url });
             return true;
@@ -182,9 +227,11 @@ self.addEventListener('notificationclick', function(event) {
           return false;
         });
 
-        if (!reusedClientWindow && clients.openWindow) return clients.openWindow(baseUrl + url);
+        if (!reusedClientWindow && clients.openWindow)
+          return clients.openWindow(baseUrl + url);
       })
-  );
+    );
+  }
 });
 
 self.addEventListener('message', function(event) {