プログラミング備忘録

忘れない様にメモ

*

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

      2018/09/16

この記事でわかる事

今回はiOS safariブラウザの「戻る」ボタンで画面遷移したときキャッシュを読みに行く事で起こる問題を解決します。

方法は「戻る」ボタンで画面遷移したらjavascriptで強制的にリロードするというものです。

スピード的には当然キャッシュを読みに行った方が早いので、このリロードするという方法を使うと若干遅くはなります。

キャッシュを読みに行く事で起こる問題点

スマフォ用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関係の記事はこちら

iOSでデータベースを利用する→SwiftData(Swift製SQLiteラッパー)

AppStore申請後に実機にアプリをインストールしようとしたらエラー(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」
で質問するのもありだと思います。

 

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

 - ios開発メモ, スマフォ