プログラミング備忘録

忘れない様にメモ

*

iphone iOS safariの「戻る」ボタンの問題

      2016/12/03

スマフォ用webページの開発をしていると思わぬところでつまづく。

今回のクライアントからの苦情はiphone ios8 safariの戻るボタンの問題。

あるページ(A)のボタンをタップするとプルダウンメニューが出現して、そのメニューからリンク先ページ(B)へ遷移。

ios_backButton
リンク先ページ(B)からページ(A)に戻りたいのでブラウザsafariの「戻る」ボタンを押すが、戻ってみると前回操作したプルダウンメニューが開きっぱなしになっている。

ios_backButton02
戻ったときはページ(A)の通常の状態(プルダウンメニューは閉じている)になっていないとヨロシクないのだ。

ios_backButton01
いちいちリロードすれば通常の状態には戻るのだが、それでは困る。
さっそく調べてみた。

androidのブラウザの「戻る」ボタンはリロードするが、iphone ios safariのそれはブラウザに保存されたキャッシュを読みにいく。

そうなんだ、じゃあ、なんのためにios safariはキャッシュを読みにいくのか?

androidブラウザの「戻る」ボタンを押すと再読み込みをする、つまりサーバーにhttpリクエストを実行するので、その分時間がかかってしまう。

一方、ios safariの場合、ブラウザに保存されたキャッシュを読みにいく。
いちいちサーバーにリクエストをしない、つまり再読み込みをしないので、高速なんだね。
その事により「戻る」「進む」ボタンを押して移動するときのスピードがアップするので、ユーザーにとっては快適である。
iphone ios safariはそのためブラウザに保存されたキャッシュを読みにいくわけ。

では今回の問題点

ページを離脱するときの状態(プルダウンメニューが開いている)がキャッシュされていて、「戻る」ボタンを押すとその状態が再現されてしまう。

今回の場合、 javascriptでプルダウンメニュー要素が開くようにクラスを生成しているので、その状態がキャッシュされているために起こった現象だ。

リロードしたら初期状態に戻るわけだがら、「戻る」ボタンを押したらリロードするように出来たらいいわけだ。
遷移のスピードが遅くなってしまうがとりあえず今回はこれで対策してみる。

対応策:

window.onpageshow = function(event) {
    if (event.persisted) {
         window.location.reload();
     }
};

これでiphone iosの戻るボタンでもリロードさせる事が出来る。

onpageshow:ロードの有無に関わらずページが表示された状態。

キャッシュを読みに行ったかどうかはevent.persistedで判断する。
これが true になった場合には、キャッシュされたページを読みこむのでwindow.location.reload()で強制的にリロードする。

他にも色々やり方はあるがとりあえず今回はこれで対応した。

他のiOS関係の記事はこちら

SwiftData(Swift製SQLiteラッパー)

A valid provisioning profile for this executable was not found

Overriding method with selector ‘touchesEnded:withEvent:’ has incompatible type ‘(NSSet, UIEvent) -> ()’

ios開発メモ

解決策が見つからない時はプログラミング専門のQ&Aサイト「teratail」
で質問するのもありだと思います。

 

 スポンサー

有料のサイト作成サービス「グーペ」

レンタルサーバー「ロリポップ」、ショッピングカート「カラーミーショップ」、ブログサービス「JUGEM」などを提供しているホームページサービスを知り尽くしたGMOペパボだからこそできるサービス。

簡単にサイト作成したいお客さんに提案してサポートでマネタイズ。
お知らせ機能、カレンダー機能、アクセスマップ、フォトアルバム、モバイル対応、全部できて月1,000円(税抜)


この記事は役に立ちましたか? はい いいえ 0人中0人が役に立ったと言っています。

 - ios開発メモ, スマフォ