让你的网站，变身PWA-入门实现篇

上文中，介绍了PWA的基本概念和效果。本文将介绍如何将自己的网站变身成PWA，实现类似的效果。此文中，原理暂不解释，仅实现功能效果。

一、首先你的网站需要支持https

二、新增文件manifest.json

{
  "name": "Your App Name",
  "short_name": "AppName",
  "description": "A description of your app",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/img/zdpd.png",
      "sizes": "192x192",
      "type": "image/png"
    }//可设置更多图标尺寸
  ]
}

例如我的网站是https://test.abc.com，则需要保证https://test.abc.com/manifest.json可以访问到

三、新增文件service-worker.js

// 缓存名称
const CACHE_NAME = 'your-app-cache-v1';

// 需要缓存的静态资源列表
const PRECACHE_URLS = [
    '/',