[IMP] mail: PWA shows discuss badge counter on app icon

This commit adds a badge counter with global discuss counter on the
PWA app icon, which helps a lot in knowing how many chat
notifications are pending in the PWA when the Odoo app is not open.

Task-5136354

closes odoo#235003

X-original-commit: c04c4cb
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

Author: alexkuhn

addons/mail/__manifest__.py

@@ -146,6 +146,7 @@
             # depends on BS variables, can't be loaded in assets_primary or assets_secondary
             'mail/static/src/scss/variables/derived_variables.scss',
             'mail/static/src/scss/*.scss',
+            'mail/static/lib/idb-keyval/idb-keyval.js',
             'mail/static/lib/selfie_segmentation/selfie_segmentation.js',
             'mail/static/src/js/**/*',
             'mail/static/src/model/**/*',

addons/mail/static/lib/idb-keyval/idb-keyval.js

@@ -0,0 +1,81 @@
+//     idb-keyval.js 3.2.0
+//     https://github.com/jakearchibald/idb-keyval
+//     Copyright 2016, Jake Archibald
+//     Licensed under the Apache License, Version 2.0
+
+var idbKeyval = (function (exports) {
+    'use strict';
+    
+    class Store {
+        constructor(dbName = 'keyval-store', storeName = 'keyval') {
+            this.storeName = storeName;
+            this._dbp = new Promise((resolve, reject) => {
+                const openreq = indexedDB.open(dbName, 1);
+                openreq.onerror = () => reject(openreq.error);
+                openreq.onsuccess = () => resolve(openreq.result);
+                // First time setup: create an empty object store
+                openreq.onupgradeneeded = () => {
+                    openreq.result.createObjectStore(storeName);
+                };
+            });
+        }
+        _withIDBStore(type, callback) {
+            return this._dbp.then(db => new Promise((resolve, reject) => {
+                const transaction = db.transaction(this.storeName, type);
+                transaction.oncomplete = () => resolve();
+                transaction.onabort = transaction.onerror = () => reject(transaction.error);
+                callback(transaction.objectStore(this.storeName));
+            }));
+        }
+    }
+    let store;
+    function getDefaultStore() {
+        if (!store)
+            store = new Store();
+        return store;
+    }
+    function get(key, store = getDefaultStore()) {
+        let req;
+        return store._withIDBStore('readonly', store => {
+            req = store.get(key);
+        }).then(() => req.result);
+    }
+    function set(key, value, store = getDefaultStore()) {
+        return store._withIDBStore('readwrite', store => {
+            store.put(value, key);
+        });
+    }
+    function del(key, store = getDefaultStore()) {
+        return store._withIDBStore('readwrite', store => {
+            store.delete(key);
+        });
+    }
+    function clear(store = getDefaultStore()) {
+        return store._withIDBStore('readwrite', store => {
+            store.clear();
+        });
+    }
+    function keys(store = getDefaultStore()) {
+        const keys = [];
+        return store._withIDBStore('readonly', store => {
+            // This would be store.getAllKeys(), but it isn't supported by Edge or Safari.
+            // And openKeyCursor isn't supported by Safari.
+            (store.openKeyCursor || store.openCursor).call(store).onsuccess = function () {
+                if (!this.result)
+                    return;
+                keys.push(this.result.key);
+                this.result.continue();
+            };
+        }).then(() => keys);
+    }
+    
+    exports.Store = Store;
+    exports.get = get;
+    exports.set = set;
+    exports.del = del;
+    exports.clear = clear;
+    exports.keys = keys;
+    
+    return exports;
+    
+    }({}));

addons/mail/static/src/core/common/store_service.js

@@ -437,15 +437,18 @@ export class Store extends BaseStore {
                     });
                 }
             }
-            if (
-                type === "notification-displayed" &&
-                ["mail.thread", "discuss.channel"].includes(payload.model)
-            ) {
-                this.env.services["mail.out_of_focus"]._playSound();
+            if (type === "notification-displayed") {
+                this.onPushNotificationDisplayed(payload);
             }
         });
     }
 
+    onPushNotificationDisplayed(payload) {
+        if (["mail.thread", "discuss.channel"].includes(payload.model)) {
+            this.env.services["mail.out_of_focus"]._playSound();
+        }
+    }
+
     /**
      * Search and fetch for a partner with a given user or partner id.
      * @param {Object} param0

addons/mail/static/src/core/public_web/out_of_focus_service_patch.js

@@ -7,7 +7,7 @@ patch(OutOfFocusService.prototype, {
         this.titleService = services.title;
         this.counter = 0;
         this.contributingMessageLocalIds = new Set();
-        env.bus.addEventListener("window_focus", () => this.clearUnreadMessage());
+        env.bus.addEventListener("window_focus", () => this.onWindowFocus());
     },
     clearUnreadMessage() {
         this.counter = 0;
@@ -23,5 +23,8 @@ patch(OutOfFocusService.prototype, {
         this.titleService.setCounters({ discuss: this.counter });
         super.notify(...arguments);
     },
+    onWindowFocus() {
+        this.clearUnreadMessage();
+    },
 });
 outOfFocusService.dependencies = [...outOfFocusService.dependencies, "title"];

addons/mail/static/src/core/web/messaging_menu_patch.js

@@ -167,7 +167,7 @@ patch(MessagingMenu.prototype, {
     },
     get counter() {
         let value =
-            this.store.inbox.counter +
+            this.store.globalCounter +
             this.store.failures.reduce((acc, f) => acc + parseInt(f.notifications.length), 0);
         if (this.canPromptToInstall) {
             value++;

addons/mail/static/src/core/web/out_of_focus_service_patch.js

@@ -0,0 +1,9 @@
+import { OutOfFocusService } from "@mail/core/common/out_of_focus_service";
+import { patch } from "@web/core/utils/patch";
+
+patch(OutOfFocusService.prototype, {
+    onWindowFocus() {
+        super.onWindowFocus();
+        this.store.updateAppBadge();
+    },
+});

addons/mail/static/src/core/web/store_service_patch.js

@@ -5,6 +5,13 @@ import { _t } from "@web/core/l10n/translation";
 
 import { patch } from "@web/core/utils/patch";
 
+const unread_store = (() => {
+    if (!window.idbKeyval) {
+        return undefined;
+    }
+    return new window.idbKeyval.Store("odoo-mail-unread-db", "odoo-mail-unread-store");
+})();
+
 /** @type {import("models").Store} */
 const StorePatch = {
     setup() {
@@ -26,17 +33,33 @@ const StorePatch = {
                 return getSortId(g1) - getSortId(g2);
             },
         });
+        this.globalCounter = fields.Attr(0, {
+            compute() {
+                return this.computeGlobalCounter();
+            },
+            onUpdate() {
+                this.updateAppBadge();
+            },
+            eager: true,
+        });
         this.inbox = fields.One("mail.thread");
         this.starred = fields.One("mail.thread");
         this.history = fields.One("mail.thread");
     },
+    computeGlobalCounter() {
+        return this.inbox?.counter ?? 0;
+    },
     async initialize() {
         await Promise.all([
             this.fetchStoreData("failures"),
             this.fetchStoreData("systray_get_activities"),
             super.initialize(...arguments),
         ]);
     },
+    onPushNotificationDisplayed() {
+        super.onPushNotificationDisplayed(...arguments);
+        this.updateAppBadge();
+    },
     onStarted() {
         super.onStarted(...arguments);
         this.inbox = {
@@ -102,6 +125,12 @@ const StorePatch = {
             )
         );
     },
+    updateAppBadge() {
+        if (unread_store) {
+            window.idbKeyval.set("unread", this.globalCounter, unread_store);
+            Promise.resolve(navigator.setAppBadge?.(this.globalCounter)).catch(() => {}); // FIXME: Illegal invocation error in HOOT
+        }
+    },
     /**
      * @param {object} param0
      * @param {{ type: "INSERT"|"DELETE"|"RELOAD_CHATTER", payload: Partial<import("models").Activity> }} param0.data

addons/mail/static/src/discuss/core/web/messaging_menu_patch.js

@@ -21,22 +21,4 @@ patch(MessagingMenu.prototype, {
             this.dropdown.close();
         }
     },
-    get counter() {
-        const count = super.counter;
-        const channelsContribution =
-            this.store.channels.status !== "fetched"
-                ? this.store.initChannelsUnreadCounter
-                : Object.values(this.store["discuss.channel"].records).filter(
-                      (channel) =>
-                          channel.displayToSelf &&
-                          !channel.self_member_id?.mute_until_dt &&
-                          (channel.self_member_id?.message_unread_counter ||
-                              channel.message_needaction_counter)
-                  ).length;
-        // Needactions are already counted in the super call, but we want to discard them for channel so that there is only +1 per channel.
-        const channelsNeedactionCounter = Object.values(
-            this.store["discuss.channel"].records
-        ).reduce((acc, channel) => acc + channel.message_needaction_counter, 0);
-        return count + channelsContribution - channelsNeedactionCounter;
-    },
 });

addons/mail/static/src/discuss/core/web/store_service_patch.js

@@ -10,6 +10,26 @@ const StorePatch = {
         super.setup(...arguments);
         this.initChannelsUnreadCounter = 0;
     },
+    computeGlobalCounter() {
+        if (!this["discuss.channel"]) {
+            return super.computeGlobalCounter();
+        }
+        const channelsContribution =
+            this.channels.status !== "fetched"
+                ? this.initChannelsUnreadCounter
+                : Object.values(this.store["discuss.channel"].records).filter(
+                      (channel) =>
+                          channel.displayToSelf &&
+                          !channel.self_member_id?.mute_until_dt &&
+                          (channel.self_member_id?.message_unread_counter ||
+                              channel.message_needaction_counter)
+                  ).length;
+        // Needactions are already counted in the super call, but we want to discard them for channel so that there is only +1 per channel.
+        const channelsNeedactionCounter = Object.values(
+            this.store["discuss.channel"].records
+        ).reduce((acc, channel) => acc + channel.message_needaction_counter, 0);
+        return super.computeGlobalCounter() + channelsContribution + channelsNeedactionCounter;
+    },
     /** @returns {import("models").Thread[]} */
     getSelfImportantChannels() {
         return this.getSelfRecentChannels().filter((channel) => channel.importantCounter > 0);

addons/mail/static/src/service_worker.js

@@ -1,5 +1,7 @@
 /* eslint-env serviceworker */
 /* eslint-disable no-restricted-globals */
+/* global idbKeyval */
+importScripts("/mail/static/lib/idb-keyval/idb-keyval.js");
 
 const MESSAGE_TYPE = { POST_RTC_LOGS: "POST_RTC_LOGS" };
 const PUSH_NOTIFICATION_TYPE = {
@@ -11,8 +13,10 @@ const PUSH_NOTIFICATION_ACTION = {
     DECLINE: "DECLINE",
 };
 
+const { Store, set, get } = idbKeyval;
 const LOG_AGE_LIMIT = 24 * 60 * 60 * 1000; // 24h
 let db;
+const unread_store = new Store("odoo-mail-unread-db", "odoo-mail-unread-store");
 let interactionSinceCleanupCount = 0;
 
 async function openDatabase() {
@@ -229,6 +233,13 @@ self.addEventListener("message", ({ data }) => {
     }
 });
 
+async function incrementUnread() {
+    const oldCounter = (await get("unread", unread_store)) ?? 0;
+    const newCounter = oldCounter + 1;
+    set("unread", newCounter, unread_store);
+    navigator.setAppBadge?.(newCounter);
+}
+
 async function handlePushEvent(notification) {
     const { model, res_id } = notification.options?.data || {};
     const correlationId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -252,7 +263,8 @@ async function handlePushEvent(notification) {
                 })
             );
         });
-        timeoutId = setTimeout(() => {
+        timeoutId = setTimeout(async () => {
+            await incrementUnread();
             self.clients.matchAll({ includeUncontrolled: true, type: "window" }).then((clients) => {
                 clients.forEach((client) =>
                     client.postMessage({