从零搭建一个PWA应用需要了解哪些知识

在国内由于小程序的风生水起，PWA 应用在国内的状况一直都不是很好，PWA 和小程序有很多的相似性，但是 PWA 是由谷歌发起的技术，小程序是微信发起的技术，所以小程序在国内得到了大力的扶持，很快就在国内技术界开花结果。

这里想讨论下在去创建自己的第一个 PWA 应用前，什么是 PWA 应用，有哪些核心的技术？

先搞清楚 PWA

PWA 全称渐进式 Web 应用（Progressive Web App）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。

它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。

对于用户来说，PWA 应用最大的变化在于，改变了以往需要下载安装包、等待安装的过程，这类应用很好地体现了「用完即走」的理念，与传统安装应用相比，PWA 应用具备的优势是：无需安装、更轻量、不占用大量空间，只需要一款支持 PWA 应用的浏览器，就可以轻松添加 PWA 应用，具备了跨平台使用的特性。

如果想要更为直接的体验，可以直接访问下谷歌官方上线的 PWA 体验 demo：squoosh.app ，算是 PWA 技术实际应用的典范，整个页面的大小都只有41K。

PWA 的技术核心

PWA 的技术核心可以分为四个部分：

• 桌面图标 Web App Manifest ：将网站添加到桌面，让 PWA 应用的访问使用更类似 native 的体验。
• 离线访问 Service Worker ：指定一些静态资源进行离线缓存。
• 消息推送 Push Api & Notification Api ：让 PWA 应用可以进行消息的推送和通知。
• 应用壳及应用结构 App Shell & App Skeleton：应用的基本结构。

1、桌面图标 Web App Manifest

Manifest File 是一个配置 JSON 文件，里面包含 PWA 的信息，例如安装到主屏幕上显示的图标、Web 应用的名称和背景色。
如果 Manifest File 存在的话，Chrome 等浏览器会自动激活用于引导用户安装 PWA 应用的提示“添加到主屏幕”。

如果用户同意，图标就会添加到主屏幕并安装 PWA。

关于如何创建 Manifest File 这里放一个示例：

{