window.history.back() when using local storage

[gdbaldw]

My static web pages have web components that share data through java-script accessed local storage. In local testing mode, window.history.back() loads the previous page with current data from local storage. However, when Rocket is built and deployed, window.history.back() retains stale data.

My fix is to add the following methods to the web component:

  connectedCallback() {
    // eslint-disable-next-line wc/guard-super-call
    super.connectedCallback();
    window.addEventListener('pageshow', this.getLocalStorage);
  }

  disconnectedCallback() {
    window.removeEventListener('pageshow', this.getLocalStorage);
    // eslint-disable-next-line wc/guard-super-call
    super.disconnectedCallback();
  }

This difference between development and production behavior may be intentional for static page performance, yes? Maybe, consider documenting a list of know differences between development mode and production mode?

[daKmoR]

what is this.getLocalStorage?

locally we don't use a service worker - that the only difference I can think of? as already visited pages will be served from the service worker without any network request...

however, that should have no influence on local storage...

so I don't really know what might be happening here 🙈

can you make a minimal reproduction?

[gdbaldw]

I have two web components: wc-A and wc-B. They reside on their own static web pages: page-A contains wc-A, and page-B contains wc-B. These web components communicate through local storage.

At firstUpdated, these web components update state using a core function I will name getLocalStorage.

Suppose I'm at page-A, and wc-A has a correct state. Then I go to page-B, and while at this page the web component wc-B writes to local storage. Next, I hit the back arrow, go back through history to page-A. In a local testing environment, page-A reloads, executes firstUpdated and getLocalStorage, and has the correct state. But, when built and deployed to Netlify, traversing back through history does not reload the page, firstUpdated is not executed, and web component wc-A now has stale state.

[daKmoR]

is the site live somewhere or can you push a specific part somewhere to I can take a look?

as far as I can tell this should work fine... so I am really surprised by this...

One potential reason could also be Chromes back-forward-cache... https://www.xda-developers.com/back-forward-google-chrome-faster-bfcache/

but again it should not happen...

[gdbaldw]

www.pro-sero.com , but my fix is implemented so the component updates properly. The two components are a shopping cart, where quantity may be updated, and a widget on all other pages, showing the quantity in the cart. I tested with Firefox on Ubuntu.

[gdbaldw]

@daKmoR Here's a minimal reproduction: Repository: https://github.com/gdbaldw/demo-local-store Live Site: https://admiring-leavitt-c72303.netlify.app

Click the button to increment its value. Click "Demo" for the next page, and click that button to increment its value. Then browser back.

In a Local Development environment, browser back reveals the current value; while at the Live Site, browser back reveals a stale value.

[daKmoR]

hmmm that page seems to works fine for me?

I am on Chrome 91.0.4472.114

[daKmoR]

[gdbaldw]

Impressive! But, on Firefox 89.0.2 (64-bit) for Ubuntu I see it as I had described. Sorry I'm not versed in github giffyness, to offer a reply gif.

[daKmoR]

I don't really think that this is a rocket issue 🙈 if I use the back button and look at the session storage in firefox it actually shows the wrong value...

so maybe that is the "expected" behavior in firefox 🤔 potentially if you could reproduce it with "just" plain js (or lit or pure web components) then it's potentially even worth reporting as an issue with lit or firefox itself? 🤔

closing this as I assume it has nothing to do with rocket 🙈

if you think it is related and you can reproduce it in rocket using the new @rocket/engine then feel free to reopen or to create a new issue 🤗