Topics

サポトピア by AnimaGate, Inc.•10mo ago

TKHR a.k.a たったか

スマホ（ドロワー）グローバルナビからの変遷し、戻った際の挙動について

グロナビから変遷した先から、スワイプで戻ると、ドロワーが開いた状態の前ページに戻ってしまいます。テキストでは難しいのでキャプチャしました。僕の管理しているサイト複数で確認でき、サポトピアでも同じ症状が出ております。僕は android14 pixel 8 pro で、戻る物理ボタンやブラウザに戻るUIがないので（あるのかわからないので）スワイプで行いました。相方は iphone ◯ （そこまで古くないず）ですが、スワイプじゃない指の動きしてたようにも見えます。（ブラウザバック？） JSのキャッシュが残ってる感じですかね？🤔 ご確認お願いいたします。

43 Replies

akko-o•10mo ago

横レス失礼します。そうなんですね、戻るボタン使わないので全然気づかなかったです。私のGalaxy S10（Android12）の戻るボタンでやってみたら、たしかにドロワーの開いている画面に戻りました。

TKHR a.k.a たったかOP•10mo ago

あ、やっぱそうなんですね。ゲームのデバッガーの気分になりましたｗ

imamura•10mo ago

ありがとうございます。これって他のテーマというか、Nishiki Pro 以外で作られたサイトでも似たような挙動になるんでしょうかね？

TKHR a.k.a たったかOP•10mo ago

なるみたいっすね！少々お待ちを。

TKHR a.k.a たったかOP•10mo ago

SANGO https://www.colorfulbox.jp/

ColorfulBox カラフルボックス

レンタルサーバー ColorfulBox（カラフルボックス）｜ 30日間無料お試し

レンタルサーバー「カラフルボックス」は、プランの移動ができる柔軟性や初心者向けのコンパネ、そして、災害・トラブルに強い次世代のバックアップ機能を導入した高品質レンタルサーバーです。

TKHR a.k.a たったかOP•10mo ago

cocoonはならないっぽいっすね。swellは一部あり。ただし、バージョンはわかりませんが。多分ヒントと言うか、違いあるかもです。「右上ボタンで右から開く」もしくは「右から開く」が怪しいっすね。

TKHR a.k.a たったかOP•10mo ago

↑秒で違いましたｗ swell左上メニュー・左から開く https://blog-bootcamp.jp

ブログブートキャンプ

ブログブートキャンプ | ブログスキルを短期間で鍛え上げる完全ガイド

ブログブートキャンプは、ブログスキルを短期間で鍛え上げるためのノウハウをお届けする情報メディアです。WordPressの始め方、記事の書き方、アフィリエイト収入の稼ぎ方などをやさしく解説しています。

TKHR a.k.a たったかOP•10mo ago

ちなみに寝ログは右上メニュー・アコーディオン？で、ひらきっぱっすね。

imamura•10mo ago

なるほど、これはBFCacheという機能のようですねー。

imamura•10mo ago

https://dezanari.com/ios-safari-bfcache/

でざなり

SafariでブラウザバックするとJSなどが解除されていない問題【bfcache】

ある日仕事でWebサイトを作っていたのですが、iPhone実機のiOS Safariでハンバーガーメニューのリンクからページ遷移した後ブラウザバックをすると、メニューが開きっぱなしになっているなどの現象が起きてました。PCでスマホ表示を確認

imamura•10mo ago

chromeでもなるみたいです。で、キャッシュされる時としない時があるそうですw

TKHR a.k.a たったかOP•10mo ago

ドロワー部分のキャッシュだけkillみたいなのってできるんですかね？それともブラウザキャッシュ全部逝っちゃんですかね🤔

imamura•10mo ago

部分的にはできなさそうですね。

TKHR a.k.a たったかOP•10mo ago

でもこれ、スマホファーストで考えたらえらいヤバいやつっすね。個人的には速さより安定の方が重要な気がします。高速化って、他の要因がほとんどなので、ブラウザバックにそこまでリスク負って早さもとめるのはどうかなーって。

imamura•10mo ago

bfcacheを無効にする設定を追加する方向で進めますね！この件調べているんですけど、確実に対処できる方法がなさそうです。実装しても効かないとか。で、割と見かける実装方法で、bfcacheを検知したらページをリロードするJSを動かすってのがあるようですが、リロードの実装でいいのかどうか・・・？という感じなんですよねー。どう思いますか？

TKHR a.k.a たったかOP•10mo ago

リロードというのはつまり再読み込みですよね？となると2回読み込む、みたいない感じのニュアンスなのでしょうか🤔 僕も調べてみたんですが、挙動は少し似てるというか、今村さんもこれを指しているかもしれませんが、 onpageshow が期待する動きなのかな？と思っていました。「onpageshow」は「ブラウザバックなどによる表示(キャッシュ/ページの再解析を行わない)において処理」の組み合わせでドロワーのみ対象とすることができればなーと思いました。よく考えたらこれ、例でも出してますがアコーディオンも開きっぱなしってことですよねｗまぁそこは開きっぱでもさほど問題ないかと思うのですがー。「onpageshow」は古いやり方で、「pageshow」が一般的なんですね。

imamura•10mo ago

それが、イベントリスナーのpageshowは効かないことがあるそうなんですよね。効かないことがあるってどういうことだ・・・？と思うんですがw そういえば開いてるドロワーを閉じるJSを書けばいい、っていう話をしていましたね！この実装に関する巷の情報が結構曖昧で、頭整理しきれてませんでしたw

TKHR a.k.a たったかOP•10mo ago

可能であればこちらが一番固い施策かなと思います！

imamura•10mo ago

いろいろ試行錯誤して下のJSに落ち着いたんですが、このコードをテスト用の環境などで読み込んで試してもらうことは可能ですか？手元のiPhoneでは動作しましたが、複数の動作事例が欲しいなと思っています。

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
    window.addEventListener( 'pageshow', function(event){
        if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
        }    
    });
}

nishikiProDisableBfcache();

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
    window.addEventListener( 'pageshow', function(event){
        if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
        }    
    });
}

nishikiProDisableBfcache();

if文の中が空でも動くみたいです。

TKHR a.k.a たったかOP•10mo ago

想定する動きになりました！あ。一旦サイトのキャッシュパージしてから試したほうが良いっすね。うーん、Pixel 8 pro（android14）だめっぽいっすねー。

imamura•10mo ago

iPhoneのsafariでは動いたんですけどねー。巷の情報が少なすぎるんで何をどうすればいいのかもあまりわからない・・・ android14で使っているブラウザはChromeですかね？これやればやるほど「本来の動き（展開したまま）が正しくないか？」ってなるのは自分だけでしょうか・・・

imamura•10mo ago

参考資料 https://web.dev/articles/bfcache?hl=ja

web.dev

バックフォワードキャッシュ | Articles | web.dev

ブラウザの [戻る] ボタンと [進む] ボタンでページが瞬時に読み込まれるように最適化する方法をご覧ください。

imamura•10mo ago

あとできることは、metaを入れるくらいですね。参考 https://www.tagindex.com/html_tag/page/meta_pragma.html 手軽に確認するには、Nishiki Pro の一般設定のスクリプト追加でヘッダーにスクリプトを追加の箇所に下のコードを入れてみて検証できます。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

android 実機が今ないので試せませんが、chrome のデベロッパーツールでbfcacheが効いてるかどうかを確認する方法があって、それで試した限りだとmetaを入れることで効いてる感じです。

TAG index

HTMLタグ/ページ全般タグ/ページのキャッシュを無効にする - TAG index

TKHR a.k.a たったかOP•10mo ago

なるほどっすねー。やっぱり明確な打ち手は無いってことですかね。ブラウザキャッシュを全体的に切ってしまうのは高速化上できないので… ちなみに、入れてみましたがやっぱり効いてないので難易度が高い件なのかもしれないですね。

これやればやるほど「本来の動き（展開したまま）が正しくないか？」ってなるのは自分だけでしょうか・・・

これも非常にわかるのですが、僕的にはどちらかと言えばリセットCSS肯定派なので（結局はクライアントのしたいことに近づけなければならないし、「これがブラウザの仕様です」で通用しづらい）ところがあるので、各々個別解決ってとこでしょうか。最悪「遅くなるけどいいですか？それでもなお聞かないかもしれないですが」で終わらせろってとこかもですけどｗ多分大多数のwebブラウジングにとってbfキャッシュは有効、と思って開発されているのかとも思いますし、やっぱり現段階では「この動きが正しい」になるんだと思います。どう対策しても「おまじない」的な要素までしかできない気もしますし… ちなみに僕も独自でちょこちょこやってみましたが、今のところこれと言って成果はありませんでした😭 あとは「.panel-openが付いていたら削除する」方法を探してみるかなーって感じです。ここだけで話しても仕方ない事かもしれないので、アンケートとかで聴いてみたいっすねｗそれこそ個人対応オナシャス案件かもしれないのでｗで、bfCache推進派のyahooさんは、余裕のメニュー開きっぱでしたｗ

imamura•10mo ago

惜しいところまで行ってそうなんですが、明確な対応方法さえあれば実装全然やるんですけどねー。 SafariとFirefoxではけっこう前から有効になってて、後追いでChromeでも有効がデフォルトになったという歴史があるようで、bfcacheは基本的に有効にしておく流れなんだろうなーという理解はしています。次の勉強会で時間があったら話題にしてみますね。

TKHR a.k.a たったかOP•10mo ago

さっきyoutube試してみたんですが、メニュー閉じますねｗ

imamura•10mo ago

Chrome公式ドキュメント発見しました https://developer.chrome.com/docs/devtools/application/back-forward-cache?hl=ja

Chrome for Developers

バックフォワードキャッシュをテストする | DevTools | Chrome for Developers

ページがバックフォワードキャッシュ向けに最適化されていることを確認します。

imamura•10mo ago

パネルを閉じるコードを書いてみました。これに差し替えるとどうですか？考慮すべき箇所はパネルだけではないのでこれで完成、というわけではないんですが。動けば条件分岐は合ってるってことで一旦は切り分けられそうです。

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
//    if( !! document.body.dataset.disableBfcache ){
        window.addEventListener( 'pageshow', function(event){
            if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
                //パネル全て閉じる
                let panelTimer;

                document.querySelectorAll( '.panel-open' ).forEach( function ( panel, i ) {
                    panel.classList.remove( 'panel-open' );
                    panel.classList.add( 'panel-close' );
    
                    clearTimeout( panelTimer );
                    panelTimer = setTimeout( function () {
                        setTimeout( function () {
                            panel.classList.remove( 'panel-close' );
//                            console.log(panel);

                        }, 200 );
                    }, menuSpeed / 3 );
    
                } );
            }    
        });
//    }
}

nishikiProDisableBfcache();

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
//    if( !! document.body.dataset.disableBfcache ){
        window.addEventListener( 'pageshow', function(event){
            if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
                //パネル全て閉じる
                let panelTimer;

                document.querySelectorAll( '.panel-open' ).forEach( function ( panel, i ) {
                    panel.classList.remove( 'panel-open' );
                    panel.classList.add( 'panel-close' );
    
                    clearTimeout( panelTimer );
                    panelTimer = setTimeout( function () {
                        setTimeout( function () {
                            panel.classList.remove( 'panel-close' );
//                            console.log(panel);

                        }, 200 );
                    }, menuSpeed / 3 );
    
                } );
            }    
        });
//    }
}

nishikiProDisableBfcache();

TKHR a.k.a たったかOP•10mo ago

試してみましたが「前より施策が効いてる気がする」感じで、完全に制御できてない感じです。どんな時にキャッシュが効いてて、どんな時に施策が当たってるのかわからないというか...

imamura•10mo ago

検証の仕方を明確にさせた方がいいですね。念のためandroidのchromeのキャッシュを全削除 ↓ シークレットタブで開く ↓ メニューを展開してページ遷移 ↓ chromeの戻るボタンまたはスワイプで戻るという感じでしょうか。

TKHR a.k.a たったかOP•10mo ago

今同じ環境で検証してるんですが、施策が効いてますね。ただ、バックした瞬間にはメニューが開いていたのがわかる（変遷した後、あったのが消える）って感じですね。

imamura•10mo ago

遷移してから発火するイベントなので、そういうもののような気がしますけどねー。

TKHR a.k.a たったかOP•10mo ago

コードの内容からすると、こうなりますよね、当然。

imamura•10mo ago

だと思います。なので、やるやらないは置いといてですがチラッと見えるのですら嫌ならmetaでキャッシュ無効にするくらいじゃないですかね。

TKHR a.k.a たったかOP•10mo ago

これどんなですかね？まっさらにわりと近づいたような…（時間設定部分をカットしてclass外し特化） /** Bfcache Disabled */ function nishikiProDisableBfcache() { window.addEventListener('pageshow', function(event) { if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') { // パネル全て閉じる処理 document.querySelectorAll('.panel-open').forEach(function(panel) { panel.classList.remove('panel-open'); }); } }); } nishikiProDisableBfcache(); 僕の場合、中にある例のタブメニューがたまに消え遅れちゃうんですがｗ

imamura•10mo ago

settimeoutの時間と連動するようにしてメニューの展開も閉じているので正しい動きではあります。これでどうですか。

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
//    if( !! document.body.dataset.disableBfcache ){
        window.addEventListener( 'pageshow', function(event){
            if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
                const allPanel = document.querySelectorAll(
                    '.panel-open'
                );

                if( !! allPanel ){
                    allPanel.forEach( function ( panel, i ) {
                        panel.classList.remove( 'panel-open' );
                    });
                }

                const allSubMenuItems = document.querySelectorAll(
                    '.menu-items .sub-menu'
                );

                if( !! allSubMenuItems ){
                    allSubMenuItems.forEach( function ( subMenu, i ) {
                        subMenu.classList.remove( 'show' );
                        subMenu.parentNode.classList.remove(
                            'menu-item-selected'
                        );
                    } );
                }
            }    
        });
//    }
}

nishikiProDisableBfcache();

/** Bfcache Disabled */
function nishikiProDisableBfcache(){
//    if( !! document.body.dataset.disableBfcache ){
        window.addEventListener( 'pageshow', function(event){
            if ( event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward' ) {
                const allPanel = document.querySelectorAll(
                    '.panel-open'
                );

                if( !! allPanel ){
                    allPanel.forEach( function ( panel, i ) {
                        panel.classList.remove( 'panel-open' );
                    });
                }

                const allSubMenuItems = document.querySelectorAll(
                    '.menu-items .sub-menu'
                );

                if( !! allSubMenuItems ){
                    allSubMenuItems.forEach( function ( subMenu, i ) {
                        subMenu.classList.remove( 'show' );
                        subMenu.parentNode.classList.remove(
                            'menu-item-selected'
                        );
                    } );
                }
            }    
        });
//    }
}

nishikiProDisableBfcache();

TKHR a.k.a たったかOP•10mo ago

タイムラグが出ちゃいますねー。そして…見つけたくなかったんですが… 閉じた後にもメニューが見えないクリッカブルなものとして残っている可能性が… （どちらのスクリプトでも発生）ここまで来るともう神が手を出すなと言っているような気がしているような気がしなくもないです😭

imamura•10mo ago

手元にandroid実機がない上にchromeのシミュレーターだと再現されないので開発効率落ちるんですよねー。そもそもやらなくていい施策だと僕は思っていますw 操作の様子を録画できませんか？

TKHR a.k.a たったかOP•10mo ago

シークレットだと真っ黒画面になるかもです。（撮ったけどなった）

閉じた後にもメニューが見えないクリッカブルなものとして残っている可能性が…

再現できなくなりました… この件は一旦保留でも良いかもしれないですね。とりあえず僕は自前のやつで微対応しておくので。

そもそもやらなくていい施策だと僕は思っていますw

確かになんですが、Nishiki Proはドロワーが全画面に広がる前提なので画面の変遷等の体感が利用者にわかり辛いと厄介ではあると思うんですよね。一番気になるのは利用者の体験を妨げなければ、BFCacheは悪いものではない（むしろ良い）ですけど、作り手もそこ意識しなきゃと思うので… むずいっすねー😩

imamura•10mo ago

僕は全画面にドロワーでも構わないですし、むしろ戻る操作をしたら自分が操作したそのままの状態が保たれているのは便利だと思う利用者なので、考え方はそれぞれだなあと思います。実装難しいので、戻る操作があったらシンプルにリロードする、でいい気がします。

TKHR a.k.a たったかOP•10mo ago

一般のHTMLキャッシュとは違うとはどこかで読んだので（BFCacheはスクショ）、リロードで良いのかもしれないっすね！スーパーリロードがかかるイメージでしたが違うみたいなので表示速度も気にしなくて良いかもしれないですし。

imamura•10mo ago

リロードがベストだとは思いませんけど、確実に再現できる方法を取るのがいいでしょうね。テーマ側としての対応は今のところ見送りたいと思います。

TKHR a.k.a たったかOP•10mo ago

了解しました！見送りがいいと思います！僕もちょこちょこリアルの反応見ながら再考したいと思います。

サポトピア by AnimaGate, Inc.Join

422Members

View on Discord

Want results from more Discord servers?

Add your server