AngularDartでビルド時にクエリ付与をしてjsファイルをキャッシュさせないライブラリ built_html

こんにちは、@tkitsunaiです。

Angular Dartに最近ハマってます。

静的ファイルとして配布した後は、index.htmlなどに含まれるjsファイルはブラウザ側にキャッシュされてしまいます。

基本的にはキャッシュは有効にさせつつも、新しいバージョンの静的ファイルを確実に反映されてほしいと思います。

webpackでいうhtml-loaderのようなアレです。なかったら作ろうかと思ってましたが、https://pub.dev/でそんな感じのライブラリを探したらちょうど良さそうなものを見つけたので共有

pub.dev

使い方

とても簡単。

index.htmlをindex.template.htmlにリネームし、キャッシュ対策のクエリを付与したい場所に差し込みます

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css?q={{digest styles.css}}">
    <link rel="icon" type="image/png" href="favicon.png">
    <base href="/">
    <script defer src="main.dart.js?q={{digest main.dart.js}}"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

digestで指定したファイルstyles.cssとmain.dart.jsをビルド時のハッシュ値で付与するようです。

そんで webdev build

出来上がったbuild/index.htmlを確認します。

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css?q=90f3bcadc1c9712de722965fd869e4b9">
    <link rel="icon" type="image/png" href="favicon.png">
    <base href="/">
    <script defer src="main.dart.js?q=1c6ec810980a87a9a73bd0972a8396fe"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

付与されてますね。

ハッシュ値、ということなのでmain.dartの中身だけ変更してみます。

void main() {
  runApp(ng.AppComponentNgFactory);
}

一行だけ追加

void main() {
  print("hello digest");
  runApp(ng.AppComponentNgFactory);
}

もう一回 webdev buildをしてbuild/index.htmlを確認します。

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css?q=90f3bcadc1c9712de722965fd869e4b9">
    <link rel="icon" type="image/png" href="favicon.png">
    <base href="/">
    <script defer src="main.dart.js?q=db301b802bec6119391b6a794be6d53f"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

ちゃんと変わっています。styleのほうは変えていないので、そのままとなります。

うむ、期待通りです。使えそう。

kitslog

何かを書く

AngularDartでビルド時にクエリ付与をしてjsファイルをキャッシュさせないライブラリ built_html

使い方