HTML5 App Cache no funciona con solicitudes POST

Question

Estoy trabajando en una aplicación web y realicé los pasos necesarios para habilitar HTML5 App Cache para mi página de inicio de sesión inicial. Mi objetivo es almacenar en caché todas las imágenes, css y js para mejorar el rendimiento durante la navegación en línea, no estoy planeando la navegación sin conexión.

Mi página inicial consiste en un formulario de inicio de sesión con una sola etiqueta de entrada para ingresar el nombre de usuario y un botón de enviar para procesar la información como una solicitud POST. La información presentada se valida en el servidor y si hay un problema, la página inicial se muestra nuevamente (que es el escenario que estoy probando actualmente)

Estoy usando las herramientas de desarrollo del navegador para la depuración y todo funciona bien para la solicitud inicial (solicitud GET escribiendo la URL en el navegador); los recursos enumerados en el archivo de manifiesto están correctamente almacenados en caché, pero cuando se vuelve a mostrar la misma página como resultado de una solicitud POST, noto que todos los elementos (imágenes, css, js) que se almacenaron previamente en caché se vuelven a capturar del servidor .

¿Esto significa que HTML5 App Cache solo funciona para solicitudes GET?

Answer 1

Por http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#the-application-cache-selection-algorithm me parece que solo se permite GET.

En navegadores modernos (que soportan HTML sin conexión), las solicitudes GET probablemente se puedan realizar el tiempo suficiente para proporcionar los datos necesarios para recuperar los datos que necesita, y las solicitudes POST no se deben usar para solicitudes idempotentes (no -cambiando). Por lo tanto, la aplicación probablemente debería diseñarse para permitir solicitudes GET si es el tipo de datos que es útil fuera de línea e informar al usuario que necesitarán iniciar sesión para obtener el contenido que se les envía para su uso completo sin conexión (y podría usar eventos fuera de línea para informarles que aún no han pasado por el proceso necesario).

Answer 2

Tengo exactamente el mismo problema y escribí un contenedor para las llamadas POST ajax. La idea es que cuando intentes realizar una POST, primero hará una solicitud GET a un simple ping.php y solo si es exitoso solicitará el POST.

Aquí es cómo se ve en una vista Backbone:

var BaseView = Backbone.View.extend({ 
    ajax: function(options){ 
     var that = this, 
     originalPost = null; 

     // defaults 
     options.type = options.type || 'POST'; 
     options.dataType = options.dataType || 'json'; 

     if(!options.forcePost && options.type.toUpperCase()==='POST'){ 
      originalPost = { 
       url: options.url, 
       data: options.data 
      }; 
      options.type = 'GET'; 
      options.url = 'ping.php'; 
      options.data = null; 
     } 

     // wrap success 
     var success = options.success; 
     options.success = function(resp){ 

      if(resp && resp._noNetwork){ 
       if(options.offline){ 
        options.offline(); 
       }else{ 
        alert('No network connection'); 
       } 
       return; 
      } 

      if(originalPost){ 
       options.url = originalPost.url; 
       options.data = originalPost.data; 
       options.type = 'POST'; 
       options.success = success; 
       options.forcePost = true; 
       that.ajax(options); 
      }else{ 
       if(success){ 
        success(resp); 
       } 
      } 


     }; 

     $.ajax(options); 
    } 
}); 


var MyView = BaseView.extend({ 
    myMethod: function(){ 
     this.ajax({ 
      url: 'register.php', 
      type: 'POST', 
      data: { 
       'username': 'sample', 
       'email': 'sample@sample.com' 
      }, 
      success: function(){ 
       alert('You registered :)') 
      }, 
      offline: function(){ 
       alert('Sorry, you can not register while offline :('); 
      } 
     }); 
    } 
}); 

tener algo como esto en su manifiesto:

NETWORK: 
* 

FALLBACK: 
ping.php no-network.json 
register.php no-network.json 

El ping.php archivo es tan simple como:

<?php die('{}') ?> 

Y no-network.json se ve así:

{"_noNetwork":true} 

Y listo, antes de cualquier POST, primero probará un GET ping.php y llamará a offline() si no está conectado.

Espero que esto ayude;)