1

I have the following scenario where I need to run some "code" when entering a page for the first time or returning to it from another page.

Safari's cache feature (https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/) is causing that, since it is caching my page and not executing anything.

I followed their recommendation of adding an event listener to 'pageshow' event, this way I can check if that event is persisted and then run what I need.

This example is basically what I'd like to have:

  • first page access... attach the listener = Cool, I have that.
  • if I navigate out of the page and get back (using Safari) it will fire my listener on pageshow = Cool, I have that... almost.
  • the listener should be fired every time that I navigate back to that page = Not cool, my listener fires once.

I'm using react and componentDidMount() is where I'm preparing everything:

enter image description here

It works for the first time.. I'm able to navigate out of my page and get back to it + executing what I need.

The problem is: repeating the "navigate out of my page and get back" a second time won't do anything.. looks like the listener gets deleted or something.

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
TheNurb
  • 365
  • 1
  • 13
  • Isn't hte componentDidMount already doing that for you? If it were me I would forget about the eventListener and just have the react component handle it in its componentDidMount. This would work if the component is being mounted everytime you navigate away and come back. Is the componentDidMount console.log showing everytime you go away and come back? – finalfreq Sep 30 '16 at 22:17
  • due the Safari-cache thing, any code inside my component's lifecycle events (like componentDidMount, etc) won't execute. That's why I had to attach the event listener. – TheNurb Sep 30 '16 at 22:20
  • currently, I'm forcing a page reload if event.persisted is true.. doing that everything is executed (just like all other browsers). But I'd like to keep the Safari behavior of not reloading the whole page, that's why I added the event listener. – TheNurb Sep 30 '16 at 22:23
  • we had to fix that issue for security reasons, we just add `window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } };` at the top level component that renders the rest of the React app, not sure ifthat would work in your case though – finalfreq Sep 30 '16 at 22:32

1 Answers1

2

After two days trying to find a way... my coworker asked me to try a listener on 'popstate'. I was so into trying to get the 'pageshow' listener to work that I completely forgot to test that one; it worked flawlessly:

window.addEventListener('popstate', function(event) {
Shepmaster
  • 274,917
  • 47
  • 731
  • 969
TheNurb
  • 365
  • 1
  • 13
  • where did you add the code? I tried putting it in componentDidMount, and still not firing. – dedles Mar 28 '18 at 16:55
  • just like the example, but instead "pages how" I used "popstate", but yeah.. inside componentDidMount! It's been a while.. the popstate thing is always fired when on Safari (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate) – TheNurb Mar 29 '18 at 21:33