fix: Client crashing on firefox private window (#32807)

.changeset/new-balloons-speak.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed web client crashing on Firefox private window. Firefox disables access to service workers inside private windows. Rocket.Chat needs service workers to process E2EE encrypted files on rooms. These types of files won't be available inside private windows, but the rest of E2EE encrypted features should work normally

apps/meteor/client/components/message/content/attachments/structure/AttachmentDownloadBase.tsx

@@ -6,18 +6,19 @@ import Action from '../../Action';
 
 type AttachmentDownloadBaseProps = Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string };
 
-const AttachmentDownloadBase: FC<AttachmentDownloadBaseProps> = ({ title, href, ...props }) => {
+const AttachmentDownloadBase: FC<AttachmentDownloadBaseProps> = ({ title, href, disabled, ...props }) => {
 	const t = useTranslation();
 
 	return (
 		<Action
 			icon='cloud-arrow-down'
 			href={`${href}?download`}
-			title={t('Download')}
+			title={disabled ? t('Download_Disabled') : t('Download')}
 			is='a'
 			target='_blank'
 			rel='noopener noreferrer'
 			download={title}
+			disabled={disabled}
 			{...props}
 		/>
 	);

apps/meteor/client/hooks/useDownloadFromServiceWorker.ts

@@ -7,13 +7,15 @@ import { downloadAs } from '../lib/download';
 
 const ee = new Emitter<Record<string, { result: ArrayBuffer; id: string }>>();
 
-navigator.serviceWorker.addEventListener('message', (event) => {
-	if (event.data.type === 'attachment-download-result') {
-		const { result } = event.data as { result: ArrayBuffer; id: string };
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.addEventListener('message', (event) => {
+		if (event.data.type === 'attachment-download-result') {
+			const { result } = event.data as { result: ArrayBuffer; id: string };
 
-		ee.emit(event.data.id, { result, id: event.data.id });
-	}
-});
+			ee.emit(event.data.id, { result, id: event.data.id });
+		}
+	});
+}
 
 export const registerDownloadForUid = (uid: string, t: ReturnType<typeof useTranslation>['t'], title?: string) => {
 	ee.once(uid, ({ result }) => {
@@ -23,8 +25,13 @@ export const registerDownloadForUid = (uid: string, t: ReturnType<typeof useTran
 
 export const forAttachmentDownload = (uid: string, href: string, controller?: ServiceWorker | null) => {
 	if (!controller) {
-		controller = navigator.serviceWorker.controller;
+		controller = navigator?.serviceWorker?.controller;
+	}
+
+	if (!controller) {
+		return;
 	}
+
 	controller?.postMessage({
 		type: 'attachment-download',
 		url: href,
@@ -33,7 +40,7 @@ export const forAttachmentDownload = (uid: string, href: string, controller?: Se
 };
 
 export const useDownloadFromServiceWorker = (href: string, title?: string) => {
-	const { controller } = navigator.serviceWorker;
+	const { controller } = navigator?.serviceWorker || {};
 
 	const uid = useUniqueId();
 

apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItemMenu.tsx

@@ -17,21 +17,24 @@ type FileItemMenuProps = {
 
 const ee = new Emitter<Record<string, { result: ArrayBuffer; id: string }>>();
 
-navigator.serviceWorker.addEventListener('message', (event) => {
-	if (event.data.type === 'attachment-download-result') {
-		const { result } = event.data as { result: ArrayBuffer; id: string };
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.addEventListener('message', (event) => {
+		if (event.data.type === 'attachment-download-result') {
+			const { result } = event.data as { result: ArrayBuffer; id: string };
 
-		ee.emit(event.data.id, { result, id: event.data.id });
-	}
-});
+			ee.emit(event.data.id, { result, id: event.data.id });
+		}
+	});
+}
 
 const FileItemMenu = ({ fileData, onClickDelete }: FileItemMenuProps) => {
 	const t = useTranslation();
 	const room = useRoom();
 	const userId = useUserId();
 	const isDeletionAllowed = useMessageDeletionIsAllowed(room._id, fileData, userId);
+	const canDownloadFile = !fileData.encryption || 'serviceWorker' in navigator;
 
-	const { controller } = navigator.serviceWorker;
+	const { controller } = navigator?.serviceWorker || {};
 
 	const uid = useUniqueId();
 
@@ -53,6 +56,10 @@ const FileItemMenu = ({ fileData, onClickDelete }: FileItemMenuProps) => {
 			),
 			action: () => {
 				if (fileData.path?.includes('/file-decrypt/')) {
+					if (!controller) {
+						return;
+					}
+
 					controller?.postMessage({
 						type: 'attachment-download',
 						url: fileData.path,
@@ -68,6 +75,7 @@ const FileItemMenu = ({ fileData, onClickDelete }: FileItemMenuProps) => {
 					URL.revokeObjectURL(fileData.url);
 				}
 			},
+			disabled: !canDownloadFile,
 		},
 		...(isDeletionAllowed &&
 			onClickDelete && {

packages/i18n/src/locales/en.i18n.json

@@ -1756,6 +1756,7 @@
   "Dont_ask_me_again_list": "Don't ask me again list",
   "Download": "Download",
   "Download_Destkop_App": "Download Desktop App",
+  "Download_Disabled": "Download disabled",
   "Download_Info": "Download info",
   "Download_My_Data": "Download My Data (HTML)",
   "Download_Pending_Avatars": "Download Pending Avatars",