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

This will send a final save request on unsaved changes via the browsers
native `navigator.sendBeacon()` function when navigating away from the
website or the tab/browser is closed.

Fixes: #6606

Signed-off-by: Jonas <jonas@freesources.org>

src/components/Editor.vue

@@ -678,7 +678,10 @@ export default {
 				) {
 					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 @@ export default {
 		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/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 {
@@ -110,8 +111,9 @@ export class Connection {
 		})
 	}
 
-	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,
@@ -120,7 +122,14 @@ export class Connection {
 			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 @@ class SyncService {
 		}
 	}
 
+	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 })
 	}