サイト制作の合同会社ジリキ

QRコード作成ページをPWA対応にしました

弊社アプリケーション「QRさん」がPWA対応完了いたしました。
こちら→ https://app.jiriki.co.jp/qr/

PWA対応は実に簡単で以下の2種のファイルを準備し、
呼び出しするだけです。

manifest.json
service-worker.js (名前はsw.jsとかでも可能です)

今回のマニフェストファイルは以下のように記載しました。

{
    "short_name": "QRさん",
    "name": "QRコードクリエイトアプリ",
    "display": "standalone",
    "start_url": "index.html",
    "background_color": "#333",
    "theme_color": "#fff",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

service-worker.js はテンプレート通りといった感じです。

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

self.addEventListener('fetch', function(event) {});

PWA対応となったことで、AndroidChromeブラウザなどから、
ホーム画面に追加するとアプリケーションのように振る舞います。

皆様も是非お試しください。