visibility change and visibility state to drive web worker processing, pause and resume

visibility-pause-resume-worker.js

// 30 May 2024
// visibility change and visibility state to drive web worker processing,
// pause and resume.

// pretty sure I'd done this in 2022 or 2023.

// next version implements close and restart...
// https://gist.github.com/dfkaye/ee75271dd58e489d3a3ab9d209e51e02

var source = `
  var count = 0;
  var interval;

  self.actions = {
    init() {
      interval = setInterval(function () {
        count += 1;
        postMessage({ action: "advanced", value: count });
      }, 1000);
    },
    pause() {
      clearInterval(interval);
      postMessage({ action: "paused", value: count });
    },
    resume() {
      actions.init();
      postMessage({ action: "resumed", value: count });
    }
  };

  self.onmessage = function (request) {
    var { action, value } = Object(request.data);
    var fn = self.actions[action];
    typeof fn == "function"
      ? fn()
      : console.error("no action for", action);
  };

  actions.init();
`;
var blob = new Blob([source], { type: "text/javascript" });
var url = URL.createObjectURL(blob);
var worker = new Worker(url);
worker.onmessage = function (response) {
  var { action, value } = Object(response.data);

  console.log(action, value);
};

document.onvisibilitychange = function (e) {
  var { visibilityState } = e.target;
  var action = visibilityState == 'hidden'
    ? 'pause'
    : 'resume';
  worker.postMessage({ action });
};