misskey
misskey copied to clipboard
misskey-dev
いい感じにJSとCSSをキャッシュする
Summary
現状PWAのキャッシュをほとんど活かせていないので、アップデートするたびにブラウザのキャッシュをクリアしないとエラー画面が表示されるなど使い慣れていないユーザーにとってあまり良くない印象を与えている
workbox-routing などのServiceWorkerでのキャッシュモジュールでjsとcssをキャッシュすることである程度緩和できると思う
参考
https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#caching-strategies
通常のブラウザでもエラー画面を見ることはわりとある 自分で経験したえらーはだいたいjsファイルに対しての404だけど、サーバー側がdockerもしくはコンテナーベースで稼働されている場合、前のバージョンのjsの残骸がサーバー上に残っていないので、当然４０４を返すことになる たまたまrequestしたファイルが設定画面を構成するjsだった場合はサイト上ではキャッシュをクリアすることができなくなる場合もある
全てのサーバーがCDNを利用してるわけではないし、CDNのキャッシュが残っているとしても一部だけ保存されていたりは十分ありえる むしろ中途半端にキャッシュされていた場合が一番ややこしくて、CDNのキャッシュが消えるまで真っ暗な画面になったりもする
サーバー側にはもういないファイルなのでキャッシュに依存するのも限界があるかも
例えば、滅多に設定画面を開かないお一人様サーバーなら、CDNを利用してるとしても設定画面のJSがキャッシュに残っていない可能性が十分ありえる このケースで、サーバーのアップデート後ページを開いたら、boot.jsはキャッシュされてるからだいたいの画面は読み込むことができるけど、アップデートの画面が出ないなーと思って設定画面を開くと設定画面のjsが存在しないため404が返させる
サバ缶が/とboot.jsだけCDNからinvalidateしても上手くアップデートされないユーザーがたまにいるし、
いまは404が返されてしまったらそのままなにもできない状態になってしまうので、裏で勝手に更新してほしい
PWAで一部キャッシュしてもらってアップデートチェックをnetwork firstかstale-while-revalidateでしてあげて、エラーを検出したら一度boot.jsなどのアプデを試みてそれでもダメならエラー画面になるみたいな挙動ができると一番いいんじゃないかな？ついでに重いjsもキャッシュさせることができる
/が中途半端にキャッシュされてバージョンが食い違うのが問題では？
キャッシュコントロールは15秒とかにしてあるはずなんだけど、ただ運悪く15秒の間にアクセスすると微妙なことになるのはそうかも
それはそうとnginx必須化は賛成
workboxはaqzさんがよくわかってないので使いたくない（などと）
というか現状キャッシュが短く設定されているはずの/のキャッシュを参照してしまっている状態であることを考えると、ServiceWorkerでキャッシュなんかしたら一生アップデートできないようなことになりかねなさそう
ServiceWorkerでキャッシュなんかしたら一生アップデートできないようなことになりかねなさそう
そこはnetwork firstかstale-while-revalidateでなんとかなると思ってる（networkFirstはサーバーのデータを優先するモード、stale-while-revalidateは一旦キャッシュを見せるけど裏で更新してくれるモード）
あとこの現象に慣れてるユーザーはアプデ後にブラウザのキャッシュを消してるし、 何かあったらほっておくと上手くアプデされないというのはいまも同じかも （「キャッシュクリア」でioで検索してみるとうまくアプデできなくてエラー画面を見てる人が沢山いる）
現状問題になるのは/だけじゃない/assets/boot.js?v=バージョンもそうだし
CDNの設定やブラウザのバージョンによっては勝手にキャッシュ期間を変えてしまうこともある
キャッシュされたくないURLに?cachebuster=$UNIXEPOCHなどをつけてしまう力技もあるっちゃあるけどそれでぜんぶ解決かというとそうでもないので