basket.jsでスクリプトのlocalStorage保存を試してみる

GitHub Pagesでは.htaccessを自分でおくことが出来ないので キャッシュの有効時間とかを変更することが出来ません。

これを何とか出来ないかな、と思って探してたら basket.js というのを見つけたので試してみました。

• GitHub Pagesでのキャッシュとか
• basket.js
• 試した結果
• まとめ

GitHub Pagesでのキャッシュとか

GitHub Pagesを使っていて、デフォルトの github.ioのサブドメインを使ってる様な場合には .htaccessを書いてキャッシュの時間(Time To Live, TTL)を変更するような事は出来ません ¹

GitHub Pagesではcache-control: max-ageが600秒にセットされています ²。

これが短すぎる、ということでPageSpeed Insightsとかで怒られたりしてしまいます。

もし他のドメインを使ってる様な場合には CloudFlare みたいなCDNサービスを使ってそこでキャシュ時間を変更したりすることは出来ます ³。

と、この辺調べてる時に、GitHub Pagesも Content Delivery Network (CDN)のサービスを始めてたらしく、 普通にgithub.ioとかを使っているとCDNを使えてるとうことです ⁴。

とうことで、昨年1月位から？実はちょっと読み込みが速くなってたのかもしれません。

なので無理してキャシュ時間をどうこうするほどでも無いんだと思いますが、 取り敢えず何か出来るか見てみます。

basket.js

basket.js⁵ はブラウザのキャッシュではなくて localStorage(キャッシュと違って永続的に保存される) ⁶ を使って、2回目以降の接続時に外部ファイルをローカルから読み込む、 ということを実現してくれるスクリプトです。

基本的には同じサイト内にあるJavaScript用です。

使い方はまずbasket.full.min.jsを読み込んで その後に読み込みたい他のJavaScriptをbasketという変数に渡していきます ⁷ 。

1
2
3
4
5
6
7

<script src="//cdnjs.cloudflare.com/ajax/libs/basket.js/0.5.2/basket.full.min.js"></script>
<script>
basket.require({url: "//ajax.googleapis.com/ajax/libs/jquery/2.4.1/jquery.min.js").then(function () {
  basket.require({url: "/javascripts/script1.js", exipre: 5000}, {url: "/javascripts/script1.js", exipre: 5000});
});
</script>
</body>

こんな感じで</body>直前に書いていきます。

basket.requireに渡すのは連想配列で、 少なくともスクリプトの場所のurlが必要です。

exipreはキープしておく時間で、それ以上時間が経った場合には 一度localStorageの情報を消して再びダウンロードします。

この値はデフォルトが5000で、単位は時間なのでデフォルトだと7ヶ月程 キープされる事になります。

複数を非同期でロードしたい時には

basket.require({url: "/javascripts/script1.js", exipre: 5000}, {url: "/javascripts/script1.js", exipre: 5000});

な感じで1回のrequireの中に複数の連想配列を渡すと同時に読み込んでくれます。

jQueryを使ってるスクリプトなどで順序をきちんと付けたい時は 上の様に.thenで繋いでその中でロードする様にすればOK。

そんな感じで設定は簡単です。

ただし基本的にcross-domainな物には使えないので自分で持ってるものだけになります ⁸。 。

Analyticsとかのスクリプトを入れると

Error: 
スタックトレース:
h/b</d.onreadystatechange@http://addyosmani.github.io/basket.js/dist/basket.full.min.js:10:12467
 octopress.dev:387:2
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://www.google-analytics.com/analytics.js にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダ 'Access-Control-Allow-Origin' が足りない)。

みたいなエラーがコンソールに出ます。 (でもなぜかjQueryのは上の様に呼ぶことができました。何か勘違いしてる。。。?)

また、CSSファイルを読み込む方法の例もあります ⁹ (JavaScriptを使ってCSSを適用する方法)。

試した結果

jQueryと自分のサイトにあるall.jsの2つのスクリプトを 上の様にbasketで読み込んでみましたが、 2回目以降でもあまり分かる程ではないかな、と。

確かに加えたスクリプトを外に探しに行く時間はなくなるのですが、 basketのスクリプトを見に行く時間があるので 少量しかbasketに加えられないと余り意味がない感じ。

さらにPageSpeed Insightsで見てもまだall.jsはキャッシュ時間が短い、 というエラーが出ます。

ということでどこまで意味があるかというと少なくともこのブログでは余り意味が無さそう。 違うドメインのものも全部出来ればまた違うのかもしれませんが、 そちらはそちらでキャッシュを使えばいいのでは、と言う話も。

いずれにしろ初めて見る場合には接続する必要があるわけで、 その場合には逆にbasketの分だけ余計な作業が増える事になってしまいます。

まとめ

取り敢えず使ってみましたが、余り余計な事しなくても良いかな、ということで 使うのは辞めることにしました。

このスクリプト自体が2年前にちょっと話題になった感じ？みたいで、 その後余り話しに出てない感じもあります。

ブラウザの進化もあるのでどのような方法が良いのかも日々変わってるでしょうし。

ローカルストレージに簡単な解決策はない Mozilla Developer Street (modest)

みたいな話もあったりしますが、これが2012年でその後にも ちょこちょこローカルストレージが便利だ！みたいな話もあります。

それからbasket.jsを使うにはContent Security Posicyの問題もあるみたいです。

basket.js と Content Security Policy - メモログ

ということで、 今回導入するのは見送りましたが、 やってることをちょっと見てみたり 周辺のことを調べてみるのは面白いので良いかもしれません。