PWA之Web 应用清单
原文
简书原文:https://www.jianshu.com/p/5c96242188e8
大纲
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 应用清单的更多相关文章
- PWA渐进式web应用
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...
- 关于PWA ( Progressive web apps )
渐进式Web应用程序使用现代Web API以及传统的渐进式增强策略来创建跨平台Web应用程序.这些应用程序无处不在,并提供多种功能,使其具有与本机应用程序相同的用户体验优势.这套文档告诉您需要了解的所 ...
- PWA(Progressive Web App)入门系列:(一)PWA简单介绍
前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...
- 天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_216 PWA(Progressive web apps,渐进式 Web 应用)使用现代的 Web API 以及传统的渐进式增强策略 ...
- PWA 渐进式Web应用程序 - 解释
想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...
- [PWA] Add web app to your Home Screen
Clone: Link Modify the structure: Move css, js, image, index.html to an 'app' folder. manifest.json: ...
- web知识清单
声名随笔中的实例链接到另一个博客是我本人的另一个博客号 模块一:HTML 1.html是什么: hyperText markup language超文本标记语言 超文本:比文本更丰富的内容 所有的浏览 ...
- 说说 PWA 和微信小程序--Progressive Web App
作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...
- 试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问
背景 有时候,我们也希望VuePress构建的文档中心能支持离线访问,这时候我们需要给他添加渐进式Web应用(PWA,Progressive Web App)的支持,根据官方文档指引,我们可以借助插件 ...
随机推荐
- 使用wget工具抓取网页和图片 及 相关工具几个
想保存一些网页,最后找到这 wget 的 shell脚本,虽然不是太理想,亲测可用呢. 使用wget工具抓取网页和图片 来源 https://my.oschina.net/freestyletim ...
- Cookie应用--显示看过的商品
package cn.itcast; import java.io.IOException; import java.io.PrintWriter; import java.util.LinkedHa ...
- webservie授权调用
Dim usercode As String = System.Configuration.ConfigurationSettings.AppSettings("SAPWebServiceU ...
- Flume的Events
Flume NG传输的数据的基本单位是event,如果是文本文件,通常是一行记录,这也是事务的基本单位.
- Linux与好莱坞电影
Linux与好莱坞电影 2009年底上映的<阿凡达>是电影特效的巅峰之作,除此之外还有<2012>每次观看之后总能让我们热血沸腾. 很早以前电影特效都 ...
- call、apply、bind 区别
1.为什么要用 call .apply? 为了 改变方法里面的属性而不去改变原来的方法 function fruits() {} fruits.prototype = { color: "r ...
- JavaScript学习总结(4)——JavaScript数组
JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...
- JS如何动态生成变量名[重点]
解决方案: function create_variable(num){ var name = "test_"+num; //生成函数名 ...
- 【CS Round #46 (Div. 1.5) C】Set Subtraction
[链接]h在这里写链接 [题意] 一开始有n个数字,然后有一个数字X,把每个数字都减去X,又生成N个新的数字. 然后把这2*N个数字混在一起. 告诉你这2*N个数字是什么.让你复原出原来的N个数字,以 ...
- AlertDialog的onCreateDialog与onPrepareDialog用法
场景:在一个Activity中多次使用弹出对话框.而且对话框携带着动态变化的信息数据,这时假设仅仅使用onCreateDialog(int id, Bundle bundle)回调,则会发现第一次以后 ...