如何把网站改成PWA _PWA

如何把网站改成PWA ，首先我们要了解知道什么是PWA
1. PWA是什么Progressive Web Apps (下文以“PWAs”代指) 是一个令人兴奋的前端技术的革新。PWAs综合了一系列技术使你的 web app表现得就像是 native mobile app 。相比于纯 web 解决方案和纯 native 解决方案， PWAs对于开发者和用户有以下优点：

你只需要基于开放的 W3C 标准的 web 开发技术来开发一个app 。不需要多客户端开发。
用户可以在安装前就体验你的 app 。
不需要通过 AppStore 下载 app 。app 会自动升级不需要用户升级。
用户会受到‘安装’的提示，点击安装会增加一个图标到用户首屏。
被打开时， PWA 会展示一个有吸引力的闪屏。
chrome 提供了可选选项，可以使 PWA 得到全屏体验。
必要的文件会被本地缓存，因此会比标准的web app 响应更快（也许也会比native app响应快）
安装及其轻量 -- 或许会有几百 kb 的缓存数据。
网站的数据传输必须是 https 连接。
PWAs 可以离线工作，并且在网络恢复时可以同步最新数据。

虽然PWA不是所有浏览器都支持，但是我们不需要担心, 因为pwa是渐进增强的, 你的app仍然可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问，不过其他功能都像原来一样没有影响。综合利弊得失，没有理由不把你的 app 改进为 PWA 。
2. 步骤将你的网站改进为一个 Progressive Web App 总共有三个必要步骤：
2.1 第一步：开启 HTTPS由于一些显而易见的原因， PWAs 需要 HTTPS 连接。HTTPS 在示例代码中并不是必须的，因为 Chrome 允许使用 localhost 或者任何 127.x.x.x 的地址来测试。你也可以在 HTTP 连接下测试你的 PWA ，你需要使用 Chrome ，并且输入以下命令行参数：

--user-data-dir
--unsafety-treat-insecure-origin-as-secure

2.2 第二步：创建一个 Web App Manifestmanifest 文件提供了一些我们网站的信息，例如 name ， description 和需要在主屏使用的图标的图片，启动屏的图片等。
manifest文件是一个 JSON 格式的文件，位于你项目的根目录。它必须用Content-Type: application/manifest+json 或者 Content-Type: application/json这样的 HTTP 头来请求。这个文件可以被命名为任何名字，在示例代码中他被命名为 /manifest.json:

{"name": "PWA Website","short_name": "PWA","description": "An example PWA website","start_url": "/","display": "standalone","orientation": "any","background_color": "#ACE","theme_color": "#ACE","icons": [{"src": "/images/logo/logo072.png","sizes": "72x72","type": "image/png"},{"src": "/images/logo/logo152.png","sizes": "152x152","type": "image/png"},{"src": "/images/logo/logo192.png","sizes": "192x192","type": "image/png"},{"src": "/images/logo/logo256.png","sizes": "256x256","type": "image/png"},{"src": "/images/logo/logo512.png","sizes": "512x512","type": "image/png"}]}

在页面的<head>中引入：
<link rel="manifest" href=https://www.isolves.com/it/cxkf/bk/2020-04-26/"/manifest.json">manifest 中主要属性有：