[教學] 將網頁變成Progressive Web Application (PWA) ，漸進式的網頁應用程式

{
　"short_name": "CKedit!",
　"name": "CKedit!",
　"icons": [{
　　"src":"icons/192.png",
　　"sizes": "192×192",
　　"type": "image/png"
　　}],
　"start_url": "http://127.0.0.1:8887/",
　"background_color": "#000",
　"theme_color": "#536878",
　"display": "standalone"
}

self.addEventListener('install', function(event) {
  self.skipWaiting();
  
  var offlinePage = new Request('offline.html');
  event.waitUntil(
  fetch(offlinePage).then(function(response) {
    return caches.open('offline2').then(function(cache) {
      return cache.put(offlinePage, response);
    });
  }));
}); self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function(error) {
        return caches.open('offline2').then(function(cache) {
          return cache.match('offline.html');
      });
    }));
}); self.addEventListener('refreshOffline', function(response) {
  return caches.open('offline2').then(function(cache) {
    return cache.put(offlinePage, response);
  });
}); self.addEventListener('push', function (event) {
  var data = event.data.json();   var opts = {
    body: data.body,
    icon: data.icon,
    data: {
      url: data.url
    }
  };
  event.waitUntil(self.registration.showNotification(data.title, opts));
}); self.addEventListener('notificationclick', function(event) {
  var data = event.notification.data;   event.notification.close();   event.waitUntil(
    clients.openWindow(data.url)
  );
});