【笔记】网站转换为PWA应用

发表于 更新于 阅读次数：

前言

渐进式网页应用程序（PWA，亦作 progressive web app）是一种网页应用程序，可以作为独立的应用程序安装于装置上。 PWA 是透过装置的网页浏览器之离线快取机制进行安装的。（维基百科）

定义清单文件

manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

引入清单文件

1
<link rel="manifest" href="manifest.json">

查看清单文件是否配置成功

  • 浏览器打开开发者工具->应用程序->清单

打包为应用

  • 应用->将此站点作为应用安装

  • 安装

完成

  • 截图纪念