Fix the pain point that the page on the phone returns but the page JS does not refresh

Last Update:2018-06-15 Source: Internet

Author: User

Tags sessionstorage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

70313112

Some browsers in the return button is directly using the cache, will not execute any JS code, for example, when the submission of the button to set the loading state, if after the successful submission of the button is not processed, then the back button is still loading state, it is awkward.

Cause: Some browsers do not trigger the OnLoad event when they are back, which is one of the new features of the HTML5 generation browser--back-forward Cache (bfcache)

What is Bfcache

The JavaScript Advanced Programming program has a reference to Bfcache:

Bfcache, the Back-forward cache, can be called "round-trip caching" to speed up the conversion of pages when users use the browser's back and forward buttons. This cache not only saves the page data,

Also save the DOM and JS state, in fact, the entire page is saved in memory. If the page is in Bfcache, then opening the page again will not trigger the OnLoad event

Pageshow Events

This event is triggered when the page is displayed, regardless of whether the page is from Bfcache. In the Reload page, the pageshow is triggered after the load event is triggered;

For pages in Bfcache, Pageshow is triggered at the moment the page state is fully restored.

Pagehide Events

This event is triggered when the browser unloads the page and is triggered before the Unload event.

Persisted property

The event object for the Pageshow and Pagehide events also contains a Boolean property named persisted.

For the Pageshow event, the value of this property is true if the page was loaded from Bfcache, otherwise the value of this property is false.
For the Pagehide event, the value of this property is true if the page is saved in Bfcache after the unload, otherwise the value of this property is false.

Different browsers are not consistent in the performance of the previous page in the current window's "open" history, which is related to the browser's implementation and the settings of the page itself.

Solution Solutions

Some ideas are available in the Firefox developer documentation:

The page listens for unload or beforeunload events;
The page has "Cache-control:no-store" set.
Site uses HTTPS at least one of the following conditions is met:
- "Cache-control:no-cache"
- "Pragma:no-cache"
- Set the value of the request header "expires:0" or "Expires" before "Date" (unless "cache-control:max-age=" is also set);
The page is not fully loaded when the user is moving forward or it has an ongoing network request, such as XMLHttpRequest;
The page is in the INDEXEDDB operation;
The top page contains a frame, and these frames cannot be cached because of any of the reasons listed here.
The page is within a frame, and the user jumps to a new page within the frame, where the newly loaded Web page is cached.

JS Monitor pageshow Event block page entry Bfcache

12345

Window.addeventlistener (' pageshow ', function ( e) {if (e.persisted) { window.location.reload ()}})

Safari, UC, QQ browser test pass. But UC, QQ browser will flash the page in Bfcache first, because Pageshow is triggered after the load event. Browser still retains red, which I think is because browser does not trigger any events when it returns to the previous page.

JS Monitor pagehide Event block page entry Bfcache

123456789

Window.addeventlistener (' pagehide ', function (e) {var $body = $ ( document.body); $body. Children (). remove (); //To wait until the callback function completes, the user presses the return to execute the script tag's code setTimeout (function () {$body. Append ("< Script type= ' Text/javascript ' >window.location.reload ();<\/script> ");});

Safari, UC, QQ browser test pass. Browser still retains red, which I think is because browser does not trigger any events when it returns to the previous page.

Add Cache-control header to the response

The code examples are as follows:
In the header section of the JSP template, add the following disable cache settings:

1234567

Solution for Android WebView Cache

The premise of this scenario is that the browser regenerates the HTML with the JSP each time it requests the page from the server. Requires that the page itself has a configuration that disables caching.

12345678910111213141516171819

<!--Android WebView back forced refresh solution START -to-<jsp:usebean id="Now" class="java.util.Date"/> <input type="hidden" id="Server_time" value="${now.gettime ()}"/> <script> //Every time WebView re-opens the H5 home page, store it in thevar server_time = document.getElementById ("Server_time"); var remote_ver = server_time && server_time.value;if (remote_ver) {var local_ver = sessionstorage && sessionstorage.pageversion;if (local_ver && parseint (local_ver) >= parseint (remote_ver)) { //Description HTML is read from the local cacheLocation.reload (true);}else{//Description HTML is regenerated from server side, update Local_verSessionstorage.pageversion = Remote_ver;}}</script> <!--Android WebView back forced refresh solution END --

Summarize

PC Browser, set disable page cache header to achieve back refresh
Support Bfcache/page Cache Mobile browser, JS Monitor pageshow/pagehide, force refresh when back detection
In the case that the first 2 scenarios are not work, you can write the version number to the server page in HTML, and compare the version number in the local store to determine if a fallback has occurred and use the page in the cache

Fix the pain point that the page on the phone returns but the page JS does not refresh

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More