差分

このページの2つのバージョン間の差分を表示します。

--- ハイハイスクールアドベンチャー_web版 [2025/10/20 01:55] – [設定] araki
+++ ハイハイスクールアドベンチャー_web版 [2025/10/20 02:00] (現在) – [PWA] araki
@@ 行 79: / 行 79: @@
 ウェブページ上に 512x304((要するに倍のサイズ))で canvasを用意して、プログラム中ではネイティブサイズのダミーの canvas に書き込みを行い、倍サイズの表示領域に拡大転送することでこれを実現している。
-<code>
+<code javascript>
 this.zctx = document.getElementById("HHSAdv").getContext('2d');
 this.zctx.imageSmoothingEnabled = true;
@@ 行 100: / 行 100: @@
 年ごろの JavaScript によるオブジェクト指向プログラミングというと、クラスも何もなくて、普通の変数の宣言を利用してやっていたのが実態であった。
-<code>
+<code javascript>
 var Klass = function()
 {
@@ 行 122: / 行 122: @@
 基本的にデータファイルも、CGIで描画させた画像もこの枠組みを使ってやりとりしていたので、これも大きかった。
-<code>
+<code javascript>
 var req = new XMLHttpRequest();
 req.open('GET', 'cgi/loadB64.rb?name=" + name, true);
@@ 行 136: / 行 136: @@
 これはラムダ式を使うのが今風なんだと。
-<code>
+<code javascript>
 fetch('data/xxx.dat').then((res) => res.blob()).then((blob) => blob.arrayBuffer()).then((abuf) => {
     var buf = new Uint8Array(abuf); // arrayBuffer型はそのままでは利用できないので適当な形式にする。
@@ 行 148: / 行 148: @@
 全部をひとまとまりでやろうとするとうまく動かない。
-<code>
+<code javascript>
 fetch('data/xxx.dat').then((res) => {
     if (res.ok)
@@ 行 205: / 行 205: @@
 マニフェストファイルは、HTMLファイルの linkタグを使って次のようにマッピングする。
-<code>
+<code html>
 <link rel="manifest" href="hhsadv.webmanifest" />
 </code>
@@ 行 212: / 行 212: @@
 もっと詳細な仕様を記述できるが、詳しくは[[https://developer.mozilla.org/ja/docs/Web/Manifest|こちら]]などを参照してほしい。
-<code>
+<code css>
 {
         "background_color": "black",
@@ 行 246: / 行 246: @@
 Service WorkerもHTMLファイルから登録してやる必要がある。
-<code>
+<code javascript>
 if ('serviceWorker' in navigator)
 {
+    navigator.serviceWorker.addEventListener('message', (event) => {
+	if (event.data && event.data.type == 'UPDATE_AVAILABLE') {
+	    const shouldReload = confirm('更新が利用可能です。更新しますか？');
+	    if (shouldReload)
+	    {
+		window.location.reload();
+	    }
+	}
+    });
     navigator.serviceWorker.register('sw.js');
 }
@@ 行 255: / 行 264: @@
 Service Worker本体((ここでは js/sw.js))も最低限だと以下のようになる。
-<code>
+<code javascript>
 // cache
 var CACHE_NAME = 'hhsadv-caches';
@@ 行 298: / 行 307: @@
                 })
         );
+});
+// update
+self.addEventListener('activate', (event) => {
+  const cacheWhitelist = []; // 現在有効なキャッシュ名
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          // 現在のバージョンに含まれていない（古い）キャッシュを削除
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            console.log('古いキャッシュを削除:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+    // すべてのキャッシュ削除が完了したら、クライアントへの制御を引き継ぐ
+    .then(() => self.clients.claim())
+  );
+  event.waitUntil(
+    // すべてのクライアントに更新完了を通知
+    self.clients.claim().then(() => {
+      self.clients.matchAll().then((clients) => {
+        clients.forEach(client => {
+          client.postMessage({ type: 'UPDATE_AVAILABLE' });
+        });
+      });
+    })
+  );
 });
 </code>
@@ 行 329: / 行 370: @@
 動的に確保された Audio のインスタンスは再生が終わったらガベージコレクションの対象になるって書いてあるので、音を鳴らすときに確保して、鳴らしたら勝手に消えることを期待する。
-<code>
+<code javascript>
 var m = new Audio();
 m.src = this.base_uri + "/data/" + ZAudio.sources[n] + ".mp3";
@@ 行 356: / 行 397: @@
 世の中には優れた人が多くいて、既にCSSを駆使して、そういうものをチェックボックスに付加してくれているので、まるっとそれをいただくことにする。
-<code>
+<code html>
 <label for="mute" class="switch_label">
 	<div class="switch">
@@ 行 370: / 行 411: @@
 この部分はすべてCSSに記述されている。
-<code>
+<code css>
 .switch {
 	position: relative;