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

我们已经浏览了所有可能的 AMP 博客，但找不到任何在 AMP 中包含自定义 JS 的方法。这个博客（https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker) 表示我们可以在 Service Worker 的帮助下在 AMP 中添加自定义 JS，但没有描述如何操作。

请让我们知道如何做。

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

请注意，在提到的博客文章中，您可以扩展 AMP 页面

一旦从原产地送达

拥有 Service Worker 本身并不能让您免受 AMP 限制。但是，如果您在 AMP 页面中安装了 Service Worker，则您可以开始将 AMP 用作（渐进式）Web 应用程序，限制较少。您可以使用多种模式 -本文 https://www.smashingmagazine.com/2016/12/progressive-web-amps/涵盖主要模式和这个 Google Codelab https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0向您展示如何实施它们。

希望有帮助！

EDIT:

是的，好吧，我明白你的意思了。您可以通过将以下代码添加到 Service Worker 来实现此目的：

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 缓存），因为这是您的服务工作人员可以控制的地方。

这个资源 https://www.safaribooksonline.com/library/view/amp-building-accelerated/9781786467317/72b076a8-857f-401f-bca6-0a507473c001.xhtml是我找到代码示例的地方（它有一个软付费专区）。

让我知道它是否有效！ :)