差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
| ハイハイスクールアドベンチャー_web版 [2025/10/20 01:54] – [設定] araki | ハイハイスクールアドベンチャー_web版 [2025/10/20 02:00] (現在) – [PWA] araki | ||
|---|---|---|---|
| 行 79: | 行 79: | ||
| ウェブページ上に 512x304((要するに倍のサイズ))で canvasを用意して、プログラム中ではネイティブサイズのダミーの canvas に書き込みを行い、倍サイズの表示領域に拡大転送することでこれを実現している。 | ウェブページ上に 512x304((要するに倍のサイズ))で canvasを用意して、プログラム中ではネイティブサイズのダミーの canvas に書き込みを行い、倍サイズの表示領域に拡大転送することでこれを実現している。 | ||
| - | < | + | < |
| this.zctx = document.getElementById(" | this.zctx = document.getElementById(" | ||
| this.zctx.imageSmoothingEnabled = true; | this.zctx.imageSmoothingEnabled = true; | ||
| 行 100: | 行 100: | ||
| 2011年ごろの JavaScript によるオブジェクト指向プログラミングというと、クラスも何もなくて、普通の変数の宣言を利用してやっていたのが実態であった。 | 2011年ごろの JavaScript によるオブジェクト指向プログラミングというと、クラスも何もなくて、普通の変数の宣言を利用してやっていたのが実態であった。 | ||
| - | < | + | < |
| var Klass = function() | var Klass = function() | ||
| { | { | ||
| 行 122: | 行 122: | ||
| 基本的にデータファイルも、CGIで描画させた画像もこの枠組みを使ってやりとりしていたので、これも大きかった。 | 基本的にデータファイルも、CGIで描画させた画像もこの枠組みを使ってやりとりしていたので、これも大きかった。 | ||
| - | < | + | < |
| var req = new XMLHttpRequest(); | var req = new XMLHttpRequest(); | ||
| req.open(' | req.open(' | ||
| 行 136: | 行 136: | ||
| これはラムダ式を使うのが今風なんだと。 | これはラムダ式を使うのが今風なんだと。 | ||
| - | < | + | < |
| fetch(' | fetch(' | ||
| var buf = new Uint8Array(abuf); | var buf = new Uint8Array(abuf); | ||
| 行 148: | 行 148: | ||
| 全部をひとまとまりでやろうとするとうまく動かない。 | 全部をひとまとまりでやろうとするとうまく動かない。 | ||
| - | < | + | < |
| fetch(' | fetch(' | ||
| if (res.ok) | if (res.ok) | ||
| 行 205: | 行 205: | ||
| マニフェストファイルは、HTMLファイルの linkタグを使って次のようにマッピングする。 | マニフェストファイルは、HTMLファイルの linkタグを使って次のようにマッピングする。 | ||
| - | < | + | < |
| <link rel=" | <link rel=" | ||
| </ | </ | ||
| 行 212: | 行 212: | ||
| もっと詳細な仕様を記述できるが、詳しくは[[https:// | もっと詳細な仕様を記述できるが、詳しくは[[https:// | ||
| - | < | + | < |
| { | { | ||
| " | " | ||
| 行 246: | 行 246: | ||
| Service WorkerもHTMLファイルから登録してやる必要がある。 | Service WorkerもHTMLファイルから登録してやる必要がある。 | ||
| - | < | + | < |
| if (' | if (' | ||
| { | { | ||
| + | navigator.serviceWorker.addEventListener(' | ||
| + | if (event.data && event.data.type == ' | ||
| + | const shouldReload = confirm(' | ||
| + | if (shouldReload) | ||
| + | { | ||
| + | window.location.reload(); | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| navigator.serviceWorker.register(' | navigator.serviceWorker.register(' | ||
| } | } | ||
| 行 255: | 行 264: | ||
| Service Worker本体((ここでは js/ | Service Worker本体((ここでは js/ | ||
| - | < | + | < |
| // cache | // cache | ||
| var CACHE_NAME = ' | var CACHE_NAME = ' | ||
| 行 298: | 行 307: | ||
| }) | }) | ||
| ); | ); | ||
| + | }); | ||
| + | |||
| + | // update | ||
| + | self.addEventListener(' | ||
| + | const cacheWhitelist = []; // 現在有効なキャッシュ名 | ||
| + | |||
| + | event.waitUntil( | ||
| + | caches.keys().then((cacheNames) => { | ||
| + | return Promise.all( | ||
| + | cacheNames.map((cacheName) => { | ||
| + | // 現在のバージョンに含まれていない（古い）キャッシュを削除 | ||
| + | if (cacheWhitelist.indexOf(cacheName) === -1) { | ||
| + | console.log(' | ||
| + | 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: ' | ||
| + | }); | ||
| + | }); | ||
| + | }) | ||
| + | ); | ||
| }); | }); | ||
| </ | </ | ||
| 行 329: | 行 370: | ||
| 動的に確保された Audio のインスタンスは再生が終わったらガベージコレクションの対象になるって書いてあるので、音を鳴らすときに確保して、鳴らしたら勝手に消えることを期待する。 | 動的に確保された Audio のインスタンスは再生が終わったらガベージコレクションの対象になるって書いてあるので、音を鳴らすときに確保して、鳴らしたら勝手に消えることを期待する。 | ||
| - | < | + | < |
| var m = new Audio(); | var m = new Audio(); | ||
| m.src = this.base_uri + "/ | m.src = this.base_uri + "/ | ||
| 行 356: | 行 397: | ||
| 世の中には優れた人が多くいて、既にCSSを駆使して、そういうものをチェックボックスに付加してくれているので、まるっとそれをいただくことにする。 | 世の中には優れた人が多くいて、既にCSSを駆使して、そういうものをチェックボックスに付加してくれているので、まるっとそれをいただくことにする。 | ||
| - | < | + | < |
| <label for=" | <label for=" | ||
| <div class=" | <div class=" | ||
| 行 370: | 行 411: | ||
| この部分はすべてCSSに記述されている。 | この部分はすべてCSSに記述されている。 | ||
| - | < | + | < |
| .switch { | .switch { | ||
| position: relative; | position: relative; | ||
| 行 430: | 行 471: | ||
| DBのアップグレードとかしないと思ってたが、いきなりすることになるとは先見の明がなさ過ぎた。 | DBのアップグレードとかしないと思ってたが、いきなりすることになるとは先見の明がなさ過ぎた。 | ||
| - | < | + | < |
| const req = indexedDB.open(Database.DBNAME, | const req = indexedDB.open(Database.DBNAME, | ||
| req.onupgradeneeded = (event) => | req.onupgradeneeded = (event) => | ||