JavaScriptファイルとCSSファイルをIndexedDBにキャッシュして初回アクセス以降のHTTPロードを削減します。
SPA、プリレンダーした静的ページ群など、なんでも高速化。
before
<html>
<head>
<script src="./index.js"></script>
<link rel="stylesheet" href="./index.css"></link>
<script>
window.onload = function(){
doit();
};
</script>
</head>
<body id="root">
</body>
</html>
var doit = function(){
document.getElementById('root').innerHTML = '<h1 class="cosme">Hello World!</h1>';
};
.cosme {
color: red;
}
after
<html>
<head>
<script src="https://unpkg.com/@craftkit/craft-bootloader/dist/craft-bootloader.min.js"></script>
<script>
window.bootConfig = {
library : [
{ uri:'./index.js', version:'1.0.0' },
{ uri:'./index.css', version:'1.0.0' },
],
onProgress : function(lib){
console.log( lib.uri + ' was loaded' );
},
onLibrayLoaded : function(){
doit();
}
};
</script>
</head>
<body id="root">
</body>
</html>
about
before → after という感じに library にリソースを設定。全部読み込まれると onLibrayLoaded が呼ばれます。
library に定義されるリソースエントリーの uri をキーにして、version を管理するオブジェクトストアと実体を管理するオブジェクトストアが IndexedDB に作成され、version が変更されると IndexedDB の実体キャッシュもアップデート。エントリーが library から削除されれば次回チェック時に IndexedDB からも削除されます。
上の例示では unpkg.com から読み込んでいますが、5KB程のライブラリなので <head> に直接埋め込めば１セッションでロードが完了します。
コードキャッシュは同期的に動いて簡単に使える localStorage に入れることが多いですが、SPAはサイズも大きくなりがちでついつい10MBを超えてしまうことも。AppCacheはもっと小さいですし各リソースの明示的なコントロールも効かせにくい。
そんなときは IndexedDB に入れてしまえば大体解決ということで書いてみました。副産物として各リソースが読まれたことをイベントで判定することも可能に。
古いアプリケーションの高速化などにも使えると思います。また、ロード時に IndexedDB へのアクセスモジュールが window.bootConfig.Context.libStore に設定されるので、libStore#put / libStore#get でアプリケーション内からもキャッシュシステムとして利用可能かも知れません。
コードはこちら:
https://github.com/craftkit/craft-bootloader
枯れてないコードなのでバグがあればPR頂けると嬉しいです。