2

このアプリケーションでは、ブラウザのキャッシュから古い画像を取得しないようにする2つのユースケースがあります。

  1. ユーザーがプロフィール写真を変更します。
  2. ユーザーが、管理を許可されている別のユーザーの写真を変更します（チームとそのキャプテンを考えてみてください）。

アップロードビューでは、他の質問ですでに提案されているように、画像のURLにタイムスタンプを追加しても問題はありません（AJAXファイルのアップロード後に画像を更新する、画像のキャッシュを解除する）。他のすべてのビューでは、その単純なアプローチに問題がある可能性があります。実際には可能な限りキャッシュを使用したいのですが、最近イメージを更新したことがわかっている場合は、キャッシュを使用しないでください。

このアプリケーションでは、管理ユーザーはユーザーイメージでユーザーを表すユーザーリストを使用します（これは革新的です）。ユーザー画像の1つを変更したばかりの場合は、このリストに新しい画像を表示する必要があります。彼女がユーザーの画像を見るたびに同じです。

このユーザーリストのすべての画像に追加することはできません?timestamp={now}。これは、キャッシュのメリットを損なう可能性があるためです。

可能な限りキャッシュを使用し、更新したことがわかっている画像をリロードする優れたアプローチに関する推奨事項はありますか？

4

1 に答える 1

0

今のところ選択したソリューション：

  1. 画像に適切なヘッダーを設定する予定です（この非常に良い回答を参照してください）
  2. URLをレンダリングするときに使用される更新された画像のローカルリストを保存します

パート2では説明が必要な場合があります。幸い、フロントエンドで非常に優れたJSフレームワークを使用しているため、任意のメソッドを定義してテンプレートで使用できます。モデルには写真のURLを返すメソッドが1つあり、このURLはすべてのテンプレートで使用されます。

新しい画像をアップロードするときに、IDをlocalStorageの現在のタイムスタンプに関連付けます。

window.localStorage['nocache.'+id] = new Date().getTime()

画像パスをリクエストするたびに、localStorageを調べて、URLにタイムスタンプを追加する必要があるかどうかを確認します。追加しない場合、URLはそのまま返されます。

利点/改善

  • ユーザーが自分でトリガーした更新は、キャッシュの有効期限が切れた後だけでなく、すぐに利用できるようになります。
  • 他のすべてのリソースはキャッシュを使用します。
  • localStorage作成しているすべての画像URLを調べます。これは高額になる可能性があります。
  • 写真のURLを作成するには、常にモデルのメソッドを使用する必要があります（DRYの観点からは良いですが、モデルを使用する必要があります）

コード

URLを生成するコードは次のようになります

getPhotoUrl: function() {
    return api.getImageUrl(this.id)
}

APIで（非常に単純化）

getImageUrl: function(id) {
    var url = "/prefix/something/user/" + id + "/image";
    // if we have stored a timestamp, add that to the URL
    var noCache = window.localStorage['nocache.'+id];
    if (noCache !== undefined) {
        url += "?" + noCache;
    }
    return url;
}

テンプレートコードは同じままです。

<!-- render via img.src -->
<img src="<%= user.getPhotoUrl() %>" alt="<%= user.lastname %>" />

<!-- render via CSS background -->
<div class="img" alt="<%= this.shortUsername %>"
    style="background-image: url('<%= this.getPhotoUrl() %>')">
    ...
</div>
于 2012-07-17T13:18:07.717 に答える