Limitations

The History API is often used for Single Page Applications (SPAs) as allows the browser's history (and address bar) to be manipulated. This means that the user can enjoy a SPA feeling, while continuing to utilise the back button on the browser, or the browser's history.

Unfortunately due to the scope of the Document Object Model (DOM) worker, amp-script is not able to manipulate the address bar nor the DOM after a few seconds post-user-gesture. The change in 'popstate' (when you press the back button) is not considered a user-gesture, thus the amp-script terminates completely.

• ⃠ ‣ ️[amp-script] amp-script[script="main-script"].js was terminated due to illegal mutation.

  log.js:244

amp-script removes HTML that is not permitted to be injected into the Document Object Model (DOM) by the worker. There are many components currently unsupported, including the brilliantly developed carousel and accordions.

• ⚠ ‣ [amp-script] Sanitized node: 

  <amp-accordion></amp-accordion>

  log.js:244

• ⚠ ‣ [amp-script] Sanitized node: 

  <amp-carousel></amp-carousel>

  log.js:244

One of the most important and beloved functions for JavaScript developers when it comes to creating SEO friendly SPAs:

e.preventDefault()

e.preventDefault() stops the browser from performing the default actions upon an event; for example when a user clicks on a link, the default behaviour of a browser is to navigate to the destination of the link. e.preventDefault() can stop this behaviour, while not completely removing the link; which is why this is such a useful function for server-side rendered Single Page Applications.

Unfortunately amp-script ignores this function.

As the head section of the page is only requested once and the scope of the DOM worker is limited to be within the body of the page, other AMP-components cannot be loaded at later pages and must be loaded on the initial hit.

The sanitisation process also causes many of the AMP components to be sanitised, meaning other solutions must be explored to ensure that the desired look and feel can be achieved.

For this project we have been able to make a pure HTML and CSS accordion and carousel, in order to avoid AMP components being sanitised.

As the scope of the DOM worker is restricted to the amp-script container (which must be located within the body element), the worker is unable to update metadata within the head of the pages.

This ultimately means that the page title, meta description and canonical tag cannot be automatically updated as the user navigates around the website.