PWAに必要な最小構成(環境・ファイル・ソース)
はじめに
背景
PWAに関する情報をざっと検索すると、新旧/正誤が点在しており、やや不便を感じたため、個人的にまとめました。
目的
この記事は、「PWAに必要な最小限の構成」を記載しております。
PWA(Progressive Web Apps)とは？
PWAとは、「ウェブアプリをネイティブアプリのように動かすフロントエンド技術」です。
スマートフォンやPCからアクセスすると、下記のイメージのようにインストールすることが可能です。インストール後は、ネイティブアプリのように利用することができます。
スマートフォン
PC
必要な環境
HTTPSに対応したウェブサーバー
HTTPSに対応したウェブサーバーが必要です。
※PWAはセキュリティ上の理由から、HTTPS接続を強制します。
PWAに対応したウェブブラウザ
PWAに対応したウェブブラウザ(Google Chrome、Firefox、Microsoft Edgeなど)が必要です。
必要なファイル・ソース
Web App Manifest(マニフェストファイル)
アプリ名、アイコン、起動時の画面など、アプリとしての振る舞いを定義するjsonファイル[1]。
ファイル名は一般的に、site.webmanifestもしくはmanifest.jsonが利用されています。
{
"name": "PWAサンプル",
"short_name": "PWAサンプル",
"display": "standalone",
"background_color": "#ffffff",
"start_url": "./index.html",
"icons": [
{
"src": "./assets/img/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./assets/img/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
マニフェスト属性について
下記の属性は「ホーム画面に追加 (A2HS: Add to Home Screen)」[2]にあたって必須の属性となります。
| 属性 | 内容 |
|---|---|
| name | アプリの名称。 |
| short_name | アプリの短縮名。nameが長くて表示できない場合に使用される。 |
| display | アプリの表示方法(見せ方)。fullscreen,standalone,minimal-ui,browserから選択。 |
| background_color | スプラッシュ画面等、アプリのコンテキストで使用する背景色。 |
| start_url | アプリが起動したときに最初に読み込まれる(読み込ませる)パス。 |
| icons | アプリのアイコンとして機能させる画像。Chromeの場合、512x512に加えて192x192も必須。 |
Service Worker(サービスワーカー)
キャッシュ管理やオフライン機能を実装するためのJavaScriptファイル[3]。
サイトのリソースをキャッシュし、オフライン時でもアクセスできるようにします。
var CACHE_NAME = 'pwa-sample';
var urlsToCache = ['../../index.html', '../js/main.js', '../css/main.css'];
// インストール処理
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);
})
);
});
HTMLファイル
マニフェストファイルとサービスワーカーを読み込むためのリンク(またはスクリプト)を含むHTMLファイル。
アプリが起動したときに最初に読み込まれる(読み込ませる)ファイルとなります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="./assets/img/favicon.ico" sizes="48x48">
<link rel="icon" href="./assets/img/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
<link rel="manifest" href="./site.webmanifest">
<title>PWA Sample</title>
<link rel="stylesheet" href="./assets/css/main.css">
<script src="./assets/js/main.js"></script>
</head>
<body>
<h1>PWAサンプル</h1>
<input type="button" value="ボタン" onclick="msg()" class="btn" id="msgBtn">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register('./assets/js/sw.js');
});
}
</script>
</body>
</html>
実装例
非常にシンプルですが、GitHub Pagesを利用した実装例となります。
まとめ
最低限必要な必須ファイルをピックアップすると下記となります。
※ディレクトリ構造やファイル名は任意です。
.
├── assets
│ ├── img
│ │ └── android-chrome-192x192.png # [必須]アイコン画像 ※Chromeの場合
│ │ └── android-chrome-512x512.png # [必須]アイコン画像
│ └── js
│ └── sw.js # [必須]Service Worker(サービスワーカー)
├── index.html # [必須]最初に読み込まれるファイル
└── site.webmanifest # [必須]Web App Manifest(マニフェストファイル)
おわりに
Zenn(CLI)で初めて記事を書いてみましたが、構成を考えるのに思ったより時間がかかりました。慣れれば楽しめそうです。
もし誤り等ございましたらコメントにてお知らせください。
Discussion