feat(session): Send save request via sendBeacon at beforeunload

src/components/Editor.vue

@@ -678,7 +678,10 @@
 				) {
 					this.dirty = state.dirty
 					if (this.dirty) {
+						window.addEventListener('beforeunload', this.saveBeforeUnload)
 						this.$syncService.autosave()
+					} else {
+						window.removeEventListener('beforeunload', this.saveBeforeUnload)
 					}
 				}
 			}
@@ -887,6 +890,13 @@
 		updateEditorWidth(newWidth) {
 			document.documentElement.style.setProperty('--text-editor-max-width', newWidth)
 		},
+
+		async saveBeforeUnload(event) {
+			if (!this.dirty && !this.document.hasUnsavedChanges) {
+				return
+			}
+			await this.$syncService.saveNoWait()
+		},
 	},
 }
 </script>

src/components/Editor/Status.vue

@@ -89,22 +89,19 @@
 			return this.dirtyStateIndicator ? t('text', 'Saving …') : t('text', 'Saved')
 		},
 		dirtyStateIndicator() {
-			return this.dirty || this.hasUnsavedChanges
+			return this.dirty || this.document.hasUnsavedChanges
 		},
 		lastSavedStatusTooltip() {
 			let message = t('text', 'Last saved {lastSave}', { lastSave: this.lastSavedString })
 			if (this.hasSyncCollission) {
 				message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
 			}
-			if (this.dirty || this.hasUnsavedChanges) {
+			if (this.dirty || this.document.hasUnsavedChanges) {
 				message += ' - ' + t('text', 'Unsaved changes')
 			}
 			return message
 		},
 
-		hasUnsavedChanges() {
-			return this.document && this.document.lastSavedVersion < this.document.currentVersion
-		},
 		hasSyncCollission() {
 			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
 		},

src/services/SessionApi.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import axios from '@nextcloud/axios'
+import { getRequestToken } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 
 export class ConnectionClosedError extends Error {
@@ -88,6 +89,10 @@
 		return this.closed
 	}
 
+	get hasUnsavedChanges() {
+		return this.#document && this.#document.lastSavedVersion < this.#document.currentVersion
+	}
+
 	get #defaultParams() {
 		return {
 			documentId: this.#document.id,
@@ -106,8 +111,9 @@
 		})
 	}
 
-	save({ version, autosaveContent, documentState, force, manualSave }) {
-		return this.#post(this.#url(`session/${this.#document.id}/save`), {
+	save({ version, autosaveContent, documentState, force, manualSave, useSendBeacon = false }) {
+		const url = this.#url(`session/${this.#document.id}/save`)
+		const data = {
 			...this.#defaultParams,
 			filePath: this.#options.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
@@ -116,7 +122,14 @@
 			documentState,
 			force,
 			manualSave,
-		})
+		}
+
+		if (useSendBeacon) {
+			data.requesttoken = getRequestToken() ?? ''
+			const blob = new Blob([JSON.stringify(data)], { type: 'application/json' })
+			return navigator.sendBeacon(url, blob)
+		}
+		return this.#post(url, data)
 	}
 
 	push({ steps, version, awareness }) {

src/services/SyncService.js

@@ -299,6 +299,18 @@
 		}
 	}
 
+	async saveNoWait() {
+		await this.#connection.save({
+			version: this.version,
+			autosaveContent: this._getContent(),
+			documentState: this.getDocumentState(),
+			force: false,
+			manualSave: true,
+			useSendBeacon: true,
+		})
+		logger.debug('[SyncService] saved using sendBeacon (nowait)')
+	}
+
 	forceSave() {
 		return this.save({ force: true })
 	}