Bộ nhớ cache ứng dụng HTML5 không hoạt động với yêu cầu POST

Question

Tôi đang làm việc trên một ứng dụng web và tôi đã thực hiện các bước cần thiết để bật HTML5 App Cache cho trang đăng nhập ban đầu của tôi. Mục tiêu của tôi là lưu trữ tất cả các hình ảnh, css và js để cải thiện hiệu suất trong khi duyệt web trực tuyến, tôi không lên kế hoạch duyệt web ngoại tuyến.

Trang ban đầu của tôi bao gồm biểu mẫu đăng nhập chỉ với một thẻ đầu vào để nhập tên người dùng và nút gửi để xử lý thông tin dưới dạng yêu cầu POST. Thông tin đã gửi được xác thực trên máy chủ và nếu có sự cố, trang ban đầu sẽ được hiển thị lại (đó là kịch bản tôi hiện đang thử nghiệm)

Tôi đang sử dụng các công cụ phát triển của trình duyệt để gỡ lỗi và mọi thứ hoạt động tốt yêu cầu ban đầu (yêu cầu GET bằng cách nhập URL trong trình duyệt); các tài nguyên được liệt kê trên tệp kê khai được lưu trữ đúng cách, nhưng khi cùng một trang được hiển thị lại do yêu cầu POST, tôi nhận thấy rằng tất cả các phần tử (hình ảnh, css, js) đã được lưu trước đó sẽ được lấy lại mẫu máy chủ .

Điều này có nghĩa là HTML5 App Cache chỉ hoạt động cho các yêu cầu GET?

Answer 1

Mỗi http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#the-application-cache-selection-algorithm có vẻ như tôi chỉ được phép GET.

Trong trình duyệt hiện đại (hỗ trợ HTML ngoại tuyến), yêu cầu GET có thể được thực hiện đủ lâu để cung cấp dữ liệu cần thiết để lấy lại dữ liệu bạn cần và yêu cầu POST không được sử dụng cho các yêu cầu không đáng tin cậy (không -thay đổi). Vì vậy, ứng dụng có thể được cấu trúc để cho phép các yêu cầu GET nếu nó là loại dữ liệu hữu ích khi ngoại tuyến và thông báo cho người dùng rằng họ sẽ cần đăng nhập để nhận nội dung được gửi tới họ để sử dụng ngoại tuyến đầy đủ (và bạn có thể sử dụng các sự kiện ngoại tuyến để thông báo cho họ biết rằng họ chưa trải qua quá trình cần thiết).

Answer 2

Tôi gặp vấn đề tương tự và tôi đã viết một trình bao bọc cho các cuộc gọi POST ajax. Ý tưởng là khi bạn cố gắng POST nó đầu tiên sẽ thực hiện một yêu cầu GET đến một ping.php đơn giản và chỉ khi đó là thành công thì nó sẽ yêu cầu POST.

Sau đây là cách có vẻ trong một cái nhìn 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 :('); 
      } 
     }); 
    } 
}); 

Có một cái gì đó như thế này trong biểu hiện của bạn:

NETWORK: 
* 

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

Các ping.php tập tin đơn giản như:

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

Và no-network.json trông giống như sau:

{"_noNetwork":true} 

Và ở đó bạn đi, trước khi POST bất kỳ, trước tiên nó sẽ thử GET ping.php và gọi offline() nếu bạn đang ngoại tuyến.

Hy vọng điều này sẽ giúp;)