Implement web worker to keep timer running even when page is inactive

2 files changed, 7 insertions, 8 deletions

diff --git a/app/javascript/controllers/timer_controller.js b/app/javascript/controllers/timer_controller.js
index 4888f6a..f6ba4f3 100644
--- a/app/javascript/controllers/timer_controller.js
+++ b/app/javascript/controllers/timer_controller.js
@@ -11,15 +11,12 @@ export default class extends Controller {
   }
 
   connect() {
-    if (!this.timerInterval) this.startUpdating();
+    App.timerWorker.postMessage({ "run_flag": true });
     this.timerTarget.textContent = Math.ceil(this.timeRemainingValue);
     this.postFailures = 0;
-  }
 
-  startUpdating() {
     let controller = this;
-    controller.timerInterval = setInterval(() => {
-
+    App.timerWorker.onmessage = function() {
       if (controller.timeRemainingValue > 0) {
         controller.timeRemainingValue = controller.timeRemainingValue - 0.01;
       }
@@ -28,11 +25,10 @@ export default class extends Controller {
         controller.timerTarget.textContent = Math.ceil(controller.timeRemainingValue).toString();
         controller.progressBarTarget.style.width = `${(1 - (controller.timeRemainingValue / controller.activityDurationValue)) * 100}%`;
       } else {
-        clearInterval(controller.timerInterval);
-        controller.timerInterval = null;
+        App.timerWorker.postMessage({ "run_flag": false });
         controller.finishActivity();
       }
-    }, 10);
+    }
   }
 
   finishActivity() {
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a18528e..65ab536 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -20,3 +20,6 @@ import { definitionsFromContext } from "stimulus/webpack-helpers"
 const application = Application.start()
 const context = require.context("../controllers", true, /\.js$/)
 application.load(definitionsFromContext(context))
+
+window.App = {};
+App.timerWorker = new Worker("/timer_worker.js");