ブラウザアプリを作るのが生きがいの、ユゲタです。
でも、インターネットブラウザって、ある時突然、バージョンアップされてしまいます。
特にmacOSやiPhoneのアップデートに依存して機能追加や仕様変更が行われてしまう場合、これまで正常に動いていたのに、アップデートした場合に正常な動作をしなくなるってことがたまにあるんですよね。
これ、本当に困る〜。
そして、新規機能は、制御コードをjavascriptやcssで書き込むことになるんですが、今まさに開発しているプログラムであれば、調査する作業がプラスされ、なんとなく無駄に時間が追加されますが、以前に作って問題なく運用しているブラウザアプリの場合は、改修作業をしなければいけなくなってしまうんですよ〜。
この場合、安定した動きを担保するために、ネイティブアプリにして、挙動を担保すればいいと考えがちですが、アプリにしたらもっと大変で、OSのアップデートに伴って、コンパイルしたアプリの動作が動かなくなることもあるので、その場合は、やはり都度開発作業を行わなければいけなくなります。
pull to refresh
少し前ですが、iOS15のアップデートが行われましたが（この記事を書いている時点では、iOS16になっています）、その時にsafariブラウザの新機能で"pull to refresh"という機能が追加されていたんですよ。
これリアルタイムに見逃していました！！
まさにいま開発しているブラウザアプリで操作をしていたら、なんか画面の動きが変！
知らない人の為に説明すると、
Pull to refreshってどういう機能？
iPhone safariでwebページを表示した状態で、画面を下にスワイプすると、画面がリロードするという、全くもって不必要な機能です。
普通にsafariブラウザを立ち上げた状態
画面を下にスワイプする
スワイプすると、画面上部にクルクルアイコンが現れて、そのまま画面がリロードされます。
URLの横にあるリロードボタンを押せばいいだけなのに、何故この機能を付けたのか、本当に意味不明です。
Pull to refreshによる不具合
webアプリを作る時に、画面をスクロールさせないようにする設定にすることが多いのですが、（ゲームなどの場合は特に）
このpull to refresh機能が働くと、縦スクロールが無条件で発生してしまいます。
cssでoverflow:hiddenとかしても、スワイプできてしまうので、本当に非情にやっかいです。マジやめてもらいたい。
Pull to refreshを解決する方法
いろいろなサイトで、様々なやり方が書いてありますが、一番有効だと思ったのは次の方法です。
html{
overflow: hidden;
}
body{
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
上記を、cssファイルに記載することで、Pull to refresh機能を回避することができるようになります。
アップデートに影響されなくなる方法
どんどん進化するOSに載ってしまっている以上、ブラウザだろうが、アプリだろうが、アップデートを余儀なくされてしまうというのが現状と理解するしかないですね。
でも、なんか一度作ったアプリをまた改修する作業は本当にめんどくさい。
これをなんとか最低限に回避できる方法ってないものなのか考えてみた・・・・
今回のような「Pull to refresh」は回避しようが無いんですが、できるだけシンプル構造で、定番の書き方のプログラミング（関数使用も含めて）をするのが一番いいかもですね。
if文やfor文が使えなくなることは、未来永劫ありえないですからね。
それよりも、iOSやAndroidが無くなるほうが可能性としては高いかも・・・（無くなると言うよりは、大幅に別モノに変わるとか・・・）
まあ、とにかく、こういう新機能にもちゃんとアンテナを貼っておく必要があるということも重要って事ですよ。
こんな事で、瑕疵担保責任に該当するような契約をしていたとしたら、非情にしんどい感じになりますからね。
