Skip to content

Expose getState and setState in a more "official" way in PWAs #24982

@mattwomple

Description

@mattwomple

Describe the new feature you'd like to see

PWAs could benefit from easy to access ampdoc.getState() and ampdoc.setState() methods that get and set amp-bind states, respectively. These methods should be documented in the AMP Shadow Doc API documentation (and hopefully amp.dev as well someday)

Additional context

A common practice when developing PWAs is to replace the header in the AMP page with a static header in the PWA that does not disappear on page navigation. Since this header lives outside the AMP document, we need a means of communication between the two. For example, if a <select> exists in the header to change the currency (e.g. MXN, CAD, USD) displayed on the page, then an event listener can be attached and ampdoc.setState() fired. Similarly, ampdoc.getState() could be used as a means of obtaining state updates after users interact with the AMP page, giving us the opportunity to modify the header.

Describe alternatives you've considered

It is possible to get/set amp-bind states today using undocumented methods. For example:

await __AMP_SERVICES.bind.obj.setState({product: {currency: 'USD'}});
const product = JSON.parse(await __AMP_SERVICES.bind.obj.getStateValue('product'));

Even without these methods, "hackier" methods can be used to achieve the same goal: insert button in page that contains on="tap:AMP.setState()" and read history.state.data["amp-bind"].

It's hard for me to image all workarounds being squashed, so it would be worthwhile to embrace PWA access to get/set amp-bind states as a feature.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions