PWAの基本コード

カテゴリー：JavaScript

記事作成日：2024.01.31

2016年2017年に流行ったPWAを今一度復習してみました。

基本のコードは以下の通り<br>
最低限のテストしかしていないので問題あるかも知れない。

## index.html
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
	.standalone {
		display: none;
	}
	.notStandalone {
		display: block;
	}
}
body.standaloneMode {
	.standalone {
		display: block;
	}
	.notStandalone {
		display: none;
	}
}
</style>
<link rel="manifest" href="./manifest.webmanifest">
</head>
<body>
<h1>サンプルPWAアプリケーション</h1>
<section class="notStandalone">
	<div id="addHome">ホームに追加</div>
</section>
<section class="standalone">
	<div>ホームに追加されています</div>
</section>
<script defer src="./js/register_service_worker.js"></script>
<script defer src="./js/addhome.js"></script>
<script defer src="./js/standalone.js"></script>
</body>
</html>

```

## offline.html
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>offline</title>
</head>
<body>
<p>このページを表示するにはインターネット接続が必要です。</p>
<script defer src="./js/register_service_worker.js"></script>
</body>
</html>
```

## manifest.webmanifest
```javascript
{
	"name":				"サンプルPWAアプリケーション",
	"short_name":		"PWAアプリ",
	"description":		"PWAアプリケーションの最小構成",
	"id":				"/",
	"start_url":		"/",
	"display":			"standalone",
	"orientation":		"any",
	"background_color":	"#778",
	"theme_color":		"#778",
	"orientation":		"any",
	"icons": [
		{
			"src": "./image/favicon.svg",
			"sizes": "48x48 72x72 96x96 128x128 256x256",
			"type": "image/svg+xml",
			"purpose": "any"
		}
	]
}
```

## js/register_service_worker.js
```javascript
/**
 * サービスワーカー登録
 *
 * ao-system, Inc.
 */
(() => {
	'use strict';
	if ('serviceWorker' in navigator) {
		navigator.serviceWorker
			.register('./service-worker.js')
			.then(registration => {		// 登録成功
				registration.onupdatefound = () => {
					registration.update();	//更新されていたら再読み込み
				}
			})
			.catch(err => {	// 登録失敗
			});
	}
})();
```

## js/service-worker.js
```javascript
/**
 * PWA設定
 *
 * ao-system, Inc.
 *
 */
(() => {
	'use strict';
	new class {
		#version = '1.0.0';
		#cache = this.#version + '::PWAsite';
		#offlineURL = './offline.html';
		#installFilesEssential = [	//キャッシュが不可欠
			'./index.html',
			'./image/favicon.svg',
			'./manifest.webmanifest',
			'./js/register_service_worker.js',
			'./js/standalone.js',
			'./offline.html',
		];
		#installFilesDesirable = [	//キャッシュが望ましい
		];
		#imgExtensions = ['.webp','.svg','.png','.jpg','.gif'];
		#offlineSvg = [
			'<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">',
			'<title>offline</title>',
			'<path d="M0 0h400v300H0z" fill="#eee"/>',
			'<text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text>',
			'</svg>',
		].join('');
		//
		constructor() {
			this.#init();
		}
		#init() {
			this.#applicationInstallation();
			this.#applicationActivated();
			this.#applicationFetchNetworkData();
		}
		//アプリケーションのインストール
		#applicationInstallation() {
			self.addEventListener('install', event => {
				//console.log('service worker: install');
				//コアファイルをキャッシュする
				event.waitUntil(
					this.#installStaticFiles().then(() => self.skipWaiting())
				);
			});
		}
		//静的アセットをインストールする
		#installStaticFiles() {
			return caches.open(this.#cache)
				.then(cache => {
					cache.addAll(this.#installFilesDesirable);
					return cache.addAll(this.#installFilesEssential);
				});
		}
		//アプリケーションがアクティブ化された
		#applicationActivated() {
			self.addEventListener('activate', event => {
				//console.log('service worker: activate');
				// delete old caches
				event.waitUntil(
					this.#clearOldCaches().then(() => self.clients.claim())
				);
			});
		}
		//古いキャッシュをクリアする
		#clearOldCaches() {
			return caches.keys()
				.then(keylist => {
					return Promise.all(
						keylist
							.filter(key => key !== this.#cache)
							.map(key => caches.delete(key))
					);
				});
		}
		//アプリケーションがネットワークデータを取得する
		#applicationFetchNetworkData() {
			self.addEventListener('fetch', event => {
				//非GETリクエストを放棄する
				if (event.request.method !== 'GET') {
					return;
				}
				let url = event.request.url;
				event.respondWith(
					caches.open(this.#cache).then(cache => {
						return cache.match(event.request).then(response => {
							if (response) {
								//キャッシュされたファイルを返す
								//console.log('cache fetch: ' + url);
								return response;
							}
							//ネットワークリクエストを行う
							return fetch(event.request)
								.then(newreq => {
									//console.log('network fetch: ' + url);
									if (newreq.ok) {
										cache.put(event.request, newreq.clone());
									}
									return newreq;
								})
								//アプリはオフライン
								.catch(() => this.#offlineAsset(url));
						});
					})
				);
			});
		}
		//オフラインアセットを返す
		#offlineAsset(url) {
			const isImage = this.#imgExtensions.reduce((ret, ext) => ret || url.endsWith(ext), false);
			if (isImage) {
				//画像を返す
				return new Response(this.#offlineSvg,{headers:{'Content-Type':'image/svg+xml','Cache-Control':'no-store'}});
			} else {
				//ページを返す
				return caches.match(this.#offlineURL);
			}
		}
	}
})();
```

## js/addhome.js
```javascript
/**
 * ホームに追加ボタン
 *
 * @author ao-system, Inc.
 *
 */
(() => {
	'use strict';
	new class {
		#addHome = document.getElementById('addHome');
		constructor() {
			this.#init();
		}
		#init() {
			window.addEventListener('beforeinstallprompt',(e) => {
				e.preventDefault();		//バナー表示をキャンセル
				this.#addHome.promptEvent = e;		//イベント保持
				this.#addHome.style.display = 'block';	//ホームに追加ボタン表示
				return false;
			});
			//インストールダイアログの表示処理
			this.#addHome.addEventListener('click',() => {
				if (this.#addHome.promptEvent) {
					this.#addHome.promptEvent.prompt();	//ダイアログ表示
					this.#addHome.promptEvent.userChoice.then((choice) => {
						this.#addHome.style.display = 'none';
						this.#addHome.promptEvent = null;	//無効にする
					});
				}
			});
		}
	}
})();
```

## js/standalone.js
```javascript
/**
 * standalone mode の判定
 *
 * @author ao-system, Inc.
 */
(() => {
	'use strict';
	new class {
		constructor() {
			this.#init();
		}
		#init() {
			if (this.#isPwaInstalled()) {
				document.body.classList.add('standaloneMode');
			} else {
				document.body.classList.remove('standaloneMode');
			}
		}
		#isPwaInstalled() {
			return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
		}
	}
})();
```

CONTENTS

その他

PDF 一括でモバイル最適化を行う

その他

見開きPDFを単ページの連結に変更する手順

Android

Unresolved reference: constraintlayout

PHP

CSSや画像ファイル更新時にブラウザキャッシュを取得させない

PHP

静的ウェブサイトをphpで開発して,納品時に静的htmlへと変換する。

ウェブサーバー