Add Web Push Support (#11346)

* WIP: PoC with lots of terrible code with web push

* fix service worker building

* Work on WebPush Tailored to Browser

* Clean Up Web And MV2

* Fix Merge Conflicts

* Prettier

* Use Unsupported for MV2

* Add Doc Comments

* Remove Permission Button

* Fix Type Test

* Write Time In More Readable Format

* Add SignalR Logger

* `sheduleReconnect` -> `scheduleReconnect`

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

* Capture Support Context In Connector

* Remove Unneeded CSP Change

* Fix Build

* Simplify `getOrCreateSubscription`

* Add More Docs to Matrix

* Update libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>

* Move API Service Into Notifications Folder

* Allow Connection When Account Is Locked

* Add Comments to NotificationsService

* Only Change Support Status If Public Key Changes

* Move Service Choice Out To Method

* Use Named Constant For Disabled Notification Url

* Add Test & Cleanup

* Flatten

* Move Tests into `beforeEach` & `afterEach`

* Add Tests

* Test `distinctUntilChanged`'s Operators More

* Make Helper And Cleanup Chain

* Add Back Cast

* Add extra safety to incoming config check

* Put data through response object

* Apply TS Strict Rules

* Finish PushTechnology comment

* Use `instanceof` check

* Do Safer Worker Based Registration for MV3

* Remove TODO

* Switch to SignalR on any WebPush Error

* Fix Manifest Permissions

* Add Back `webNavigation`

* Sorry, Remove `webNavigation`

* Fixed merge conflicts.

---------

Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
Co-authored-by: Todd Martin <tmartin@bitwarden.com>
Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>

apps/web/src/app/app.component.ts

@@ -7,8 +7,8 @@ import * as jq from "jquery";
 import { Subject, filter, firstValueFrom, map, takeUntil, timeout } from "rxjs";
 
 import { CollectionService } from "@bitwarden/admin-console/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
-import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service";
 import { InternalOrganizationServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -19,11 +19,13 @@ import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-con
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { ProcessReloadServiceAbstraction } from "@bitwarden/common/key-management/abstractions/process-reload.service";
+import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { NotificationsService } from "@bitwarden/common/platform/notifications";
 import { StateEventRunnerService } from "@bitwarden/common/platform/state";
 import { SyncService } from "@bitwarden/common/platform/sync";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@@ -89,6 +91,8 @@ export class AppComponent implements OnDestroy, OnInit {
     private stateEventRunnerService: StateEventRunnerService,
     private organizationService: InternalOrganizationServiceAbstraction,
     private accountService: AccountService,
+    private apiService: ApiService,
+    private appIdService: AppIdService,
     private processReloadService: ProcessReloadServiceAbstraction,
   ) {}
 
@@ -117,24 +121,6 @@ export class AppComponent implements OnDestroy, OnInit {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.ngZone.run(async () => {
         switch (message.command) {
-          case "loggedIn":
-            // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.notificationsService.updateConnection(false);
-            break;
-          case "loggedOut":
-            if (
-              message.userId == null ||
-              message.userId === (await firstValueFrom(this.accountService.activeAccount$))
-            ) {
-              await this.notificationsService.updateConnection(false);
-            }
-            break;
-          case "unlocked":
-            // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.notificationsService.updateConnection(false);
-            break;
           case "authBlocked":
             // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -148,10 +134,6 @@ export class AppComponent implements OnDestroy, OnInit {
             await this.vaultTimeoutService.lock();
             break;
           case "locked":
-            // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.notificationsService.updateConnection(false);
-
             await this.processReloadService.startProcessReload(this.authService);
             break;
           case "lockedUrl":

apps/web/src/app/core/core.module.ts

@@ -69,6 +69,10 @@ import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sd
 import { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
+import {
+  UnsupportedWebPushConnectionService,
+  WebPushConnectionService,
+} from "@bitwarden/common/platform/notifications/internal";
 import { AppIdService as DefaultAppIdService } from "@bitwarden/common/platform/services/app-id.service";
 import { MemoryStorageService } from "@bitwarden/common/platform/services/memory-storage.service";
 // eslint-disable-next-line import/no-restricted-paths -- Implementation for memory storage
@@ -245,6 +249,12 @@ const safeProviders: SafeProvider[] = [
       PolicyService,
     ],
   }),
+  safeProvider({
+    provide: WebPushConnectionService,
+    // We can support web in the future by creating a worker
+    useClass: UnsupportedWebPushConnectionService,
+    deps: [],
+  }),
   safeProvider({
     provide: LockComponentService,
     useClass: WebLockComponentService,

apps/web/src/app/core/init.service.ts

@@ -5,13 +5,13 @@ import { firstValueFrom } from "rxjs";
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
 import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
 import { EventUploadService as EventUploadServiceAbstraction } from "@bitwarden/common/abstractions/event/event-upload.service";
-import { NotificationsService as NotificationsServiceAbstraction } from "@bitwarden/common/abstractions/notifications.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { TwoFactorService as TwoFactorServiceAbstraction } from "@bitwarden/common/auth/abstractions/two-factor.service";
 import { EncryptService } from "@bitwarden/common/platform/abstractions/encrypt.service";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service";
 import { StateService as StateServiceAbstraction } from "@bitwarden/common/platform/abstractions/state.service";
+import { NotificationsService } from "@bitwarden/common/platform/notifications";
 import { ContainerService } from "@bitwarden/common/platform/services/container.service";
 import { UserAutoUnlockKeyService } from "@bitwarden/common/platform/services/user-auto-unlock-key.service";
 import { EventUploadService } from "@bitwarden/common/services/event/event-upload.service";
@@ -24,7 +24,7 @@ import { VersionService } from "../platform/version.service";
 export class InitService {
   constructor(
     @Inject(WINDOW) private win: Window,
-    private notificationsService: NotificationsServiceAbstraction,
+    private notificationsService: NotificationsService,
     private vaultTimeoutService: VaultTimeoutService,
     private i18nService: I18nServiceAbstraction,
     private eventUploadService: EventUploadServiceAbstraction,
@@ -52,7 +52,7 @@ export class InitService {
         await this.userAutoUnlockKeyService.setUserKeyInMemoryIfAutoUserKeySet(activeAccount.id);
       }
 
-      setTimeout(() => this.notificationsService.init(), 3000);
+      this.notificationsService.startListening();
       await this.vaultTimeoutService.init(true);
       await this.i18nService.init();
       (this.eventUploadService as EventUploadService).init(true);

apps/web/src/app/platform/notifications/permissions-webpush-connection.service.ts

@@ -0,0 +1,53 @@
+import { concat, defer, fromEvent, map, Observable, of, switchMap } from "rxjs";
+
+import { SupportStatus } from "@bitwarden/common/platform/misc/support-status";
+import {
+  WebPushConnector,
+  WorkerWebPushConnectionService,
+} from "@bitwarden/common/platform/notifications/internal";
+import { UserId } from "@bitwarden/common/types/guid";
+
+export class PermissionsWebPushConnectionService extends WorkerWebPushConnectionService {
+  override supportStatus$(userId: UserId): Observable<SupportStatus<WebPushConnector>> {
+    return this.notificationPermission$().pipe(
+      switchMap((notificationPermission) => {
+        if (notificationPermission === "denied") {
+          return of<SupportStatus<WebPushConnector>>({
+            type: "not-supported",
+            reason: "permission-denied",
+          });
+        }
+
+        if (notificationPermission === "default") {
+          return of<SupportStatus<WebPushConnector>>({
+            type: "needs-configuration",
+            reason: "permission-not-requested",
+          });
+        }
+
+        if (notificationPermission === "prompt") {
+          return of<SupportStatus<WebPushConnector>>({
+            type: "needs-configuration",
+            reason: "prompt-must-be-granted",
+          });
+        }
+
+        // Delegate to default worker checks
+        return super.supportStatus$(userId);
+      }),
+    );
+  }
+
+  private notificationPermission$() {
+    return concat(
+      of(Notification.permission),
+      defer(async () => {
+        return await window.navigator.permissions.query({ name: "notifications" });
+      }).pipe(
+        switchMap((permissionStatus) => {
+          return fromEvent(permissionStatus, "change").pipe(map(() => permissionStatus.state));
+        }),
+      ),
+    );
+  }
+}