pagina - leer el contenido de un archivo en javascript
¿Activar dinámicamente el archivo de Manifiesto de caché HTML5? (4)
Activa dinámicamente el almacenamiento en caché al agregar un iframe que apunta a una página vacía que contiene el manifiesto de caché real.
offline.html:
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<title></title>
</head>
<body>
</body>
</html>
Asegúrese de agregar index.html al manifiesto de caché. Luego solo agrega algo como:
<iframe src="offline.html" width="0" height="0">
documentar.cuerpo dinámicamente para desencadenar el almacenamiento en caché.
Estoy usando la nueva funcionalidad de manifiesto de caché de HTML5 para almacenar en caché mi aplicación web para que funcione sin conexión. El contenido se almacena en caché automáticamente cuando la página se carga con el siguiente elemento html:
<html lang="en" manifest="offline.manifest">
Esto funciona bien Sin embargo, quiero ofrecerles a mis usuarios la opción de si desean que el contenido esté en caché. Ésta es mi pregunta:
¿Hay alguna manera de provocar que una aplicación se almacene en caché en tiempo de ejecución, utilizando JavaScript, y que no se haga automáticamente cuando se carga la página?
Por ejemplo, algo como esto (usando jquery):
---------------- index.html --------------
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<button id="cacheButton">Cache Page</button>
</body>
</html>
--------- Main.js ---------
$(document).ready(
function()
{
$(''#cacheButton'').click(onCacheButtonClick);
}
)
function onCacheButtonClick(event)
{
console.log("Setting Offline Manifest");
$(''#htmlRoot'').attr("manifest","offline.manifest");
}
------------- offline.manifest -------------
CACHE MANIFEST
#version .85
#root
index.html
scripts/main.js
#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js
Básicamente, cuando se hace clic en el botón, establezco dinámicamente el atributo de manifiesto del elemento html. Esto funciona (en el sentido en que se establece el elemento), pero no hace que el navegador guarde en caché la página.
¿Alguna sugerencia?
Dependiendo de su aplicación, puede ser posible utilizar una versión modificada del enfoque de @ schibum dividiendo su aplicación en "mini" aplicaciones, y luego almacenar en caché las subsecciones en un iframe. Considera este ejemplo:
index.html
<html manifest="indexx.manifest">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script src="index.js"></script>
<title>Index</title>
</head>
<body>
<ul>
<li><a href="1.html">One</a>
<li><a href="2.html">Two</a>
<li><a href="3.html">Three</a>
</ul>
<iframe id="if" />
</body>
</html>
index.manifest
CACHE MANIFEST
# 3
index.html
jquery-2.1.4.min.js
index.js
index.js
$( document).ready(function() {
var pages = [''1.html'',''2.html'',''3.html''];
var LoadNext = function() {
alert(pages[0]);
page = pages.shift();
alert(page)
if ( page !== undefined ) {
console.log("Attempting to load " + page);
$(''#if'').attr(''src'', page)
} else {
console.log("All done");
}
};
$(''#if'').load(function() {
console.log("Finished loading");
LoadNext()
});
LoadNext();
});
1.html
<html manifest="1.manifest">
<head>
<title>One</title>
</head>
<body>
<img src="1.jpg" width="50%">
</body>
</html>
1.manifiesto
CACHE MANIFEST
# 2
1.html
1.jpg
{2,3}. {Html, manifest} sigue a la forma 1. {html, manifest}.
Como resultado, cada subpágina (1.html, 2.html, 3.html) tiene su propio manifiesto y, por lo tanto, se almacena en caché de forma independiente. index.html tiene su propio manifiesto (mínimo), por lo que el almacenamiento en caché que incondicionalmente no es tan pesado en la red como el almacenamiento en caché de toda la aplicación. Luego, javascript es responsable de precargar cada página en el iframe para que se almacene en caché.
Cargue index.html, luego sin conexión y vea cómo funcionan las páginas secundarias. también.
Un inconveniente obvio es que cualquier activo compartido entre páginas (p. Ej., JQuery) se debe almacenar en caché de forma redundante.
Después de pasar muchas semanas con el almacenamiento en caché sin conexión, la respuesta es no, usted almacena en caché o no almacena en caché, establecer el atributo de caché en el lado del cliente no tiene ningún efecto.
Podría considerar ofrecer una URL alternativa para la versión de almacenamiento en caché, tenga en cuenta que la página también se almacena en caché implícitamente como una "entrada principal".
Sin embargo, no entiendo por qué querría usar jquery sin conexión, ya que es probable que se sirva con un vencimiento muy largo.
Es posible que desee considerar el almacenamiento sin conexión como una alternativa. Almacene el texto de los scripts e inyéctelos en el DOM en carga. Si no se almacena en caché, use Ajax e inserte la respuesta, ya que la creación de una etiqueta de script con src no cargará el script.
Una cosa que debes recordar. No almacene en caché el archivo de manifiesto. Entonces, todo lo que necesita hacer es actualizar la página con una versión diferente del archivo de manifiesto de acuerdo con su selección de usuario. Puede generar dinámicamente el archivo de manifiesto en sí, cualquier cambio en ese archivo provocará un refresco de caché. La mejor práctica para desencadenar re-caching es cambiar la versión del archivo de manifiesto, algo así como: # ver1 - 01/01/2018 a # ver2 - 02/02/2018 hará el truco. Por lo tanto, no puede cambiarlo en el lado del cliente, pero puede hacerlo desde el lado del servidor.