Amphtml: amp-next-page not working with amp-shadow-doc-loader

Created on 10 Jul 2018  路  6Comments  路  Source: ampproject/amphtml

What's the issue?

amp-next-page is not working when using the shadow dom

How do we reproduce the issue?

When loading a amp shadow that contains amp-next-pages the next-page service of the current window is an empty service as we should check the services of the current shadow dom instead of the window.

screen shot 2018-07-10 at 17 41 55

What browsers are affected?

All browsers

Which AMP version is affected?

Version 1530567757224

PWA Soon Bug

Most helpful comment

a solution I found is to get the service when needed and not in the constructor:
so on: buildCallback

/** @override */
  buildCallback() {
....
    getServicePromiseForDoc(this.getAmpDoc(), SERVICE_ID).then(service => {
        service.register(element, config, separator);
        service.setAppendPageHandler(element => this.appendPage_(element));
    });
}

any thoughts?

All 6 comments

a solution I found is to get the service when needed and not in the constructor:
so on: buildCallback

/** @override */
  buildCallback() {
....
    getServicePromiseForDoc(this.getAmpDoc(), SERVICE_ID).then(service => {
        service.register(element, config, separator);
        service.setAppendPageHandler(element => this.appendPage_(element));
    });
}

any thoughts?

This issue doesn't seem to be specific to amp-next-page, I'm seeing the same error when trying to use amp-web-push in a shadow document as well.

Who's the best person to look at shadow DOM/service interactions?

Switching from getService() to getServiceForDoc() in the AmpNextPage constructor fixes this (in my test case), but is there anything more general we can do to fix this for other extensions which do the same thing? (register an extension against the doc but try to read it from the window)

Specifically: getService() gets services from window when in single doc mode, but from AmpDoc when in a shadow doc.

/cc @danielrozenberg @choumx @aghassemi

Correct, services that need to be accessed in PWA context should be registered and retrieved using forDoc variants. Pass in either the custom element or this.getAmpDoc() (available after buildCallback) to the service getter.

We have some upcoming initiatives to make this API more intuitive. Let me know if you have any questions.

Was this page helpful?
0 / 5 - 0 ratings