GoogleChromeLabs / GoogleChromeLabs/quicklink

Quicklink causes desynchronizations between pages for users login and cart counter

Open
#413 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11.3k
Forks
429
PR merge metrics
No merged PRs in 30d

Description

Hello, I am experiencing a problem with the synchronization of the between pages for whenever user interactions can lead to differences in the DOM. I don't know if this is more a request for clarification then a feature one, so excuse me in advance.

My application is based on liquid and many operations that could change the way the UI is presented to the user happen server-side. For example, both the cart counter and the menu (with account icon etc.) are filled with data coming from the server, which doesn't rely on operations made through JS client side. Fact is, when quicklink prefetches the link before the user logs in or add an item to the cart of course that link will hold the "previous" state so that when the user will navigate he will find either the account or the cart desynchronized.
Let me specify that these operations don't happen in specific pages. Cart additions and logins can happen and redirect to a bunch of different urls so the idea of fixing the problem using the "ignores" property is unfortunately unfeasible.

What I wanted to understand then is if there was a way I could reset the cache state.
The documentation says that the listen function returns a reset function. Can you tell me more about how it works? Cause it doesn't seem to change much. Previously prefetched links still lead to a desynchronized page.

The following is our quicklink script. We tried to do some experiments trying to call the return function from the listen method when some events happen. Still, it doesn't seem to reset and restart listening to the links.

Is there something I am missing?

```html

function startQuickLink() {
console.log("QUICKLINK STARTING")
window.quicklinkReset = quicklink.listen({
origins: true,
ignores: [
/\/api\/?/,
/\/account\/?/,
/\/cart\/?/,
uri => uri.includes('apps/check-order-status'),
uri => uri.includes('apps/return-and-exchanges'),
uri => uri.includes('#'),
uri => uri.includes('javascript:void(0)'),
(uri, elem) => elem.hasAttribute('noprefetch')
]
});

}

window.addEventListener('load', () => {
startQuickLink();

subscribe(PUB_SUB_EVENTS.cartUpdate, () => {
console.log("window.quicklinkReset")
window.quicklinkReset()
startQuickLink()
})

subscribe(PUB_SUB_EVENTS.login, () => {
console.log("window.quicklinkReset")
window.quicklinkReset()
startQuickLink()
})
});

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.