【IT】SvelteKitのアプリをPWA化の対応ついて（第３回目：動作確認（ローカル、ディプロイ）編）

T A｜ITインフラ／写真と言葉／英語童話

2025年8月1日 07:41

皆さま
こんにちは

本日は、作成したWebアプリをPWA対応します。

今回の環境は、
PC：MacBook Air（M1)
フレームワーク：SvelteKit V5

本記事は、動作確認（ローカル、ディプロイ）編となります。

・第１回目：事前準備編

・第２回目：SvelteKitの設定編

４. 動作確認（ローカル）

ａ. ビルド

ビルドを実施してエラーがないことを確認します。
※「Using @sveltejs/adapter-auto Could not detect a supported production environment.」と出ますが、今回の場合は問題はありません。
これはあくまで「このままでは本番デプロイ先に最適化できませんよ」という注意喚起です。

$ npm run build

> myocor-pwa@0.0.1 build
> vite build

vite v7.0.6 building SSR bundle for production...
✓ 167 modules transformed.
vite v7.0.6 building for production...
✓ 144 modules transformed.
.svelte-kit/output/client/_app/version.json                        0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json
・
・
.svelte-kit/output/server/index.js                                    106.82 kB
✓ built in 1.33s

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://svelte.dev/docs/kit/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ donepublicフォルダーが作成されてファイルが出力されていることを確認します。

b. ローカルブラウザにて確認

previewにてローカルブラウザーの開発ツールで確認します。

「Not found: /.well-known/appspecific/com.chrome.devtools.json」
・このファイルは Google Chrome が特定の拡張機能・デバッグ用途で探しているもので、このアプリにこのファイルがないことは正常な状態です。
・ユーザーに見えるエラーではなく、PWAの機能に支障はありません。

$ npm run preview -- --host

> myocor-pwa@0.0.1 preview
> vite preview --host

  ➜  Local:   http://localhost:4173/
  ➜  Network: http://192.168.xx.aaa:4173/
  ➜  press h + enter to show help
Not found: /.well-known/appspecific/com.chrome.devtools.json

マニフェストがエラー無く表示されているか確認します。
開発者ツールの「アプリケーション」ー「マニフェスト」を選択します。

Service worksが表示されていることを確認します。開発者ツールの「アプリケーション」ー「Service works」を選択します。
以下のように認識していることを確認します。

※２つ出ている警告「The resource http://localhost:4173/_app/immutable/assets/xxxxx.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.」ですが、リロードで消えることと動作に影響が少ないと
思われますので今回は、対応は見送ります。
（本番環境でも出ます）

５．動作確認（ディプロイ）

a. GitHutへアップ

GitHutへログインしてリポジトリを作成します。
Privateレポジトリで問題ありません。

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:xxxxxxxx/appname-pwa-v5.git
$ git push -u origin main

b. ホスティング先へディプロイ

Vercel / Netlify / Cloudflare Pages / Renderなどありますが、
今回は、Vercelを使用します。

Vercelの管理画面より、先ほどのレポジトリを選択し、「Import」を押してプロジェクトの登録します。

次に「Deploy」を押して実施します。

以下のような画面が出てきたら完了です。

c. 動作確認（外部からPCで）

PCでChomeからアプリを開き、開発者ツールの「アプリケーション」ー「マニフェスト」を選択します。マニフェストにエラーが無いことを確認します。

２つ出ている警告「The resource http://localhost:4173/_app/immutable/assets/xxxxx.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.」ですが、リロードで消えること確認します。（初回は出る）

d. 動作確認（外部からスマホで）：スマホ画面へアイコン作成

Domainsに記載のURLをスマホからアクセスします。
（Safariにてアクセスしてください）
画面したの共有ボタンを押します。

「ホーム画面に追加」をクリックします。

任意の名前を入れて「追加」をしてアイコンを作成します。

スマホのアイコンからアプリが起動できれば完了です。

e. Androidの場合の確認

Androidの実機がありませんのでPCのChomeの開発者モードから
Picel7を選択して擬似的に確認します。

アプリ下部に「このアプリをインストール」と出ていて
インストールできれば正常です。

※アプリのアンインストール

インストールするとChomeアプリとして登録されるため、
アンインストールは、chrome://apps/を開いて
対象アプリを右クリック→アンインストールを選択ください。

「Chomeからこのアプリのデータを削除する」にチェックを入れてアンインストールください。

では