Please note that the navigation is through the browser's history traversal operation back_forward when: the time immediately before the user agent starts the unload event of the previous document ( unloadEventStart) equals 0 which means there is no previous document.the type of navigation is back_forward. How it worksįirst the code checks Performance API is supported by the browser. Personally speaking, it reloads really fast the page even though used in the index.js referenced at the end of my HTML files. I typically put this code at the first lines of my index.js file, outside DOMContentLoaded event, but you could use it in the head section of your document. Actually it should be executed before these events are fired. This code does not need the DOM or the page to be loaded to be used. PerformanceNavigationTiming.unloadEventStart Only Safari, iOS Safari and IE are not supported the solution. Browser compatibilityīrowser compatibility is not as bad as expected for an experimental feature. PerformanceNavigationTiming Level 2 API is still at a Working Draft status which means this solution is using an experimental technology. I finally came up with a solution using Performance and PerformanceNavigationTiming Level 2 APIs. I still was unable to detect browser launch in my JavaScript. No way to make it worked at browser launch, it only automatically refreshed the page when the user was getting back to the tab passing 10 minutes (not so bad, but was not my use case). use localStorage API in combination with page Visibility API to store when users first loaded the page, detect when they left the page and reload it when the page becomes visible after a certain minimum amount of time (saying 10 minutes for an example).detect when a tab becomes active to reload the page using tabs API but I found nothing really useful.But it did not work, once the browser launched and and I accessed the page, it still was outdated data loaded from cache It was okay because my Service Worker was handling these pages based on an expiration date so they still were put in cache based on this date. My Service Worker was in charge to set this header so my assets still were cached in my CDN. set Cache-Control header to no-cache, max-age=0, must-revalidate for all my pseudo-dynamic pages so it will force the browser to automatically refresh them.My goal was to detect when the browser launches and automatically refresh the page or the tab at this moment so end users do not need to manually reload the page and updated data immediately come to their eyes! Sounds nice! TriesĪs I am using a Service Worker that in my case handles expired pages and refreshing data (requesting data from the server if a page expired), I noticed the navigation through the browser was always in a back forward state when loading the page after browser launch and actually bypassed the Service Worker to return the page from cache. What? Am I too lazy? Sure I am a developer! In this case, as a user, I always need to open the browser and then manually reload the page to get the last updated data. Obviously, this only applies if the user is not in a private navigation. Typically, once a user opens a browser and gets to a page, it directly provides the page in cache without refreshing any data from the server. Let's dig into the context, tries and the solution I came up with. I was very surprised to find nothing about this topic. I spent weeks finding a way to refresh a page or a tab from the server once a user starts or restarts the browser. How to force a page to reload from server at browser launch with JavaScript
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |