最小構成のPWAを構築するには？

WEB制作
最小構成のPWAを構築するには？

最小構成でPWAを実装するための各種設定です。

目次

HTML

manifest.jsonの読み込み

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

iOSが完全にPWAに対応していないので、iOS用の設定が必要です。

<meta name="apple-mobile-web-app-capable" content="yes">
 
<link rel="apple-touch-icon" href="/static/img/icons/icon-180x180.png" sizes="180x180">
<link rel="apple-touch-icon" href="/static/img/icons/icon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/static/img/icons/icon-512x512.png" sizes="512x512">

Service Workerを読み込む設定。

<script>
if('serviceWorker' in navigator){
  navigator.serviceWorker.register('/sw.js').then(function(){ console.log('Service Worker Registered'); });
}
</script>

manifest.json

manifest.jsonにアプリ名などを設定します。

{
  "name": "Application",
  "short_name": "App",
  "background_color": "#fff",
  "icons": [
    {
      "src": "/static/img/icons/icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "scope": "/",
  "start_url": "/?utm_source=homescreen",
  "display": "standalone"
}

ServiceWorker

特に何もしないServiceWorker

// sw.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});
 
self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});
 
self.addEventListener('fetch', function(event) {});

アイコンの生成

アイコンは、以下のツールのいずれかを使用することで作成できます。