Merge pull request #18094 from umbraco/v15/bugfix/offline-notifcation

Bugfix: show notification when offline

src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts

@@ -1,4 +1,5 @@
 import type { UmbAppContextConfig } from './app-context-config.interface.js';
+import { UmbNetworkConnectionStatusManager } from './network-connection-status.manager.js';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
@@ -13,6 +14,8 @@ export class UmbAppContext extends UmbContextBase<UmbAppContext> {
 		this.#serverUrl = config.serverUrl;
 		this.#backofficePath = config.backofficePath;
 		this.#serverConnection = config.serverConnection;
+
+		new UmbNetworkConnectionStatusManager(this);
 	}
 
 	getBackofficePath() {

src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts

@@ -0,0 +1,52 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
+import {
+	UMB_NOTIFICATION_CONTEXT,
+	type UmbNotificationContext,
+	type UmbNotificationHandler,
+} from '@umbraco-cms/backoffice/notification';
+
+export class UmbNetworkConnectionStatusManager extends UmbControllerBase {
+	#notificationContext?: UmbNotificationContext;
+	#offlineNotification?: UmbNotificationHandler;
+
+	#localize = new UmbLocalizationController(this);
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => {
+			this.#notificationContext = notificationContext;
+		});
+
+		window.addEventListener('online', () => this.#onOnline());
+		window.addEventListener('offline', () => this.#onOffline());
+	}
+
+	#onOnline() {
+		this.#offlineNotification?.close();
+		this.#notificationContext?.peek('positive', {
+			data: {
+				headline: this.#localize.term('speechBubbles_onlineHeadline'),
+				message: this.#localize.term('speechBubbles_onlineMessage'),
+			},
+		});
+	}
+
+	#onOffline() {
+		this.#offlineNotification = this.#notificationContext?.stay('danger', {
+			data: {
+				headline: this.#localize.term('speechBubbles_offlineHeadline'),
+				message: this.#localize.term('speechBubbles_offlineMessage'),
+			},
+		});
+	}
+
+	override destroy() {
+		this.#offlineNotification?.close();
+		this.removeEventListener('online', () => this.#onOnline());
+		this.removeEventListener('offline', () => this.#onOffline());
+		super.destroy();
+	}
+}

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -1492,6 +1492,8 @@ export default {
 		preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%',
 		copySuccessMessage: 'Your system information has successfully been copied to the clipboard',
 		cannotCopyInformation: 'Could not copy your system information to the clipboard',
+		offlineHeadline: 'Offline',
+		offlineMessage: 'You are currently offline. Please check your internet connection.',
 	},
 	stylesheet: {
 		addRule: 'Add style',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -1496,6 +1496,10 @@ export default {
 		scheduleErrExpireDate2: 'The expire date cannot be before the release date',
 		preventCleanupEnableError: 'An error occurred while enabling version cleanup for %0%',
 		preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%',
+		offlineHeadline: 'Offline',
+		offlineMessage: 'You are currently offline. Please check your internet connection.',
+		onlineHeadline: 'Online',
+		onlineMessage: 'You are now online. You can continue working.',
 	},
 	stylesheet: {
 		addRule: 'Add style',