decrease refresh interval if app is hidden

src/App.vue

@@ -77,6 +77,7 @@ export default {
 			undoNotification: null,
 			undoTimer: null,
 			deletedNotes: [],
+			refreshTimer: null,
 		}
 	},
 
@@ -118,9 +119,15 @@ export default {
 	created() {
 		store.commit('setDocumentTitle', document.title)
 		window.addEventListener('beforeunload', this.onClose)
+		document.addEventListener('visibilitychange', this.onVisibilityChange)
 		this.loadNotes()
 	},
 
+	destroyed() {
+		document.removeEventListener('visibilitychange', this.onVisibilityChange)
+		this.stopRefreshTimer()
+	},
+
 	methods: {
 		loadNotes() {
 			fetchNotes()
@@ -147,10 +154,34 @@ export default {
 				})
 				.then(() => {
 					this.loading.notes = false
-					setTimeout(this.loadNotes, config.interval.notes.refresh * 1000)
+					this.startRefreshTimer(config.interval.notes.refresh)
 				})
 		},
 
+		startRefreshTimer(seconds) {
+			if (this.refreshTimer === null && document.visibilityState === 'visible') {
+				this.refreshTimer = setTimeout(() => {
+					this.refreshTimer = null
+					this.loadNotes()
+				}, seconds * 1000)
+			}
+		},
+
+		stopRefreshTimer() {
+			if (this.refreshTimer !== null) {
+				clearTimeout(this.refreshTimer)
+				this.refreshTimer = null
+			}
+		},
+
+		onVisibilityChange() {
+			if (document.visibilityState === 'visible') {
+				this.startRefreshTimer(config.interval.notes.refreshAfterHidden)
+			} else {
+				this.stopRefreshTimer()
+			}
+		},
+
 		reloadNotes() {
 			if (this.$route.path !== '/') {
 				this.$router.push('/')

src/components/Note.vue

@@ -174,6 +174,7 @@ export default {
 		document.addEventListener('mozfullscreenchange', this.onDetectFullscreen)
 		document.addEventListener('fullscreenchange', this.onDetectFullscreen)
 		document.addEventListener('keydown', this.onKeyPress)
+		document.addEventListener('visibilitychange', this.onVisibilityChange)
 	},
 
 	destroyed() {
@@ -182,6 +183,7 @@ export default {
 		document.removeEventListener('mozfullscreenchange', this.onDetectFullscreen)
 		document.removeEventListener('fullscreenchange', this.onDetectFullscreen)
 		document.removeEventListener('keydown', this.onKeyPress)
+		document.removeEventListener('visibilitychange', this.onVisibilityChange)
 		store.commit('setSidebarOpen', false)
 		this.onUpdateTitle(null)
 	},
@@ -268,6 +270,13 @@ export default {
 			this.actionsOpen = false
 		},
 
+		onVisibilityChange() {
+			if (document.visibilityState === 'visible') {
+				this.stopRefreshTimer()
+				this.refreshNote()
+			}
+		},
+
 		stopRefreshTimer() {
 			if (this.refreshTimer !== null) {
 				clearTimeout(this.refreshTimer)
@@ -277,10 +286,11 @@ export default {
 
 		startRefreshTimer() {
 			this.stopRefreshTimer()
+			const interval = document.visibilityState === 'visible' ? config.interval.note.refresh : config.interval.note.refreshHidden
 			this.refreshTimer = setTimeout(() => {
 				this.refreshTimer = null
 				this.refreshNote()
-			}, config.interval.note.refresh * 1000)
+			}, interval * 1000)
 		},
 
 		refreshNote() {

src/config.js

@@ -4,9 +4,11 @@ export const config = {
 			autosave: 1,
 			autotitle: 2,
 			refresh: 10,
+			refreshHidden: 120,
 		},
 		notes: {
 			refresh: 25,
+			refreshAfterHidden: 2,
 		},
 	},
 }