-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Description
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.