让 PWA 易于安装

您所在的位置:网站首页 ipad怎么在浏览器下载应用 让 PWA 易于安装

让 PWA 易于安装

2024-07-13 08:28| 来源: 网络整理| 查看: 265

离线访问的关键在于一份网页清单,它通过 JSON 形式列举了网站的所有信息。

它通常位于网页应用的根目录,包含一些有用的信息,比如应用的标题、在移动设备操作系统上显示的代表该应用的不同大小的图标(例如主屏图标)的路径,和用于加载页或启动画面的背景颜色。浏览器需要这些信息来安装 web 应用并使其在主屏上显示。

js13kPWA 的 js13kpwa.webmanifest 文件包含在 index.html 文件的 段,如下行所示:

html

备注: 这类清单文件有一些曾经常被使用的扩展名:manifest.webapp 在 Firefox OS 应用清单中很流行,而许多人使用 manifest.json 作为网页清单(因为内容是 JSON 格式的)。但是,.webmanifest 扩展名是在 W3C 清单规范中显式指定的,所以这里我们使用这个扩展名。

文件的内容是这个样子的:

json{ "name": "js13kGames Progressive Web App", "short_name": "js13kPWA", "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" }

大部分字段无需解释,但是我们还是详细解释一下为妙:

name: 网站应用的全名。 short_name: 显示在主屏上的短名字。 description: 一两句话解释你的应用的用途。 icons: 一串图标信息:源 URL,大小和类型。多包含几个图标,这样就能选中一个最适合用户设备的。 start_url: 启动应用时打开的主页。 display: 应用的显示方式;可以是 fullscreen、standalone、minimal-ui 或者 browser。 theme_color: UI 主颜色,由操作系统使用。 background_color: 背景色,用于安装和显示启动画面时。

一份网页清单最少需要 name 和一个图标 (带有 src, size 和 type)。最好也要提供 description、short_name、和 start_url。除了上述字段,还有一些其他的字段供你使用,请查看网页应用清单参考获取详细信息。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3