HSP3Dish.jsでPWA対応してみる
目次
この記事でやること
HSP3Dish.jsで作ったウェブアプリは、そのままでもブラウザ上で動作します。 PWAにすると、これをもう少し「アプリっぽく」動かすことができます。
作例：adv001.html
ですが、全部自分でやろうとすると、やることも考えることも多いです。 そもそも何からはじめればいいのか分からないし、エラーが出たらどこを見ればいいのか分からない。
そこで、HSP3ユーザー向けに PWA化のひな型 を作ってみました。
この記事では、HSP3Dish.jsで作ったウェブアプリを、ひな型を使ってPWA化する手順を紹介します。 あわせて、うまく動かないときの調べ方や、トラブル対応のヒントも簡単にまとめました。
この記事について（注意点）
この記事は、PWAやWebアプリ開発の専門家が書いたものではありません。 私がHSP3Dish.jsでアプリを作りつつ、調べて試してを繰り返した結果をまとめたものです。
内容が常に正しいとは限りませんし、環境によっては同じように動かないこともあります。 実際に試す場合は、自己責任でお願いします。
PWAって何をすると何が変わるのか
PWAは、いまブラウザで動いているウェブアプリを、スマホやPCに入っている「アプリっぽく」見せる仕組みです。 画面いっぱいに表示されたり、ホーム画面にアイコンが出たり、通信が切れても起動したりします。
中身が別物になるわけではありません。 HSP3Dish.jsで作ったウェブアプリに、「これはアプリですよ」という情報を足していくイメージです。
具体的には、次のような準備をします。
- アプリ名やアイコンをまとめた「マニフェスト」を用意する
- キャッシュ管理を行う「Service Worker」を設定する
- それらをHTMLから正しく読み込む
この3つがそろうと、ブラウザは「これはPWAだな」と判断します。
対象
本記事は、次のような方を想定して書いています。- HSP3ユーザー
- HTML / JavaScript の基礎が分かる方
- Webサイトをサーバーにアップロードした経験がある方
細かい仕様や理屈を深く解説する記事ではありません。 ひな型を使って、HSP3Dish.jsで作ったウェブアプリをPWAとして動かすところまでを、一通り体験することを目的としています。
ひな型のダウンロード
ここからは、実際に手を動かして PWA 化を進める工程に入ります。
HSP3Dish.jsで作ったアプリをPWA化するには、複数のファイルや手順が必要になります。 そこで今回は、PWA化のためのひな型を用意しました。 このひな型を使って、実際にPWA化を進めてみましょう。
HTMLファイル、マニフェストファイル、Service Worker は、ひな型にあらかじめ含まれています。 あ、後述しますがご自身で作ったPWA化したいHSP3のプログラムと、アプリのアイコンは自分で作っておいてください。
まずは、以下のボタンからひな型のZIPファイルをダウンロードしてください。
＜PWA化のひな型をダウンロード＞ 17KB (2026/01/16)
ダウンロードしたZIPファイルを解凍すると、PWA化に必要な最低限のファイルが含まれています。必要なファイルだけをコピーして使用します。
本記事では、ファイルの一部を手で書き換える必要はありますが、 新しくプログラムを書く作業はありません。 また、特定のライブラリをインストールするといった作業も行いません。
以降では、このひな型を使ったPWA化を、実際の手順に沿って説明していきます。
ひな型の構成を確認
次にひな型の構成の確認を行います。
ダウンロードしたひな型には、PWA化に必要な最低限のファイルがあらかじめ含まれています。ZIPファイルを解凍すると、次のような構成になっています。
/
├ /favicon/
├ readme.txt
├ template.html
├ service-worker-cache_first.js
├ service-worker-network_first.js
└ site.webmanifest
各ファイルの役割を簡単に説明します。
favicon フォルダ
アプリのアイコン画像を配置する空のフォルダです。
実際に使用する際は、ここに自分のアプリ用アイコンを置きます。
template.html
HSP3Dish.jsでHTML5化（アプリ化）するためのテンプレートファイルです。
PWAとして動作させるための各種設定も、あらかじめ組み込まれています。
service-worker-cache_first.js
service-worker-network_first.js
オフライン対応やキャッシュ制御を行うための Service Worker です。
今回のひな型では、ゲーム用途を想定した2種類の実装を用意しています。用途に応じてどちらか一方を使用します。
site.webmanifest
アプリ名やアイコン、表示方法などを定義するマニフェストファイルです。
スマートフォンに「アプリとしてインストール」する際に使われます。
ひな型はコピーするだけでは使用できません。いくつかアプリごとに設定する必要があるため、最低限、次の作業が必要になります。
- サービスワーカーにキャッシュするファイルを指定する
- マニフェストファイルで、アプリ名や表示設定を調整する
- アイコンをアプリ用に加工してフォルダに置く
作業は、用意されたファイルを少しずつ書き換えていく形になります。
template.htmlの導入と基本設定
次に、template.htmlの差し替えて、HTML5 変換後の基本的な設定までを行います。
template.html の配置
template.html は、HSP3 のインストールフォルダ内にある hsp3js フォルダに配置して使用します。
導入にあたっては、既存の template.html を必ずバックアップしてから作業を行ってください。
HSP3.7 の標準的なインストール環境では、配置先は次の場所になります。
C:\hsp37\hsp3js\template.html
用意した template.html をこの場所にコピーし、既存のファイルと入れ替えます。
これで template.html の導入作業は完了です。
HTML5 変換時の動作
template.html を入れ替えた後は、通常通り HSP3Dish ヘルパーを使用して HTML5 変換を行ってください。
特別な操作は必要なく、変換時には自動的に入れ替えた template.html が使用されます。
このテンプレートには、PWA 化に必要な各種設定や、フルスクリーン表示に対応するための処理が、あらかじめ組み込まれています。
※ ezlocal-dish-jsを導入している場合は、出力されるHTMLに修正が行われないように hsp3dish.ini で設定をしておいてください。
修正が必要なポイント
HTML5変換で出力されたhtmlファイル（アプリ本体の html）は、そのままでは汎用設定のままになっています。 アプリごとにいくつかの項目を修正する必要があります。最低限、次の点は必ず確認してください。
１．アプリ名の変更
アプリ名は、次の 2 か所に記述されています。 HTMLファイル内で「アプリの名前」という文字列を検索し、該当する 2 か所を自分のアプリ名に書き換えてください。
- meta タグ内のアプリ名
- ページ上部に表示される h1 タグ
PWA としてインストールした際の表示名にも影響するため、必ず自分のアプリ名に書き換えておきましょう。
２．フルスクリーン関連の設定
画面表示に関する設定は、HTML5変換で出力されたhtmlファイル内の次の定数で制御されています。
JavaScript
const HSP_VIEW_USEFULLSCRN = 2;
const HSP_SCREEN_MODE = 0;
const HSP_ASPECT_RATIO = 16 / 9;
これらの値を変更することで、フルスクリーンの挙動や画面比率を調整できます。 アプリの種類や想定する端末に応じて、必要に応じた数値に変更してください。 各定数の意味や設定例については、近くにコメントで記載している内容を確認してください。
Service Workerの配置と設定
PWA 化では、オフライン対応やファイルの保存管理を行うために Service Worker（という特別なJavaScript）を使用します。 このひな型には、用途の異なる 2 種類の Service Worker が用意されています。
- service-worker-cache_first.js
- service-worker-network_first.js
通常のゲーム用途では、service-worker-cache_first.js を使用します。
本章では、この Cache First 方式を前提に説明します。
どちらの Service Worker を使うか
通常の ゲーム用途では、
service-worker-cache_first.js を使用することをおすすめします。
この方式では、
- 一度取得したファイルを優先的に使用する
- ネットワークが不安定でも、動作が安定しやすい
という特性があります。
ゲームのように「内容が頻繁に変わらず、確実に動いてほしい」アプリに向いています。
一方、service-worker-network_first.js は、
- 常に最新のデータを優先して取得したい
- 通信できる環境での利用が前提
- ニュース表示やランキング取得など、内容が頻繁に更新される
といった用途に向いています。
今回の記事では、ゲーム用途を想定して Cache First 方式を前提に説明します。
作業フォルダの準備
まず、サーバーにアップロードするためのファイルをまとめる作業フォルダを用意します。
この作業フォルダには、HSP3Dish ヘルパーで HTML5 変換を行った際に作成された、 次のファイルを配置してください。
hsp3dish.js
….data
….html
以降の作業では、このフォルダを基準に PWA 化を進めていきます。
Service Worker ファイルの配置
次に、ひな型に含まれている
service-worker-cache_first.js を、この作業フォルダにコピーします。
コピー後、ファイル名を次のように変更してください。
service-worker.js
Service Worker は、HTML 側から指定されたファイル名で読み込まれます。 今回のひな型では、HTML 側の修正を極力行わないようにするため、ファイル名を固定しています。
一般的には Service Worker のファイル名は任意に設定して使用することが出来るものです。
Service Worker の基本設定
次に、service-worker.js をテキストエディタで開きます。
ファイルの先頭に、次のような設定項目があります。
// ----------------------------
// アプリの設定
// ----------------------------
// キャッシュのバージョンを識別する名前
// アプリ更新時には必ず変更してください。
// 例：'アプリ名-YYYYMMDD-rX'
// YYYYMMDDは、年月日。Xは同じ日に更新をする場合に数字を書き換えて使う。
const CACHE_NAME = 'appName-20260101-r0';
// キャッシュしたいリソースのリスト
const urlsToCache = [
'hsp3dish.js',
'appName.data',
'appName.html'
// 必要なリソースをここに追加
];
ここで、最低限修正が必要なのは次の 2 点です。
キャッシュ名（バージョン識別子）の変更
まず、CACHE_NAME を自分のアプリ用に書き換えます。
const CACHE_NAME = 'app-cache-20260110-r0';
この変数で最も重要なのは、過去のバージョンと絶対に重複しない文字列を指定することです。 アプリ名は、重要ではありません。 日付や連番など、重複しない仕組みになっていれば十分です。
この値が変わっているかどうかで、「新しいバージョンのアプリかどうか」が判定されます。
そのため、アプリを更新したときは必ず変更してください。
キャッシュするファイルの指定
次に、urlsToCache を編集します。
const urlsToCache = [
'hsp3dish.js',
'appName.data',
'appName.html'
];
ここには、アプリの動作に必須で、事前に保存しておきたいファイルを指定します。
この Service Worker では、次のような仕組みになっています。
- ここに指定されたファイルは最初に保存（キャッシュ）される
- 次回以降は、ネットワークに接続していなくても使用される
逆に、ここに書かれていないファイルは、毎回ネットワーク上に探しに行きます。
そのため、
- HTML
- JavaScript
- data ファイル
- 画像や音声などの必須リソース
は、忘れずにここへ追加してください。
なお、次のファイルは指定しないでください。
service-worker.js（サービスワーカー）site.webmanifest（マニフェストファイル）
設定後の注意点
Service Worker は、ブラウザに常駐する仕組みです。 ブラウザを再起動しても、Service Worker やキャッシュは消えません。
動作確認中に、CACHE_NAMEを変更したうえでアプリをリロードしても
- 古い内容が表示され続ける
- 更新が反映されない
といった場合は、次の手順で Service Worker を一度削除してください。（Chromeの場合）
- デベロッパーツールを開く
- 「アプリケーション」タブを選択
- 左サイドバーの「ストレージ」を選択
- 「サイトデータを消去」をクリック
この操作で、キャッシュと Service Worker をまとめて削除できます。
Webアプリ マニフェスト（site.webmanifest）の設定
PWAとして動作させるために必要なマニフェストファイル（site.webmanifest）の設定を行います。
まずは「ひな型のダウンロード」章でダウンロードした zip ファイルに入っている site.webmanifest を作業フォルダにコピーしてください。
書き換える項目
マニフェストファイルで編集するのは、次の項目のみです。
name：アプリの正式名称short_name：ホーム画面などで使われる短縮名start_url：アプリ起動時に開くHTMLdescription：アプリの説明文orientation：画面の向き
このほかの設定は変更する必要はありません。 各項目について簡単に説明します。
name
アプリの正式名称を指定します。 インストール画面や設定画面などで表示される正式名称です。
JSON
"name": "アプリの正式名称",
※ 「アプリの正式名称」の部分を、自分のアプリ名に書き換えてください。
short_name
ホーム画面のアイコン下など、表示スペースが限られる場所で使われます。
JSON
"short_name": "アプリ名",
※ 「アプリ名」の部分を、自分のアプリ名の短い名前に書き換えてください。
start_url
アプリ起動時に最初に開かれる HTML ファイルを指定します。 「./」＋「HSP3Dishヘルパーが出力したHTMLファイル名」を指定してください。
JSON
"start_url": "./appName.html"
description
アプリの簡単な説明を書くための項目です。 実際に表示される機会はあまり多くありません。
JSON
"description": "パズル好きのためのパズルゲーム！簡単8本指操作で誰でも手軽に楽しめます。1000京ステージの大ボリューム。インストール不要で今すぐ遊べて、やりこみプレイに最適です。",
- 仕様上の厳密な文字数制限はありません。
- Chrome では、おおむね 300 文字程度まで表示されます。
- Android では、最大で 7 行程度まで表示されます。
- これを超えた部分は、省略されるか表示されない場合があります。
難しく考えず、「どんなアプリか」が分かる 1～2 文を書いておけば十分です。
orientation
アプリの基本となる画面の向きを指定します。
- 横画面アプリ → landscape-primary
- 縦画面アプリ → portrait-primary
"orientation": "landscape-primary",
iPhone（Safari）では、マニフェストの orientation が仕様上サポートされておらず、無視される場合があります。 そのため、この設定だけで画面向きを制御できるとは限りません。
PWA用アイコン画像の作成
PWAとしてアプリをインストールするためには、アプリアイコン用の画像が必要です。 この章では、手持ちの画像を使って、ひな型に対応したアイコン画像を作成する手順を説明します。
作業はとても簡単で、元画像を用意して、画像加工サイトにアップロードするだけです。
用意する元画像
まずは、アイコンの元になる画像ファイルを1つ用意してください。
- 正方形（縦横比 1:1）
- 理想的なサイズは 512px × 512px
（小さくても自動で拡大されるため問題ありません） - 小さなアイコン表示でも判別しやすいよう、シンプルで線が太めのデザインがおすすめ
- 透明背景を使いたい場合は PNG 形式
ロゴ画像や、タイトル画面の一部を切り抜いたものなどで十分です。
アイコン生成サイトを使う
今回は、次のアイコン生成サイトを使用します。
RealFaviconGenerator
https://realfavicongenerator.net/
多くのOSや環境に対応したアイコンを、一括で生成してくれる便利なサービスです。
元になる画像ファイルの準備が面倒なら、このサイトで「Create a logo」ボタンを押すことで簡単なロゴが像を作成することもできます。
アイコンの作成手順
以下の手順でアイコンを作成します。
- RealFaviconGenerator のサイトを開きます。
- 元画像ファイルを、「Drop your favicon image here」と書かれた領域にドラッグ＆ドロップします。
- 各環境での表示例を確認しながら、必要に応じて微調整を行います。
- ページ下部の 「Next」 をクリックします。
- ダウンロードページに切り替わるので、「Download」 ボタンをクリックします。
これで、アイコン一式が zip ファイルとしてダウンロードされます。
作業フォルダへの配置
ダウンロードした zip ファイルを解凍してください。
解凍後に含まれている以下のファイルをすべて、作業フォルダ内の favicon フォルダにコピーします。
- PNG
- ICO
- SVG
ひな型の HTML や site.webmanifest は、
これらのアイコンファイルを参照する設定があらかじめ組み込まれているため、
追加で設定を書き換える必要はありません。
公開前の最終チェックと動作確認
ここまでで、PWAとして動作するための最低限のファイルは揃いました。 この章では、作業フォルダの内容を実際にサーバーへ配置し、PWAとして問題なく動作するかを確認する手順をまとめます。
作業フォルダの構成を再確認する
作業フォルダに配置したファイル構成をもう一度確認しておきます。 この段階では、以下のような構成になっているはずです。
/
|-- /作業フォルダ/
| |-- appName.data
| |-- appName.html
| |-- hsp3dish.js
| |-- service-worker.js
| |-- site.webmanifest
| |-- /favicon/
| |-- apple-touch-icon.png
| |-- favicon.ico
| |-- favicon.svg
| |-- favicon-96x96.png
| |-- web-app-manifest-192x192.png
| |-- web-app-manifest-512x512.png
※「appName」の部分は、HSP3Dishヘルパーが出力したファイル名です。
作業フォルダをサーバーにアップロードする
構成に問題がなければ、作業フォルダの中身をそのままサーバーへアップロードします。
注意点として、PWAは HTTPS 環境で配信されている必要があります。 ローカル環境では動いていたのに、サーバーに置いたらPWAとして認識されない場合、HTTPSが原因であることはよくあります。
また、作業フォルダのファイルは、必ずサーバーに作成したフォルダにおいてください。 他のアプリが混在するフォルダ内や、ルートフォルダにおいてはいけません。正しく動作しなくなります。
アップロード後は、アップロードしたURLにブラウザでアクセスできることを確認してください。
PWABuilder でチェックする
次に、PWABuilder（https://www.pwabuilder.com/）を使って、PWAとしての状態を確認します。手順は次の通りです。
- PWABuilderにアクセスする
- 公開したサイトのURLを入力する
- 「Start」ボタンを押す
これだけで、PWAとしてのチェック結果が表示されます。
最低限確認しておきたいポイント
すべてを完璧にする必要はありませんが、最低限以下の点は確認してください。 必須（Required）に問題が出ている場合は、内容を一つずつ確認し、必要に応じて修正します。
- 「Package For Stores」ボタンが押せるようになっているか。 押せないようであれば、設定が正しくできていない可能性があります。
- Action ItemsのRequired がゼロになっていることを確認する。 RecommendedやOptionalは、残っていても気にしなくても大丈夫です。
- Manifestは、▼ボタンを押して、Requiredが全てグリーンのチェックマークになっていれば問題ありません。
- Service Workerは+1以上になっているか。正常なら+3になっていると思います。
- このサイトではアイコンが正しく認識されませんが、気にしなくて大丈夫です。
※修正が反映されない場合の対処については、次章で詳しく説明します。
PC・スマホで動作確認する
PWABuilderのチェックが通ったら、実際のブラウザで動作確認を行います。 可能な限り複数の環境で動作確認してください。
- PC（Chrome / Edge など）
アドレスバーの右側にインストールアイコンが表示されるはずです。 - スマートフォン（Android / iOS）
実機が用意できない場合
iPhoneなどの実機を持っていない場合でも、ブラウザ表示を確認できるサービスを使うことで、ある程度の確認が可能です。
代表的なサービスには以下があります。カッコ内は無料プランの制限です。
- BrowserStack（通算30分間無料）
- LambdaTest（1日2分間永久無料）
- browserling（1日あたり3分間を数回まで）
これらを使うことで、異なるOSやブラウザでの表示崩れや挙動をチェックできます。
チェック項目の例
動作確認時は、次のような点を意識して確認するといいと思います。
- ページが正しく表示されるか
- 再読み込み時に問題が起きないか
- オフライン時の挙動（想定どおりか）
インストールとアンインストールを試す
最後に、PWAとしてインストールできるかを確認します。
- ブラウザの「インストール」または「ホーム画面に追加」からインストールしてみる
- インストール後の起動確認
- 表示名やアイコンが正しいか
- アンインストールできるか
アプリ更新の検出と通知について
Cache First方式を採用したPWAでは、一度インストールされたアプリが自動的に最新版へ置き換わるわけではありません。 そのため、アプリに更新があった場合は、更新を正しく検出し、ユーザーに通知する仕組みを用意する必要があります。
この章では、アプリ更新に必要な手順とアプリ更新の検出方法から、更新をユーザーに知らせる流れを説明します。
更新時は CACHE_NAME の変更が必要
アプリのどこかを更新した場合は、必ず Service Worker（service-worker.js）内の CACHE_NAME の変更が必要です。
Service Worker は、CACHE_NAME を基準にキャッシュの有効・無効を判断します。
そのため、CACHE_NAME が前回と同じままの場合、ファイルが変更されていても更新があるとは判断されず、既存のキャッシュがそのまま使われます。
つまり、CACHE_NAME を変更しない限り、アプリは「更新なし」とみなされます。
更新が検出される仕組み
ここで紹介しているひな型を使って作成した場合、次のような流れで、更新の検出からユーザーへの通知までが行われます。
CACHE_NAMEが変更された状態でアプリを開く。- アプリ起動時に Service Worker が動作する。
- 新しい
CACHE_NAMEを持つ Service Worker がインストールされる。 - 既存の Service Worker と差分があると判断される。
- Service Worker が「更新がある」ことを HTML 側へメッセージで送信する。
- HTML 側がそのメッセージを受信する。
- 画面上に「更新を促すボタン」を表示する。
このひな型では、このように動作するよう HTML と Service Worker が作られています。 これにより、ユーザーは以下のような不自然な挙動を体験せずに済みます。
- 知らないうちに画面が切り替わる
- 操作中に突然アプリが再起動する
アプリの更新方法
PWAのアプリ更新は、以下のいずれかのユーザー操作で行われます。
- 更新通知が表示された状態で、アプリをリロードする
- 更新を促すボタンをタップする
これにより、アプリは再読み込みされ、新しいキャッシュを使った最新版のアプリが起動します。
以上の仕組みを理解しておくことで、 「修正したのに反映されない」「更新が分かりにくい」といった PWA 特有のトラブルを防ぐことができます。
解決のヒントの探し方
PWAは、設定や仕組みが複雑なため、ちょっとした違いで動かなくなることがあります。 画面を見ているだけでは原因が分からず、どこから調べればよいか迷う場面も少なくありません。
ここからは、そうしたときに役立つ「解決のヒントの探し方」をまとめています。 細かな実装や解説ではなく、原因を調べるための入口となるポイントを整理することが目的です。
困ったときに、該当しそうな項目を拾い読みし、原因を探す手がかりとして活用してください。
よくあるトラブル（インストール・認識）
症状：インストールボタン（「インストール」「ホーム画面に追加」）が表示されない
確認：HTTPSで配信されているか、マニフェストや Service Worker に文法エラーがないかを確認してください。
localhostに外部からアクセスしている場合は、インストールできません。（例：PCのlocalhostにスマホでアクセスしている。）
症状：PCではインストールできるが、スマホではできない
確認：iOS / Android の対応差が原因の可能性があります。対応ブラウザやマニフェスト項目を調べてみてください。
症状：インストール後も通常のタブ表示と変わらない
確認：実際にインストールされていない可能性があります。ブラウザのアプリ一覧や設定画面で確認してください。
よくあるトラブル（表示・動作）
症状：ページが真っ白になる／一部が表示されない
確認：ファイルのパス指定ミスが疑われます。HTML や Service Worker のキャッシュ対象ファイルを確認してください。
症状：初回表示はできるが、再読み込みで表示が崩れる
確認：必要なファイルがキャッシュ対象に含まれていない可能性があります。Service Worker の設定を確認してください。
症状：オフライン時にエラー画面になる
確認：Service Worker が正しく動作していない可能性があります。登録状況やエラーを確認してください。
よくあるトラブル（更新が反映されない）
症状：修正したのに内容が変わらない
確認：Service Worker の CACHE_NAME を変更しているか確認してください。
症状：更新通知が表示されない
確認：新しい Service Worker がサーバーに正しくアップロードされているか確認してください。
症状：更新後に古い挙動が一部残る
確認：古いキャッシュが残っている可能性があります。Service Worker の更新後にリロードを試してください。
よくあるトラブル（環境依存・端末差）
症状：Android では動くが、iPhone では挙動が異なる
確認：iOS の PWA 制限が原因の可能性があります。Safari の対応状況を調べてみてください。
症状：特定のブラウザだけで問題が発生する
確認：ブラウザごとの仕様差が原因と考えられます。対応状況を個別に確認してください。
症状：実機がなく動作確認ができない
確認：検証サービス（BrowserStack / LambdaTest など）の利用を検討してください。テストしたい機種の実機を持っている友人を作成する方法も検討してください。
開発中に役立つブラウザの確認方法
PWAのトラブルは、画面だけを見ていても原因が分からないことが多くあります。 その場合、ブラウザの開発者ツールを開くことで、エラーや異常の手がかりを確認できます。
この章では、 「どこを開けば、エラーや状態を確認できるか」 という入口だけを紹介します。 各画面の詳しい見方や操作方法については、必要に応じて調べてください。
Chrome DevTools を開く
PWAの確認は、まず PC版 Chrome で行うのが最も確実です。
- ページ上で右クリック →「検証」
- 右上の「…」ボタンをクリック→その他ツール→デベロッパーツール
これで Chrome DevTools（開発者ツール）が開きます。
※ HSP3Dish.js を使用している場合、F12キーでは開発者ツールが開かないようになっています。
JavaScript のエラーを確認する場所
Console タブを開きます。
JavaScript のエラーは、ここに表示されます。
HSP3Dish.jsを使用すると、正常に動いていてもエラーや警告がいくつか出てくるものです。
いつもと違うエラーが出ていないかをチェックしてください。
マニフェストの状態を確認する場所
Application タブ → Manifest
マニフェストに致命的なエラーが出ていないかを確認します。 ひな型を使っていても、警告がいくつか残っていますが、問題ありません。
Service Worker の状態を確認する場所
Application タブ → Service Workers
サービスワーカーに異常がないか確認できます。
キャッシュの状態を確認する場所
Application タブ → Cache Storage の▼を展開します。
CACHE_NAMEやキャッシュが確認できます。
すべてを理解する必要はありません
開発者ツールには多くの情報が表示されますが、すべてを理解する必要はありません。
- エラーが出ているか
- 何も表示されていないか
- 想定したものが存在するか
といった点だけ分かれば十分です。
表示されたエラー内容や用語は、そのまま検索すれば、詳しく解説している記事や情報にたどり着けます。
まとめ
PWA 開発で困ったときは、まず AI に聞いてみてください。 エラー文や挙動をそのまま投げるだけでも、多くのヒントが得られます。
それでも分からなければ、ググって Qiita などの個人解説記事を探してみましょう。 状況が近い事例が、意外とそのまま解決策になることもあります。
行き詰まったときは、公式ドキュメントに立ち返るのも有効です。 また、使っているひな型やサンプルが常に正しいとは限りません。 「ひな型が間違っている可能性」も疑ってみてください。
原因を探す入口は紹介しました。 あとは落ち着いて、最初からやり直しながら確認してみてください。