美文网首页
PWA之Web 应用清单

PWA之Web 应用清单

作者: 前端路上的小兵 | 来源:发表于2018-07-13 20:13 被阅读0次
原文

博客原文

大纲

1、什么是Web 应用清单
2、“清单文件”:Web App Manifest 规范的应用
3、web应用清单文件的内容

1、什么是Web 应用清单

Web 应用清单文件是简单的 JSON 文件,它在文本文件中提供了应用相关的有用信息 (比如应用的名称、作者、图标和描述)。但更特别的是,Web 应用清单可使用户将 Web 应用安装到设备的主屏幕上,并允许开发者自定义启动画面、模板颜色,甚至是打开的 URL 。

2、“清单文件”:Web App Manifest 规范的应用

如果你仔细查看过 一个PWA的Web 应用主页的 HTML 的话,可能会注意到下面这行代码:

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

这个链接指向一个被称为“清单文件”的文件。这个文件只是简单的 JSON 文件,它遵循 W3C 的 Web App Manifest 规范,并使开发者能够控制应用中不同元素的外观感觉。它提供 Web 应用的信息,比如名称,作者,图标和描述。
它带来了一些好处。首先,它使浏览器能够将 Web 应用安装到设备的主屏幕,以便为用户提供更快捷的访问和更丰富的体验。其次,通过在清单文件中设置品牌颜色,你可以自定义浏览器自动显示的启动画面。它还允许你自定义浏览器的地址栏以匹配你的品牌颜色。
使用清单文件真正地使 Web 应用的外观感觉更加完美,并为你的用户提供了更丰富的体验。

3、web应用清单文件的内容
3.1、启动文件路径
"start_url": "/index.html"

start_url 用来指定当用户从设备启动应用时加载的 URL 。如果给定的是相对路径,那么基础路径就是清单的路径。如果你想追踪有多少人是通过主屏幕图标访问网站的,你可能想要在查询字符串中追加追踪代码,比如 /index.html?homescreen=1 这样的 URL 。这样一来,你的 Web 分析软件包就可以分辨出通过主屏幕图标到达的用户。

3.2、设备的显示模式
"display": "standalone"

关于 Web 应用如何显示在用户的设备上,还有几个不同的选项。例如,你可以选择最符合需求的显示模式。显示模式表示 Web 应用在操作系统环境中的展现方式: fullscreen、standalone、minimal-ui 或 browser 。
每种显示模式对 Web 应用的影响如下:
Fullscreen - 打开 Web 应用并占用整个可用的显示区域。
Standalone - 打开 Web 应用以看起来像一个独立的原生应用。此模式下,用户代理将排除诸如 URL 栏等标准浏览器 UI 元素,但可以包括诸如状态栏和系统返回按钮的其他系统 UI 元素。
Minimal-ui - 此模式类似于 fullscreen,但为终端用户提供了可访问的最小 UI 元素集合,例如,后退按钮、前进按钮、重载按钮以及查看网页地址的一些方式。
Browser - 使用操作系统内置的标准浏览器来打开 Web 应用。
在 Web 应用清单中,display 属性是可选项,默认它会以 browser 模式来显示。这些不同的显示模式为开发者开辟了一个充满可能性的世界,重要的是你想要 Web 应用以何种方式出现。例如,如果你的 Web 应用是游戏,使用 standalone 显示模式更适合,以确保 Web 应用用起来更身临其境。如果你的 Web 应用是在线出版物,你可能会选择 minimal-ui 或 fullscreen 显示模式,以确保专注于文本而消除干扰。完全在于你的掌控,但要记住无论选择哪种风格都会影响 Web 应用的感受,所以请做出明智的选择!

相关文章

  • PWA之Web 应用清单

    原文 博客原文 大纲 1、什么是Web 应用清单2、“清单文件”:Web App Manifest 规范的应用3、...

  • 干货 | 10分钟玩转PWA

    关于PWA PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目的...

  • VUE PWA 插件,接收server端消息推送并显示通知

    PWA,即 Progressive web apps(渐进式 Web 应用),PWA使得web应用具有与原生应用类...

  • PWA的学习之路

    PWA介绍 PWA是什么 MDN解释 PWA(Progressive Web Apps,渐进式Web应用)运用现代...

  • 【PWA学习】1. 初识 PWA

    什么是PWA PWA(Progressive Web Apps,渐进式 Web 应用)运用现代的 Web API ...

  • PWA

    PWA PWA 就是渐进式 web 应用(Progressive Web App)。早在2016年初,Google...

  • 【sw】service worker概述

    1. 先说说PWA? PWA = progressive web app = 渐进增强式web应用 = 谷歌也想分...

  • PWA 实践/应用(Google Workbox)

    桌面端 PWA 应用: 移动端添加到桌面: 1 什么是 PWA PWA(Progressive Web App -...

  • PWA学习

    PWA全称Progressive Web App,即渐进式WEB应用。 一个 PWA 应用首先是一个网页, 可以通...

  • Angular初探PWA

    所谓PWA是 Progressive Web App 的缩写,中文意思是 “渐进式 Web 应用”,PWA有与传统...

网友评论

      本文标题:PWA之Web 应用清单

      本文链接:https://www.haomeiwen.com/subject/kivspftx.html