La cache delle app HTML5 non funziona con le richieste POST

Question

Sto lavorando a un'applicazione Web e ho seguito i passaggi necessari per abilitare la cache delle app HTML5 per la mia pagina di accesso iniziale. Il mio obiettivo è memorizzare tutte le immagini, css e js nella cache per migliorare le prestazioni durante la navigazione online, non sto pianificando la navigazione offline.

La mia pagina iniziale consiste in un modulo di accesso con un solo tag di input per l'immissione del nome utente e un pulsante di invio per elaborare le informazioni come richiesta POST. Le informazioni inviate sono convalidate sul server e se c'è un problema, la pagina iniziale viene mostrata di nuovo (che è lo scenario che sto testando)

Sto usando gli strumenti degli sviluppatori del browser per il debug e tutto funziona bene per la richiesta iniziale (richiesta GET digitando l'URL nel browser); le risorse elencate sul file manifest sono correttamente memorizzate nella cache, ma quando la stessa pagina viene mostrata di nuovo come risultato di una richiesta POST, noto che tutti gli elementi (immagini, css, js) precedentemente caricati vengono recuperati dal server nuovamente .

Ciò significa che HTML5 App Cache funziona solo per le richieste GET?

Answer 1

Per http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#the-application-cache-selection-algorithm mi sembra che solo GET sia consentito.

Nei browser moderni (che supportano l'HTML offline), le richieste GET possono essere fatte abbastanza a lungo per fornire i dati necessari per recuperare i dati necessari e le richieste POST non dovrebbero essere utilizzate per richieste che sono identi- -mutevole). Quindi, l'applicazione dovrebbe probabilmente essere progettata per consentire le richieste GET se è il tipo di dati che è utile offline e per informare l'utente che è necessario effettuare il login per ottenere il contenuto inviato a loro per l'uso offline (e tu potrebbe utilizzare eventi offline per informarli che non hanno ancora completato il processo necessario).

Answer 2

Sto avendo esattamente lo stesso problema e ho scritto un wrapper per le chiamate ajax POST. L'idea è quando si tenta di POST che prima farà una richiesta GET a un semplice ping.php e solo se avrà successo richiederà quindi il POST.

Ecco come appare in 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 :('); 
      } 
     }); 
    } 
}); 

avere qualcosa di simile nel vostro manifesto:

NETWORK: 
* 

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

Il file ping.php è semplice come:

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

E no-network.json si presenta così:

{"_noNetwork":true} 

E così via, prima di ogni POST si tenterà prima un GET ping.php e una chiamata offline() se si è offline.

Spero che questo aiuti;)