3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

JSとCSSをIndexedDBにキャッシュして3分でWebアプリを爆速に

JavaScriptファイルとCSSファイルをIndexedDBにキャッシュして初回アクセス以降のHTTPロードを削減します。

SPA、プリレンダーした静的ページ群など、なんでも高速化。

before

index.html
<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>
index.js
var doit = function(){
    document.getElementById('root').innerHTML = '<h1 class="cosme">Hello World!</h1>';
};
index.css
.cosme {
    color: red;
}

after

index.html
<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> に直接埋め込めば1セッションでロードが完了します。

コードキャッシュは同期的に動いて簡単に使える localStorage に入れることが多いですが、SPAはサイズも大きくなりがちでついつい10MBを超えてしまうことも。AppCacheはもっと小さいですし各リソースの明示的なコントロールも効かせにくい。

そんなときは IndexedDB に入れてしまえば大体解決ということで書いてみました。副産物として各リソースが読まれたことをイベントで判定することも可能に。

古いアプリケーションの高速化などにも使えると思います。また、ロード時に IndexedDB へのアクセスモジュールが window.bootConfig.Context.libStore に設定されるので、libStore#put / libStore#get でアプリケーション内からもキャッシュシステムとして利用可能かも知れません。

コードはこちら:
https://github.com/craftkit/craft-bootloader

枯れてないコードなのでバグがあればPR頂けると嬉しいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?