こちらの記事でティラノスクリプトで製作したゲームをブラウザゲームとして公開する際のPWA対応について書きましたが、その後1本ブラウザゲームを公開する際に得たなんやかんやを書き連ねます。

##オフラインキャッシュ
前述の記事の内容だと、一応リソースは全てキャッシュしてくれるにはしてくれるのですが、実際にゲームをプレイしている際にはキャッシュではなくサーバー上のファイルを読みにいってしまうファイルというものがあります。

###キャッシュから読み込むもの

画像
音声ファイル
動画（たぶん）

###キャッシュではなくサーバーから読み込むもの

シナリオファイル
[loadcss]で読み込むcss
[loadjs]で読み込むjs

実際にDevToolのNetworkタブを見てみればわかるのですが、サーバーから読み込むファイルはゲーム中に該当ファイルへの通信が発生した際に「ファイル名?+ランダムな数値」へアクセスしています。
しかしServiceWorkerでのキャッシュは「ファイル名」のみで行っているため、サーバーへの通信が発生しているようです。

これではオフラインプレイができません。いやブラウザゲームなんだからいいだろと言われてしまえばそれまでですが、せっかくできるのだからやってみたい。やる。

###全部オフラインキャッシュするには
こちらのブログを参考にしました。

tyrano/lib.js

    $.loadText = function(file_path, callback) {
        （中略）       
        $.ajax({
            url: file_path + "?" + Math.floor(Math.random() * 1000000),
            cache: false,
            success: function(text){
                order_str = text;
                callback(order_str);
            },
            error:function(){
                alert("file not found:"+file_path);
                callback("");
            }
        });

これを

tyrano/lib.js

    $.loadText = function(file_path, callback) {
        （中略）       
        $.ajax({
            url: file_path + "?" + 1,
            cache: false,
            success: function(text){
                order_str = text;
                callback(order_str);
            },
            error:function(){
                alert("file not found:"+file_path);
                callback("");
            }
        });

こう
同じ要領でcssとjsも対応します

tyrano/plugin/kag/kag.tag_system.js

  tyrano.plugin.kag.tag.loadcss = {
    vital: ["file"],
    pm: {
      file: ""
    },
    start: function (pm) {
      var file = pm.file;
//      var style = '<link rel="stylesheet" href="' + file + "?" + Math.floor(Math.random() * 1E7) + '">';
      var style = '<link rel="stylesheet" href="' + file + "?" + 1;
      $("head link:last").after(style);
      this.kag.stat.cssload[file] = true;
      this.kag.ftag.nextOrder()
    }
  };

tyrano/plugin/kag/kag.tag_ext.js

tyrano.plugin.kag.tag.loadjs = {
    vital: ["storage"],
    pm: {
      storage: ""
    },
    start: function (pm) {
      var that = this;
      //ここから追加
      $.ajaxSetup({
        cache: true
      });
      //ここまで追加
      $.getScript("./data/others/" + pm.storage, function () {
        that.kag.ftag.nextOrder()
      })
    }
  };

loadjsは、スクリプト中で直接ランダムな数値を付与しているわけではありませんが、getScriptのデフォルトがキャッシュをしない設定なので、ajaxSetupでキャッシュをする設定に上書きしています。
実際にゲームとして公開する場合は数値をべた書きではなく別ファイルに定数として持たせて、バージョンアップごとに定数を書き換える、という形になるのかな

そして最後にtsw.jsで読み込んでいるファイルのうち、シナリオファイルと[loadcss]で読み込むcssと[loadjs]で読み込むjsのファイル名末尾に"?定数"を付与すればおｋ

実はまだパッチ読み込みの部分も残ってるけどブラウザゲーとして公開するならパッチってそんな使わないよね…？

一応これで短編ノベル程度ならオフラインでも動いています。立ち絵がヌルヌル動いたりフルボイスだったり長編ノベルだとどうなるかはわからない
あとティラノスクリプトの本体部分に手を加えているのでやるなら自己責任でお願いします！！！