デザイナー、Web制作者もできるSvelte入門

■第５話：SvelteのPWA化

（最終更新日：2023.04.09）

「Webサイトをスマホで見やすく！」

プログレッシブウェブアプリ（PWA）は、Webサイトをネイティブアプリのようにインストールする技術だ。 これにより、アドレスバーやその他の表示を省略し、スマートフォンで見やすい画面で操作できるようになる。 今回は、SvelteKitを使用した際のPWA化方法について説明する。

１.PWAについて

近年、PWA（プログレッシブウェブアプリ）という、Webサイトをネイティブアプリのようにインストールする技術が普及している。 スマートフォンのアプリボタンから簡単に起動でき、メニューバーやアドレスバーを省略して画面を広く使えるのが特長だ。 ブックマークしたサイトをネイティブアプリとして動かすようなイメージで理解すると良いだろう。

PWA化はSvelteやReactなどのWebフレームワークに限らず、手順を踏めば基本的にどんなサイトでもアプリ化できる。 ユーザーは2回目にサイトを訪れる際にPWAのインストールを促され、インストールして利用することができる。

２.npmでインストールする方法

「npm i @vite-pwa/sveltekit -D 」でインストールして、SvelteKitのvite.config.tsに下記のように記述すれば、 使うことができるはずなのだが、2023年2月現在では何故か上手く動かない。 今後、症状は改善される可能性があるが、今動く方法を次の項で説明する。

３.手動でインストールする方法

手動でのインストール方法はSvelteに限らず利用でき、確実に動作させることができる。 まず、manifest.jsonを用意することが必要だ。manifest.jsonには、アプリ名、アイコンのパス、画像サイズなどを記述する。 さらに、serviceworker.jsファイルも用意する。 serviceworker.jsはキャッシュ名以外は定型的なので、キャッシュ名だけ個別に変更することができる。

次に、SvelteKitの場合、app.htmlで2つのファイルの読み込みを指定する。 manifest.jsonはlinkタグで読み込み、serviceworker.jsは以下のJavaScriptの記述を使って読み込む。 ここは特に変更する必要はないので、そのままコピーして使用することができる。 manifest.jsonとserviceworker.jsはここでダウンロードできるようになっている。 manifest.jsonとserviceworker.jsはここでダウンロードできるようにしておく。

４.インストールできない場合の注意点

上記の作業を行ってもインストールボタンが表示されない場合、確認すべき箇所がいくつかある。 筆者が実際に行ってつまづいた点は、アイコンのリンク切れと、192px×192px以外のアイコンを用意してしまったことだった。 上手く動かない場合は、まずブラウザの開発者ツールでエラーを確認し、その後以下の項目をチェックすることが重要だ。

1. https化されていない（localhostはhttpでもOK）
2. iconのサイズが192px×192pxになっていない
3. manifest.json、serviceworker.js、各種ファイルのリンクが切れている
4. iconのリンクで切れているものがある

５.まとめ

今回は、SvelteKitで作成したサイトのPWA化について説明した。 PWA化は、別途ネイティブアプリを作成するよりもかなり簡単だ。 通常のWebサイトとは異なり、ユーザーに対してプッシュ通知を行うことも可能なので、ぜひ一度試してみることをおすすめする。

▼参考図書、サイト

   SvelteKit 1.0で、PWA追加　Zenn
   PWAで「ホーム画面に追加」が表示されない時に確認する事　文系プログラマによるTIPSブログ
   @vite-pwa/sveltekit (ts)　npm