【実践】PWAを使ってサイトをアプリ化する方法

2023.07.01

#フロント技術

PWAを使用したサイトの疑似的なアプリ化を行ったので、メモとして残しておく。

下記サイトにて実装済みなので、Android端末を持っているユーザーはぜひ確認してもらいたい。

「https://corporate.t-creative-works.com/」

Table of Contents

PWAとは
PWAのデメリット
PWAによるサイトのアプリ化方法
index.php、htmlを準備
manifest.json
sw.js
PWAによるアプリ化・まとめ

PWAとは

PWAはWebサイトをアプリのように表示できるようにする技法のことだが、他にも下記のようなメリットがある。

①Android端末でサイトをアプリ化
②Google Play Storeでも公開、ダウンロードできる
③プッシュ通知が送れる

などなど、自社のサイトでさらにユーザーエクスペリエンスを向上させることも可能なのだ。

PWAのデメリット

そんなPWAのデメリットとしては、下記の問題がネックになってくる。

①ssl化されていないサイト（httpsではなくhttp）では表示できない
②iPhoneには非対応
③プッシュ通知までいくと、それなりに複雑になってくる

上記にもある通り、ssl化されてなければPWAの反映を確認できないので、ローカル環境で検証することは難しいと考えてもらっていいだろう。

PWAによるサイトのアプリ化方法

そして今回はPWAを用いてサイトをアプリ化するところまで実装してみる。store公開やプッシュ通知はまた別の機会に解説したいと思う。

index.php、htmlを準備

まずはルート直下にindex.html、もしくはphpファイルを用意する

html側にはheadタグ内にmanifest.jsonのリンクを加え、bodyを閉じる直前にserviceWorkerの登録を行う。

<head>
    <link rel="manifest" href="manifest.json">
</head>

～～～以下省略～～～

        <script>
            // ServiceWorker登録：https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('sw.js').then(function(registration) {
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                }).catch(function(err) {
                    console.log('ServiceWorker registration failed: ', err);
                });
            }
        </script>
</body>

manifest.json

manifest.jsonファイルを同階層に用意し、名前やスタートURLを登録する。

画像だけは必ず登録しておく必要があるので、注意点が必要だ。

{
  "short_name": "TCW",
	"name": "TCW",
	"display": "standalone",
	"start_url": "index.php",
	"icons": [
		{
			"src": "images/app-icon-192.png",
			"sizes": "192x192",
			"type": "image/png"
		}
	]
}

“display”はアプリ化した際に上部を表示するか否かなどの設定が行えるが、今回はstandaloneを選択。

すると下記左画像のようにサイトを表示したときにandroidの表示が変わるのだ。

この辺りは色々とオプションで変えられるので、自分でも試してもらいたい。

※ちなみに、Google Play Storeに登録する際にTWAという技法でサイトをapkファイルに変換するのだが、その際には下記のような注意が必要だ。

①Storeに公開するために行う「TWA化」の時にもdisplayオプションを尋ねられる
②別のオプションを選択してしまうと上記画像（左）のようにStoreからダウンロードした際には、表示が異なってしまう。
③displayはmanifest.jsonと合わせておくのがオススメ

sw.js

最後はsw.jsを同階層に用意する。

// キャッシュ名とキャッシュファイルの指定
var CACHE_NAME = 'pwa-sample-caches';
var urlsToCache = [
    "/",
    "index.php",
    "header.php",
    "footer.php",
    "works/detail01.php",
    "works/detail02.php",
    "works/detail03.php",
    "works/detail04.php",
    "works/detail-banner.php",
    "works/index.php",
    "service/index.php",
    "css/style.css",
    "css/style.scss"
];

// インストール処理
self.addEventListener('install', function(event) {
	event.waitUntil(
		caches
			.open(CACHE_NAME)
			.then(function(cache) {
				return cache.addAll(urlsToCache);
			})
	);
});

// リソースフェッチ時のキャッシュロード処理
self.addEventListener('fetch', function(event) {
	event.respondWith(
		caches
			.match(event.request)
			.then(function(response) {
				return response ? response : fetch(event.request);
			})
	);
});

まず最初にキャッシュさせるファイルを一つ一つ登録しておく必要がある。基本的にsw.jsはルートに置かれるので、相対パスでオッケー。

次にインストール処理を行い、キャッシュのロード処理も行う。

この状態でssl化したドメインにファイル一式をアップすればPWAによる疑似的なアプリ化が完了する。