スマホキャッシュ対策のためのcssパラメータ付与を自動化する

[ ID : 1991 ]
スマホキャッシュ対策のためのcssパラメータ付与を自動化する

概要

【PHP, JS】iPhone safari等でcssの更新がなかなか反映されない現象に対する対策方法について。
スマートフォンでCSSの修正が反映されない・時間がかかる問題を解消するパラメータ付与を自動で行ないます。

用途

  • コーディング中にcssの更新を行なったがスマートフォン実機の場合だけ反映されない事象への対応方法。
  • iPhone等の「履歴を削除」よりも実機での修正反映を確認する時間を短縮できる。

内容

  • css等のファイル参照パスの末尾にタイムスタンプ(timestamp)をパラメータ付与することでキャッシュ対策とする。
  • JS版とPHP版を2パターンを用意。
  • JS版の場合はtimestampパラメータを付与したいファイル参照パスの最後に「?timestamp=」を予め記述しておくこと。
  • 静的にパラメータを付与してもキャッシュ対策となるが、修正の都度パラメータを変更する必要が生じるため、自動でパラメータが付与される処理を用意
    ※JS版はcssを読み直すことになるため挙動が重くなるため、手間でなければ静的なパラメータの記述を推奨します。

注意事項

  • ファイルの更新日時のタイムスタンプではないことに注意。
  • JS版の場合は「?timestamp=」から始まるパラメータが既に付与されているcssが存在する場合に注意。
  • サイトを本番公開するタイミングで除去することを推奨(cssの更新頻度が少なくなることが想定されるため)。
  • 特にJS版は表示が遅くなる可能性が高いため、注意が必要。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録