added automatic client page reload (#3188)

solution for #3105 

~~not sure if updatenotification is the right place, so opinions?~~

now impleneted in `main.js`

CHANGELOG.md

@@ -19,6 +19,7 @@ _This release is scheduled to be released on 2023-10-01._
 - Added optional AnimateCSS animate for `hide()`, `show()`, `updateDom()`
 - Added AnimateIn and animateOut in module config definition
 - Apply AnimateIn rules on the first start
+- Added automatic client page reload when server was restarted by setting `reloadAfterServerRestart: true` in `config.js`, per default `false` (#3105)
 
 ### Removed
 

js/defaults.js

@@ -29,6 +29,11 @@ const defaults = {
 	// e.g. you need to add `frameguard: false` for embedding MagicMirror in another website, see https://github.com/MichMich/MagicMirror/issues/2847
 	httpHeaders: { contentSecurityPolicy: false, crossOriginOpenerPolicy: false, crossOriginEmbedderPolicy: false, crossOriginResourcePolicy: false, originAgentCluster: false },
 
+	// properties for checking if server is alive and has same startup-timestamp, the check is per default enabled
+	// (interval 30 seconds). If startup-timestamp has changed the client reloads the magicmirror webpage.
+	checkServerInterval: 30 * 1000,
+	reloadAfterServerRestart: false,
+
 	modules: [
 		{
 			module: "updatenotification",

js/main.js

@@ -568,12 +568,33 @@ const MM = (function () {
 		 */
 		modulesStarted: function (moduleObjects) {
 			modules = [];
+			let startUp = "";
+
 			moduleObjects.forEach((module) => modules.push(module));
 
 			Log.info("All modules started!");
 			sendNotification("ALL_MODULES_STARTED");
 
 			createDomObjects();
+
+			if (config.reloadAfterServerRestart) {
+				setInterval(async () => {
+					// if server startup time has changed (which means server was restarted)
+					// the client reloads the mm page
+					try {
+						const res = await fetch(`${location.protocol}//${location.host}/startup`);
+						const curr = await res.text();
+						if (startUp === "") startUp = curr;
+						if (startUp !== curr) {
+							startUp = "";
+							window.location.reload(true);
+							console.warn("Refreshing Website because server was restarted");
+						}
+					} catch (err) {
+						Log.error(`MagicMirror not reachable: ${err}`);
+					}
+				}, config.checkServerInterval);
+			}
 		},
 
 		/**

js/server.js

@@ -15,7 +15,7 @@ const socketio = require("socket.io");
 
 const Log = require("logger");
 const Utils = require("./utils");
-const { cors, getConfig, getHtml, getVersion } = require("./server_functions");
+const { cors, getConfig, getHtml, getVersion, getStartup } = require("./server_functions");
 
 /**
  * Server
@@ -91,6 +91,8 @@ function Server(config) {
 
 			app.get("/config", (req, res) => getConfig(req, res));
 
+			app.get("/startup", (req, res) => getStartup(req, res));
+
 			app.get("/", (req, res) => getHtml(req, res));
 
 			server.on("listening", () => {

js/server_functions.js

@@ -1,6 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 const Log = require("logger");
+const startUp = new Date();
 
 /**
  * Gets the config.
@@ -11,6 +12,15 @@ function getConfig(req, res) {
 	res.send(config);
 }
 
+/**
+ * Gets the startup time.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getStartup(req, res) {
+	res.send(startUp);
+}
+
 /**
  * A method that forwards HTTP Get-methods to the internet to avoid CORS-errors.
  *
@@ -117,4 +127,4 @@ function getVersion(req, res) {
 	res.send(global.version);
 }
 
-module.exports = { cors, getConfig, getHtml, getVersion };
+module.exports = { cors, getConfig, getHtml, getVersion, getStartup };