渐进式Web应用

修订人	修订内容	时间
gaocc	新建文档	2024-04-12
gaocc	增加应用实例，增加移动设备下载过程图，增加“我们得到了什么”	2024-05-28

概念

渐进式 Web 应用 (PWA - Progressive Web App)，PWA 是一种包含各种技术组件的模式：安装后，PWA 看起来与其他任何应用都一样，具体包括：

它在主屏幕、应用启动器、启动板或开始菜单中具有一个图标。
当您在设备上搜索应用时，系统会显示此图标。
它在一个单独的窗口中打开，与浏览器的界面完全分开。
它能够实现与操作系统的更高级集成，例如网址处理或标题栏自定义。
离线时也能使用。

缺点：并不少一个独立的app或桌面应用，依赖于操作系统的浏览器，如谷歌，safari

市场上应用实例

1、微信小程序，微信官方会给小程序生成一个浏览器链接，通过浏览器实现PWA应用。

2、MDN，开源协作项目，记录 Web 平台技术。使用PC谷歌浏览器打开，可在地址栏看到下载图标，实现PWA应用。

可安装

首先要让浏览器(谷歌/edge)支持安装，所以要给html增加配置，让浏览器读取配置，如下引入/json/manifest.json

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/glass-cup-rounded.svg" />
    <link rel="manifest" href="/json/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

json至少声明如下4项

name：表示PWA应用名称