如何通过SW在AMP页面中包含自定义JS？

Question

我们已经从所有可能的AMP博客中了解到但是无法找到在AMP中包含自定义JS的任何方法。此博客（https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker）表示我们可以在服务工作者的帮助下在AMP中添加Custom JS，但无法解释如何执行此操作。

请告诉我们如何操作。

编辑： - 在运行时添加JS后，它再次显示相同的旧错误，请查看图片

Answer 1

请注意，在上述博客文章中，您可以扩展AMP页面

  

一旦他们从原点获得服务

拥有服务工作者本身并不能免除AMP限制。但是，如果您在AMP页面中安装了服务工作者，则可以开始将AMP用作（渐进式）Web应用程序，但限制较少。您可以使用多种模式 - this article涵盖主要模式，this Google Codelab显示如何实现它们。

希望有所帮助！

编辑：

是的，好吧，我明白你的意思了。您可以通过将此代码添加到服务工作者来实现此目的：

self.addEventListener('fetch', e => {
  var url = new URL(e.request.url);
  if(url.pathname.split('/').pop().endsWith('amp.html')) {
    e.respondWith(
      fetch(e.request).then(response => {
        var init = {
          status:     200,
          statusText: "OK",
          headers: {'Content-Type': 'text/html'}
        };
        return response.text().then(body => {
          body = body.replace('</body>', '<script src="extra.js" async ></script></body>');
          return new Response(body, init);
        });
      })
    );
  }
});

这会将extra.js文件动态添加到您的应用请求的所有*amp.html页面。我相信它仍然会验证，但我还没有测试过。

请注意，只有当它从您的源（而不是AMP缓存）提供时才会起作用，因为这是您的服务工作者可以控制的地方。

This resource是我找到代码示例的地方（它有一个软的付费专区）。

让我知道它是否有效！ ：）

Answer 2

@ DavidScales的答案很棒，如果你想出于某种原因通过服务工作者专门包含你的自定义JS。您也可以将自定义JS包含在页面上隐藏的amp-iframe中。请注意，必须更改所有自定义j以引用父级，以便它可以访问AMP页面的DOM。

请参阅this thread。

另请参阅this thread了解如何从iframe内部访问AMP页面。

Answer 3

amp-install-serviceworker组件可以通过相同的来源或通过Google AMP Cache安装服务工作者。

  

注意：服务工作者目前可在Chrome，Firefox和   戏。

How to use amp-install-serviceworker? CLICK HERE