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

Implementation details:
* While `beforeunload` event is less reliable than `visibilitychange`
  according to different sources on the internet, tests in Firefox on
  Linux desktop revealed that `visibilitychange` event doesn't fire when
  opening a new website in the same tab. `beforeunload` on the other
  hand reliably worked when switching web page and closing tab/browser.
* We add and remove the `beforeunload` event with every `dirty` state
  change because according to MDN documentation websites with a
  registered `beforeunload` event don't benefit from bfcache optimization.
  See https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Signed-off-by: Jonas <[email protected]>

src/components/Editor.vue

@@ -346,6 +346,13 @@ export default {
 				this.updateEditorWidth(newWidth)
 			},
 		},
+		dirty(val) {
+			if (val) {
+				window.addEventListener('beforeunload', this.saveBeforeUnload)
+			} else {
+				window.removeEventListener('beforeunload', this.saveBeforeUnload)
+			}
+		},
 	},
 	mounted() {
 		if (this.active && (this.hasDocumentParameters)) {
@@ -883,6 +890,10 @@ export default {
 		updateEditorWidth(newWidth) {
 			document.documentElement.style.setProperty('--text-editor-max-width', newWidth)
 		},
+
+		saveBeforeUnload() {
+			this.$syncService?.saveViaSendBeacon()
+		},
 	},
 }
 </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 {
@@ -105,17 +106,30 @@
 		})
 	}
 
-	save({ version, autosaveContent, documentState, force, manualSave }) {
-		return this.#post(this.#url(`session/${this.#document.id}/save`), {
+	save(data) {
+		const url = this.#url(`session/${this.#document.id}/save`)
+		const postData = {
 			...this.#defaultParams,
 			filePath: this.#options.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
-			version,
-			autosaveContent,
-			documentState,
-			force,
-			manualSave,
-		})
+			...data,
+		}
+
+		return this.#post(url, postData)
+	}
+
+	saveViaSendBeacon(data) {
+		const url = this.#url(`session/${this.#document.id}/save`)
+		const postData = {
+			...this.#defaultParams,
+			filePath: this.#options.filePath,
+			baseVersionEtag: this.#document.baseVersionEtag,
+			...data,
+			requestToken: getRequestToken() ?? '',
+		}
+
+		const blob = new Blob([JSON.stringify(postData)], { type: 'application/json' })
+		return navigator.sendBeacon(url, blob)
 	}
 
 	push({ steps, version, awareness }) {

src/services/SyncService.js

@@ -218,7 +218,7 @@
 						this.emit('error', { type: ERROR_TYPE.PUSH_FORBIDDEN, data: {} })
 					}
 					// TODO: does response.data ever have a document? maybe for errors?
 					// TODO: `currentVersion` is always 0 nowadays. Check if this is still needed.
 					// Only emit conflict event if we have synced until the latest version
 					if (response.data.document?.currentVersion === this.version) {
 						this.emit('error', { type: ERROR_TYPE.PUSH_FAILURE, data: {} })
@@ -300,6 +300,17 @@
 		}
 	}
 
+	saveViaSendBeacon() {
+		this.#connection.saveViaSendBeacon({
+			version: this.version,
+			autosaveContent: this._getContent(),
+			documentState: this.getDocumentState(),
+			force: false,
+			manualSave: true,
+		})
+		logger.debug('[SyncService] saved using sendBeacon')
+	}
+
 	forceSave() {
 		return this.save({ force: true })
 	}