PWA時代とは
PWAとは、ProgressiveWebAppsの略で、Webアプリケーションでのユーザ体験を向上させる仕組みです。
Google社が推進している技術で、最近のフロントエンドエンジニア界隈ではなかなかに盛り上がっているようです。
Angular Mobile Toolkit でフロントエンド実装を行えば、
本番用にビルドするだけでServiceWorkerが作られ、PWA対応が完了するというレベルまで来ているようです。
PWAでは、ファイルをキャッシュすることが可能で、携帯がオフラインの場合でも表示させることができます。
飛行機に乗っている間など、完全にネットワークにつながっていなくても、
キャッシュファイルをロードさせてコンテンツを表示できるというすぐれものです。
画像のレスポンシブ・Retina対応時代のimg
レスポンシブ・retina対応時代のimgタグは下記のようにsrcsetが入っていると思います。
<img src="/hoge.png" srcset="/hoge@2x.png" />
この場合srcsetに対応しているブラウザの挙動としては、
srcsetの中からwindow幅があっているものを読み込んで表示します。
レスポンシブデザインの場合、スマホで表示している時に
解像度の低い画像のみを読み込ませることも可能です。
PWA時代のimg
PWA時代では、画像ファイルをキャッシュできます。
上記のレスポンシブ・retina対応時代のimgタグだと、
1つのimgタグ内にいくつも画像ファイルが用意される事になりますが、
表示に利用するものは1つだけです。
よって全ての画像をキャッシュすることは非常に無駄が多いです。
srcの画像だけをキャッシュして、srcsetの画像は
<img
src="/hoge.png" // 出来る限りキャッシュしておく
srcset="/hoge@2x.png" // 都度読み込む
onerror="if(this.srcset==this.src){this.src=this.srcset='/offline.png';this.onerror=false;}else{this.srcset=this.src}"
// onerror内の"/offline.png"は必ずキャッシュしておく
/>
このようにonerror属性をつけておくと、下記の順序で動作します。
なお、ここで言う「読み込めない」とは「オフラインやネットワークが遅くて読み込めない」という状況を指します。
まずは、srcsetの中で適切な画像を読み込みます。
読み込めなかった場合、srcに記述されている画像を読み込みます。
読み込めなかった場合、キャッシュされている画像を表示します。
該当の画像ファイルをキャッシュしていない場合、/offline.png を読み込みに行って、読めなかった場合にキャッシュファイルを利用します。
キャッシュクリアをされていた場合など、offline.pngも表示ができなかった場合、
onerrorのスクリプトが無限ループを起こしてしまうため、 this.onerror=false; を入れています。
このonerrorを、imgタグ吐き出し時に入れてやると、
画像ファイルはsrcに記述されているものだけキャッシュすれば良くなります。
実装が簡素になっていいですね。
