Question

我正在使用带有 webpacker 的标准 Rails 6 设置。我正在为 JavaScript 使用 Stimulus，但这并不重要。

对于我的应用程序，我有一个计时器，即使浏览器选项卡未处于活动状态，它也需要继续运行。由于 setInterval 似乎可以在选项卡未处于活动状态时停止，因此我已深入编写网络工作者。我已阅读 this question，但它的解决方案似乎不适合现代 Rails。

我希望我可以通过我的 Stimulus 控制器来处理这一切，但我的理解是 web worker 文件需要分开，所以我想弄清楚如何正确加载它。

我为工作人员创建了一个文件，timer.js。我应该把这个文件放在哪里，我怎样才能引用它的 URL 来启动它？

我需要能够在我的一个视图 ERB 文件中呈现其 URL，以便我可以将其 URL 传递给 Stimulus 控制器，然后使用 new Worker(theUrl) 启动工作程序。但是，<%= javascript_path(...) %> 似乎仅适用于资产管道。
我想在我的工作文件中使用 import Rails from "@rails/ujs" 以便我可以使用它轻松地发出 AJAX POST 请求，所以我假设工作文件需要以某种方式与 webpack 绑定。

目前我只是把它放在 public/timer.js，但我在加载时在浏览器控制台中出现错误，所以我认为我做错了：

SyntaxError: import declarations may only appear at top level of a module

在 Rails 6 中加载网络工作者的正确方法是什么？

timer.js

这是工作文件的内容，以防万一。（我知道这很粗糙；这只是草稿。）

import Rails from "@rails/ujs";

let timerInterval = null;
let timeRemaining = null;
let postFailures = 0;
let postUrl = null;

function finishActivity() {
  Rails.ajax({
    type: "POST",
    url: postUrl,
    success: () => {
      postFailures = 0;
    },
    error: () => {
      postFailures++;
      if (postFailures < 5) {
        setTimeout(finishActivity, 1000);
      } else {
        alert("Error.");
      }
    },
  });
}

self.addEventListener("message", (event) => {
  if (event.data.timeRemaining) {
    timeRemaining = event.data.timeRemaining;
    if (timerInterval) clearInterval(timerInterval);
    timerInterval = setInterval(() => {
      if (timeRemaining > 0) {
        timeRemaining = timeRemaining - 0.01;
        postMessage({ timeRemaining: timeRemaining });
      } else {
        timerInterval = null;
        clearInterval(timerInterval);
        finishActivity();
      }
    }, 10);
  }
  if (event.data.postUrl) {
    postUrl = event.data.postUrl;
  }
}, false);

什么是 Rails 6 加载网络工作者的方式？

timer.js

0 个答案: