Usare il caching di Firefox 1.5

Introduzione

Firefox 1.5 usa un soistema di caching in memoria per pagine Web intere, includendone lo stato JavaScript, per una singola sessione del browser. Muoversi in avanti ed indietro tra le pagine visitate non richiede alcun caricamento e lo stato di JavaScript viene preservato. Questa caratteristica, a cui ci si riferisce a volte come bfcache (per "Back-Forward Cache"), rende la navigazione delle pagine molto veloc. Tale stato di caching viene preservato fino a quando non viene chiuso il browser.

Esistono delle istanze in cui Firefox non memorizza pagine in cache. Ecco alcune ragioni programmatiche per cui viene seguito questo comportamento:

• la pagina usa un gestore unload
• la pagina imposta "cache-control: no-store"
• la pagina imposta "cache-control: no-cache" ed il sito è in HTTPS.
• la pagina non è completamente caricata mentre l'utente decide di vistarne un'altra
• la pagina di più alto livello contiene dei frame che non sono memorizzabli in cache
• la pagina si trova in un frame in cui l'utente carica una nuova pagina (in questo caso, quando l'utente termina termina la navigazione della pagina, l'ultimo contenuto della pagina sarà quello memorizzato in cache)

Questa nuova caratteristiac del caching modifica il comportamento del caricamento di pagine, e gli autori web vorrebbero poter:

• sapere che una pagina è stata esplorata (quando viene caricata dalla cache di un utente)
• definire il comportamento di una pagina quando l'utente termina la navigazione uscendone (mantenendo la possibilità del caching della pagina)

Due nuovi eventi del browser permettono entrambe le operazioni.

Nuovi eventi del browser

If you use these new events, your pages will continue to display properly in other browsers (we’ve tested earlier versions of Firefox, Internet Explorer, Opera, and Safari), and will use this new caching functionality when loaded in Firefox 1.5. Standard behavior for Web pages is: # User navigates to a page. # As the page loads, inline scripts run. # Once the page is loaded, the <code>onload</code> handler fires. Some pages include a fourth step. If a page uses an <code>unload</code> handler, it fires when the user navigates away from the page. If an <code>unload</code> handler is present, the page will not be cached. When a user navigates to a cached page, inline scripts and the <code>onload</code> handler do not run (steps 2 and 3), since in most cases, the effects of these scripts have been preserved. If the page contains scripts or other behaviors that fire during loading that you want to continue to execute every time the user navigates to the page, or if you want to know when a user has navigated to a cached page, use the new <code>pageshow</code> event. If you have behaviors that fire when a user navigates away from the page, but you want to take advantage of this new caching feature, and therefore don’t want to use the unload handler, use the new <code>pagehide</code> event.

Evento pageshow

This event works the same as the <code>load</code> event, except that it fires every time the page is loaded (whereas the <code>load</code> event doesn’t fire in Firefox 1.5 when the page is loaded from cache). The first time the page loads, the <code>pageshow</code> event fires just after the firing of the <code>load</code> event. The <code>pageshow</code> event uses a boolean property called <code>persisted</code> that is set to <code>false</code> on the initial load. It is set to <code>true</code> if it is not the initial load (in other words, it is set to true when the page is cached). Set any JavaScript that you want to run every time a page loads to run when the <code>pageshow</code> event fires. If you call JavaScript functions as part of the <code>pageshow</code> event, you can ensure these functions are called when the page is loaded in browsers other than Firefox 1.5 by calling the <code>pageshow</code> event as part of the <code>load</code> event, as shown in the sample later in this article.

Evento pagehide

If you want to define behavior that occurs the user navigates away from the page, but you don’t want to use the <code>unload</code> event (which would cause the page to not be cached), you can use the new <code>pagehide</code> event. Like <code>pageshow</code>, the <code>pagehide</code> event uses a boolean property called <code>persisted</code>. This property is set to <code>false</code> if the page is not cached by the browser and set to <code>true</code> if the page is cached by the browser. When this property is set to <code>false</code>, the <code>unload</code> handler, if present, fires immediately after the <code>pagehide</code> event. Firefox 1.5 tries to simulate load events in the same order they would occur when the page is initially loaded. Frames are treated the same way as the top-level document. If the page contains frames, then when the cached page is loaded: * <code>pageshow</code> events from each frame fire before the <code>pageshow</code> event in the main document fires. * When the user navigates away from the cached page, the <code>pagehide</code> event from each frame fires before the <code>pagehide</code> event in the main document. * For navigation that occurs inside a single frame, events fire only in the affected frame.

Esempio di codice

The sample below illustrates a page that uses both the <code>load</code> and <code>pageshow</code> events. This sample page behaves as follows: * In browsers other than Firefox 1.5, the following occurs each time the page loads: the <code>load</code> event triggers the <code>onLoad</code> function, which calls the <code>onPageShow</code> function (as well as an additional function). * In Firefox 1.5, the first time the page is loaded, the <code>load</code> event operates the same way as in other browsers. In addition, the <code>pageshow</code> event fires, and as <code>persisted</code> is set to <code>false</code>, no additional action occurs. * In Firefox 1.5, when the page is loaded from cache, only the <code>pageshow</code> event fires. As <code>persisted</code> is set to <code>true</code>, only the JavaScript actions in the <code>onPageShow</code> function are triggered. In this example: * The page calculates and displays the current date and time each time the page is loaded. This calculation includes the seconds and milliseconds so you can easily test the functionality. * The cursor is placed in the Name field of the form the first time the page is loaded. In Firefox 1.5, when the user navigates back to the page, the cursor remains in the field it was when the user navigated away from the page. In other browsers, the cursor moves back to the Name field. <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>Order query : Firefox 1.5 Example</title> <style type="text/css"> body, p { font-family: Verdana, sans-serif; font-size: 12px; } </style> <script type="text/javascript"> function onLoad() { loadOnlyFirst(); onPageShow(); } function onPageShow() { //calculate current time var currentTime= new Date(); var year=currentTime.getFullYear(); var month=currentTime.getMonth()+1; var day=currentTime.getDate(); var hour=currentTime.getHours(); var min=currentTime.getMinutes(); var sec=currentTime.getSeconds(); var mil=currentTime.getMilliseconds(); var displayTime = (month + "/" + day + "/" + year + " " + hour + ":" + min + ":" + sec + ":" + mil); document.getElementById("timefield").value=displayTime; } function loadOnlyFirst() { document.zipForm.name.focus(); } </script> </head> <body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();"> <h2>Order query</h2> <form name="zipForm" action="https://www.example.com/formresult.html" method="get"> <label for="timefield">Date and time:</label> <input type="text" id="timefield"><br> <label for="name">Name:</label> <input type="text" id="name"><br> <label for="address">Email address:</label> <input type="text" id="address"><br> <label for="order">Order number:</label> <input type="text" id="order"><br> <input type="submit" name="submit" value="Submit Query"> </form> </body> </html> </pre> In contrast, if the above page did not listen for the <code>pageshow</code> event and handled all calculations as part of the <code>load</code> event (and instead was coded as shown in the sample code fragment below), both the cursor position and date/time would be cached in Firefox 1.5 when the user navigated away from the page. When the user returned to the page, the cached date/time would display. <pre> <script> function onLoad() { loadOnlyFirst(); //calculate current time var currentTime= new Date(); var year = currentTime.getFullYear(); var month = currentTime.getMonth()+1; var day = currentTime.getDate(); var hour=currentTime.getHours(); var min=currentTime.getMinutes(); var sec=currentTime.getSeconds(); var mil=currentTime.getMilliseconds(); var displayTime = (month + "/" + day + "/" + year + " " + hour + ":" + min + ":" + sec + ":" + mil); document.getElementById("timefield").value=displayTime; } function loadOnlyFirst() { document.zipForm.name.focus(); } </script> </head> <body onload="onLoad();"> </pre>

Sviluppare estensioni per Firefox

Firefox 1.5 extensions need to allow for this caching functionality. If you are developing a Firefox extension that you want to be compatible with both 1.5 and earlier versions, make sure that it listens for the <code>load</code> event for triggers that can be cached and listens for the <code>pageshow</code> event for triggers that shouldn’t be cached. For instance, the Google Toolbar for Firefox should listen for the <code>load</code> event for the autolink function and to the <code>pageshow</code> event for the PageRank function in order to be compatible with both 1.5 and earlier versions.