【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（２）とりあえずPWA化するためのmagnifest.jsonとserviceworker

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

{
    "name": "虹色ミツバチ-32877",
    "short_name": "32877",
    "description": "freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS",
    "start_url": "/?utm_source=homescreen&utm_medium=pwa",
    "display": "standalone",
    "lang": "ja",
    "dir": "auto",
    "orientation": "any",
    "theme_color": "#bcb782",
    "background_color": "#fffce0",
    "icons": [
        {
            "src": "/pwa_192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/pwa_512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "gcm_sender_id": "103953800507"
}

const VERSION = "1";
const ORIGIN = location.protocol + '//' + location.hostname;

const STATIC_CACHE_KEY = 'static-' + VERSION;
const STATIC_FILES = [
    ORIGIN + '/',
    ORIGIN + '/images/logo.png',
    ORIGIN + '/css/bootstrap.min.css',
    ORIGIN + '/css/bootstrap-reboot.min.css',
    ORIGIN + '/css/common.css',
    ORIGIN + '/css/default.css',
    ORIGIN + '/js/jquery.js',
    ORIGIN + '/js/common.js',
];
const CACHE_KEYS = [
    STATIC_CACHE_KEY
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(STATIC_CACHE_KEY).then(cache => {
            return Promise.all(
                STATIC_FILES.map(url => {
                    return fetch(new Request(url, { cache: 'no-cache', mode: 'no-cors' })).then(response => {
                    return cache.put(url, response);
                    });
                })
            );
        })
    );
});

self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return cacheNames.filter((cacheName) => {
                // STATIC_CACHE_KEYではないキャッシュを探す
                return cacheName !== STATIC_CACHE_KEY;
            });
            }).then((cachesToDelete) => {
            return Promise.all(cachesToDelete.map((cacheName) => {
                // いらないキャッシュを削除する
                return caches.delete(cacheName);
            }));
        })
    );
});

self.addEventListener('fetch', event => {
    // POSTの場合はキャッシュを使用しない
    if ('POST' === event.request.method) {
        return;
    }

    event.respondWith(
        caches.match(event.request)
        .then((response) => {
            // キャッシュ内に該当レスポンスがあれば、それを返す
            if (response) {
                return response;
            }

          // 重要：リクエストを clone する。リクエストは Stream なので
          // 一度しか処理できない。ここではキャッシュ用、fetch 用と2回
          // 必要なので、リクエストは clone しないといけない
            let fetchRequest = event.request.clone();

            return fetch(fetchRequest)
            .then((response) => {
                if (!response || response.status !== 200 || response.type !== 'basic') {
                    // キャッシュする必要のないタイプのレスポンスならそのまま返す
                    return response;
                }

                // 重要：レスポンスを clone する。レスポンスは Stream で
                // ブラウザ用とキャッシュ用の2回必要。なので clone して
                // 2つの Stream があるようにする
                let responseToCache = response.clone();

                caches.open(STATIC_CACHE_KEY)
                .then((cache) => {
                    cache.put(event.request, responseToCache);
                });

                return response;
            });
        })
    );
});

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/serviceworker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}
</script>

    // 管理画面はキャッシュを使用しない
    if (/\/admin|\/login|\/user/.test(event.request.url)) {
        return;
    }

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6a5f80"/>
<meta name="apple-mobile-web-app-title" content="32877">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="/pwa_512.png" sizes="512x512">
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/serviceworker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}
</script>