iOS7 Mobile SafariがAjax POSTでキャッシュするか確認してみた

iOS 7 特集

#iPhone

#Safari

#iOS

横田あかり

2013.09.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOS6 Mobile Safariで困った方へ

以前、iOS6 Mobile SafariでAjax POST通信時にキャッシュをしてしまうという挙動が問題になったことがありました。今回、iOS7 Mobile Safariはどうなんだ？というご質問を頂きましたので改めて試して動作を確認したいと思います。

iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法

結論から先に述べます。iOS7 Mobile Safariは、Ajax POSTをキャッシュしません！！！

iOS7のリモートデバッガで確認する

まずは動作を検証するためにiOS7端末のWebインスペクタをONにします。

Safariの環境設定画面で開発タブを表示する

MacのSafariで開発タブを表示します。これでiPhoneのMobile Safariで行ったアクションについてサーバーとの通信情報を確認することができます。

ios7-safari-001

キャッシュの動作を確認する

簡単なWebサーバーを作成して挙動を確認したいと思います。node.jsがインストールされていると仮定します。

以下はindex.htmlのソースです。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
  function formPost(){
    $.ajax( {
      type: "Post",
      url : "/dopost",
      data : { param:"hogehoge" },
      dataType: "json",
      success : function( json ){
        $("#msg").append(json.timestamp+"<br>");
      },
      error : function (xhr,text,thrown){
        $("#msg").text("error : "+text);
      }
    });
  }
</script>
</head>
<body>
<input type="button" value="POST test" onclick="formPost()">
<p id="msg"></p>
</body>
</html>

以下はnode.jsのソースです。

var http = require('http'),
    sys = require('sys'),
    fs = require('fs');
 
http.createServer(function (req, res) {
  console.log('accessed');
  if(req.method == 'POST') {
    var body='';
    req.on('data', function (data) {
      body +=data;
    });
    req.on('end',function(){
      console.log(body);
    });
    res.writeHead(200, {'Content-Type':'application/json'});
    res.end('{"timestamp":"'+new Date().toString()+'"}');
  }else{
    fs.readFile('index.html', function(err, content) {
      if (err) { throw err; }
      console.log('loaded');
      res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
      res.end(content);
    });
  }
}).listen(80);
 
process.on('uncaughtException', function (err) {
    console.log('uncaughtException => ' + err);
});

node.jsのプログラムを起動します。

$ node app.js

そしてブラウザから動作確認をしてみます。ボタンをクリックするとサーバへAjaxでPOSTを行います。サーバ側では現在の時刻を文字列にして返しています。iOS6の時は何度ボタンを押しても時刻が変わりませんでしたが。しかし、iOS7になったことで挙動が変わりました。ヘッダに関係なくPOSTはキャッシュしない仕様になったのです！！

ios7-safari-002