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

时间:2018-01-31 13:55:21

标签: javascript service-worker amp-html

我们已经从所有可能的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后,它再次显示相同的旧错误,请查看图片

enter image description here

3 个答案:

答案 0 :(得分: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是我找到代码示例的地方(它有一个软的付费专区)。

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

答案 1 :(得分:1)

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

请参阅this thread

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

答案 2 :(得分:0)

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

  

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

How to use amp-install-serviceworker? CLICK HERE