hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > かずひらさん向けおすすめ情報

かずひらさん向けおすすめ情報

あしたのベストという最高のウェブサービスを作られているかずひらさんが困ってそうなので書いてみます。

例えばこのようにユーザーのブラウザのキャッシュを飛ばしたいとか、問題にブチ当たった時に、とりあえず知ってる方法で解決するものの決してスマートな方法ではなく、しかしベストプラクティスは依然判明しない、ということが多くて、もんにょりした気持ちが続いてる。

あしたのベスト更新した - かずひらの日記

ググっても色んな情報が出てきて困ると思うのでおすすめ情報源を書いておくと、おすすめのページはWeb FundamentalsとMDNです。

ウェブ開発やってみよう!みたいなときには、中身のHTMLとかJavaScriptどう書きますか、とかResponse Bodyが気になりがちだけど、キャッシュを正しく扱うにはHTTPヘッダを正しく扱う必要があります。かいつまんで書いておくと以下。

  • HTMLはno-storeにして、毎回サーバーに問い合わせる
  • 画像、JS、CSSなど、HTMLから参照しているものたちはmax-ageを長め(1年とか)にして、そのかわりURLと内容が一対一になるようにする
    • 手動でやるなら、src=main.jsじゃなくて src=main.js?20191124 とか日付を入れる、とか

今回関係しそうな部分を引用しておくとこのあたり。ここだけ読んでくださいというわけではなくて、最初から読んでいって、ここにたどり着いたときになるほどとなれるとよさそう。

一方、「no-store」はもっと単純です。 返されたレスポンスのバージョンにかかわらず、ブラウザのキャッシュやすべての中間キャッシュはそのレスポンスを一切格納できません。たとえば、個人の機密データや銀行データが含まれているレスポンスなどです。 ユーザーがこのアセットをリクエストするたびに、リクエストがサーバーに送信され、完全なレスポンスが毎回ダウンロードされます。

HTTP キャッシュ  |  Web Fundamentals  |  Google Developers

では、クライアント側のキャッシュと迅速な更新の両方の長所を活かすにはどうすればよいでしょうか。 リソースの URL を変更して、コンテンツが変わるたびにユーザーが新しいレスポンスをダウンロードしなければならないようにすればよいのです。 通常、この処理はファイルのフィンガープリント、またはバージョン番号をファイル名に埋め込む（たとえば、style.x234dff.css など）で実現されます。

HTTP キャッシュ  |  Web Fundamentals  |  Google Developers


トップページからリンクするときは?1とかつければいいけど、トップページごとキャッシュしてしまうと、どうしようもなくなるという話題がある。僕も昔趣味で作ってるページを10日間キャッシュしてしまって、次のバージョンはURLを変えてしのいでいた…。

bonはGoogle App Engineに古いページが10日間キャッシュされてしまい，更新不能になったため，UIを改善したbon2をリリースいたしました．

bon2をリリースしました - hitode909の日記