在网络应用程序中注册内联服务工作者 [英] Register inline service worker in web app

问题描述

我想将Web推送通知添加到使用apps脚本托管的Web应用程序中.为此，我需要注册服务工作者，并且遇到跨域请求错误.原始内容从*.googleusercontent.com托管，而脚本URL为script.google.com/*.

我能够使用这篇文章成功创建内联工作器关于使用脚本从blob创建的内联URL的说明.现在，我只能在浏览器中注册工作人员.

以下模型有效:

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错误.

可以安装内联工人吗?还是所有已安装的工作程序都必须来自外部脚本?

解决方案

值得注意的是，用于推送通知的Web Worker和Service Worker是不同的(请参阅需要脚本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');
  }
}

但与此示例(关于为服务人员提取外国留存金的建议，但仍处于起草阶段. >

I'm toying with adding web push notifications to a web app hosted with apps script. To do so, I need to register a service worker and I ran into an error with a cross-domain request. Raw content is hosted from *.googleusercontent.com while the script URL is script.google.com/*.

I was able to successfully create an inline worker using this post on creating inline URLs created from a blob with the script. Now I'm stuck at the point of registering the worker in the browser.

The following model works:

HTML

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

Service Worker

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

  })
</script> 

Inline install

<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); returns a 400: Bad HTTP response code error.

Can inline workers be installed? Or do all installed workers have to come from external scripts?

解决方案

It's worth noting that Web Workers and Service Workers, which are used with push notifications, are different (see this SO response to read about the difference).

According to MDN Service Workers require a script URL. In Google Apps Script you could serve a service worker file with something like:

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');
  }
}

But as in this example (source code here) because of the way web apps are served you'll encounter the error:

SecurityError: Failed to register a ServiceWorker: The script resource is behind a redirect, which is disallowed.

There was a proposal for Foreign Fetch for Service Workers but it's still in draft.

这篇关于在网络应用程序中注册内联服务工作者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！