Update PWA notification page on page load

app/helpers/bootstrap_helper.rb

@@ -5,6 +5,7 @@ module BootstrapHelper
     options = {
       badge:       nil,
       badge_color: nil,
+      badge_attr:  {},
       icon:        nil,
       class:       ""
     }.merge(options)
@@ -29,7 +30,7 @@ module BootstrapHelper
         ("badge-pill" if options[:badge_pill])
       ].compact.join(" ")
 
-      body += " #{content_tag(:span, options[:badge], class: badge_class)}".html_safe
+      body += " #{content_tag(:span, options[:badge], class: badge_class, **options[:badge_attr])}".html_safe
     end
 
     content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: classes)

app/javascript/retrospring/controllers/pwa_badge_controller.ts

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<HTMLElement> {
+  isPwa: boolean;
+  badgeCapable: boolean;
+
+  initialize(): void {
+    this.isPwa = window.matchMedia('(display-mode: standalone)').matches;
+    this.badgeCapable = "setAppBadge" in navigator;
+  }
+
+  connect(): void {
+    if (this.isPwa && this.badgeCapable) {
+      const count = Number.parseInt(this.element.innerText);
+      navigator.setAppBadge(count);
+    }
+  }
+}

app/javascript/retrospring/initializers/stimulus.ts

@@ -10,6 +10,7 @@ import CapabilitiesController from "retrospring/controllers/capabilities_control
 import CropperController from "retrospring/controllers/cropper_controller";
 import InboxSharingController from "retrospring/controllers/inbox_sharing_controller";
 import ToastController from "retrospring/controllers/toast_controller";
+import PwaBadgeController from "retrospring/controllers/pwa_badge_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -29,6 +30,7 @@ export default function (): void {
   window['Stimulus'].register('cropper', CropperController);
   window['Stimulus'].register('format-popup', FormatPopupController);
   window['Stimulus'].register('inbox-sharing', InboxSharingController);
+  window['Stimulus'].register('pwa-badge', PwaBadgeController);
   window['Stimulus'].register('theme', ThemeController);
   window['Stimulus'].register('toast', ToastController);
 }

app/views/navigation/_desktop.html.haml

@@ -10,7 +10,7 @@
           DEV
     %ul.nav.navbar-nav.me-auto
       = nav_entry t("navigation.timeline"), root_path, icon: 'home'
-      = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count
+      = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count, badge_attr: { data: { controller: "pwa-badge" } }
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass'
     %ul.nav.navbar-nav