在 Web 应用程序中注册内联服务人员

Posted 2023-02-24

【中文标题】在 Web 应用程序中注册内联服务人员

【英文标题】：Register inline service worker in web app

【发布时间】：2017-11-07 16:51:25

【问题描述】：

我正在尝试将网络推送通知添加到使用应用程序脚本托管的网络应用程序中。为此，我需要注册一个服务工作者，但我遇到了一个跨域请求错误。原始内容托管在 *.googleusercontent.com，而脚本 URL 是 script.google.com/*。

在使用脚本创建从blob 创建的内联 URL 时，我能够使用 this post 成功创建内联工作程序。现在我被困在浏览器中注册工作者的点上。

以下模型有效：

HTML

<!-- Display the worker status -->
<div id="log"></log>

服务工作者

<script id="worker" type="javascript/worker">
  self.onmessage = function(e) 
    self.postMessage('msg from worker');
  ;
  console.log('[Service Worker] Process started');

  )
</script> 

内联安装

<script>
  function log(msg) 
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.createTextNode(msg));
    fragment.appendChild(document.createElement('br'));

    document.querySelector("#log").appendChild(fragment);
  

  // Create the object with the script
  var blob = new Blob([ document.querySelector("#worker").textContent ]);

  // assign a absolute URL to the obejct for hosting
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) 
    log("Received: " + e.data);
  

  worker.postMessage('start');
  // navigator.serviceWorker.register(worker) this line fails
</script>

navigator.serviceWorker.register(worker); 返回 400: Bad HTTP response code 错误。

可以安装 inline Worker 吗？还是所有已安装的工作人员都必须来自外部脚本？

【参考方案1】：

值得注意的是，与推送通知一起使用的 Web Workers 和 Service Workers 是不同的（请参阅this SO response to read about the difference）。

根据 MDN Service Workers require a script URL。在 Google Apps 脚本中，您可以使用以下内容提供服务工作人员文件：

function doGet(e) 
  var file = e.parameter.file;
  if (file == 'service-worker.js')
    return ContentService.createTextOutput(htmlService.createHtmlOutputFromFile('service-worker.js').getContent())
                         .setMimeType(ContentService.MimeType.JAVASCRIPT);
   else 
    return HtmlService.createHtmlOutputFromFile('index');
  

但在 this example (source code here) 中，由于 Web 应用程序的服务方式，您会遇到错误：

SecurityError: 注册 ServiceWorker 失败：脚本资源位于重定向后面，这是不允许的。

有一个proposal for Foreign Fetch for Service Workers ，但它仍在草稿中。

【讨论】：

关于 Foreign Fetch，最近从 Service Worker 中删除。请参阅github.com/w3c/ServiceWorker/pull/1207 和github.com/w3c/ServiceWorker/issues/1188 的相关问题