PWA

Progressive Web Apps（プログレッシブ　ウェブ　アプリ)

//manifest.json の作成
{
    "name"              : "ワインコレクション共有Webサービス「Wine File」",
    "short_name"        : "Wine File",
    "description"       : "ワインコレクション共有Webサービス「Wine File」",
    "start_url"         : "https://winefile.net/",
    "display"           : "standalone",
    "background_color"  : "#fefefe",
    "theme_color"       : "#b33e5c",
    "icons": [{
        "src"           : "/icon-192.png",
        "sizes"         : "192x192",
        "type"          : "image/png"
      }, {
        "src"           : "/icon-256.png",
        "sizes"         : "256x256",
        "type"          : "image/png"
    }]
}

//headタグで manifest.json を読み込み
link rel="manifest" href="/manifest.json">

//Service Worker(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) {});

//Service Workerの登録
script>
if('serviceWorker' in navigator){
	navigator.serviceWorker.register('/service-worker.js').then(function(){
		console.log("Service Worker is registered!!");
	});
}
/script>

//開発者ツールでPWA化したか確認
Application タブを開き、Manifest