HAPPENING by group_inou ソースリーディング
アニメーションWebPの上にcanvas乗せてるんだなーということは分かった
画像や音楽ファイルにCache-Controlがついていないと思ったけどJxck氏のブログに書かれている「Reload」の方法でページを読み込んでいたからだった。適当にa要素のhref属性を書き換えて遷移したらservice workerからファイルが読み込まれて爆速になった
cache-controlついていないのは変わらなかった
Service Workerのscopeが './' となっているけど、各種ファイル名にハッシュ値などがついていないのでファイルの内容を差し替えたくなったときに大丈夫かなと心配してしまう
cache-control付いていないので各user agentの実装やオプションによってキャッシュの保持期間が決まりそう？
Service Workerを使っている関係で一度読み込みさえすればオフラインでも見られるっぽい
オフライン対応やったことないのでにわかなことしか言えない
参考:
Fetch APIとXMLHttpRequestの両方を使っているっぽい？
assets/happening.mp3 が fetch() とXMLHttpRequest（のwrapper）で読み込まれている？
happening.mp3 はWeb Audio APIで再生制御しているっぽい
AudioContext という文字列がソース内にあった
Wappalyzerによる検出結果
https://gyazo.com/abf2551a194f5fb0c147ec69c6f38a11
Vueなんだね
const Nd = "components", g4 = "directives", Od = Symbol.for("v-ndc");という文字列を見つけた
Vapor Modeは実験的っぽい
core-vaporは使ってないな
他にも v-fgt という文字列を見つけたので、org:vuejs v-fgt でGitHub内を検索したらvuejs/coreも引っかかった
たぶんvuejs/core使ってる
少なくともVueのバージョン3系を使っているっぽい
versionは最新のv0.12.17っぽい
VITE_OG_IMAGE: "assets/ogp.png?20231204" という文字列があった
少なくとも3ヶ月以上は制作にかかっているっぽい
__vueuse_ssr_handlers__ という文字列を見つけた
"interpolation mode " + jt + " is not defined" という文字列を見つけた
"interpolation mode" "is not defined" でGitHub内を検索したら明らかにChroma.js内のエラーハンドリングっぽかった