最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】web的app中的manifest.json的作用和参数含义

app crifan 9448浏览 0评论

折腾:

【整理】HTML中meta theme-color的含义

后,后来在:

samples/web-application-manifest at gh-pages · GoogleChrome/samples

-》

Web Application Manifest Sample

提到了之前就知道,但是不是很懂的:

manifest.json

也看到manifest.json中,也定义了对应的

theme_color

icons

等参数。

-》

所以此时,对于theme_color等参数,到底是

html中的

<meta name=”theme-color” content=”#673ab8”>

起效果,还是:

manifest.json中的:

“theme_color”: “#673ab8”,

起效果呢?

找到官方定义了:

Web App Manifest

还是个正在起草的规范,好像没有完全成型。

官网解释:

“This specification defines a JSON-based manifest file that provides developers with a centralized place to put metadata associated with a web application. This metadata includes, but is not limited to, the web application’s name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to “scope” a web application to a URL. This restricts the URLs to which the manifest is applied and provides a means to “deep link” into a web application from other applications.

Using this metadata, user agents can provide developers with means to create user experiences that are more comparable to that of a native application.

This specification also defines the manifest link type as a declarative means to associate a document with a manifest.”

如果是要用web去实现一个app,即web application的话,对于很多地方定义的app的元数据,比如:

icon

title

theme_color

等等,新规范Web App Manifest,定义了一个JSON个格式的文件:

manifest.json

把对应配置都放到里面。

【整理】中国大陆简体中文的简写zh-cmn-Hans,zh-cn到底用哪个

然后再去看看,到底哪些浏览器支持这个

manifest.json support

Web App Manifest | MDN

“This is an experimental technology”

然后才知道是:

【整理】PWA Progressive web apps

PWA 初探:基本特性与标准现状 | Harttle Land

“如果你设置了下面的 Manifest 字段且拥有一个 service worker, 只要用户在5分钟内访问两次 Chrome 便会提示用户添加到主屏。

  • short_name 显示为桌面图标文字(用户可在添加时定义);

  • name 显示在启动界面(Splash Screen);

  • start_url 用户刷新从桌面图标打开的页面时载入;

  • icons:最好包括一个 144×144 大小的 PNG 图标;

下一代 Web 应用模型 —— Progressive Web App – 黄玄的博客 | Hux Blog

  • scope:定义了 web 应用的浏览作用域,比如作用域外的 URL 就会打开浏览器而不会在当前 PWA 里继续浏览。

  • start_url:定义了一个 PWA 的入口页面。比如说你添加 Hux Blog 的任何一个文章到主屏,从主屏打开时都会访问 Hux Blog 的主页。

  • orientation:终于,我们可以锁定屏幕旋转了(喜极而泣…)

  • theme_color/background_color:主题色与背景色,用于配置一些可定制的操作系统 UI 以提高用户体验,比如 Android 的状态栏、任务栏等。

PWA 的支持情况?

当我们说到 PWA 是否被支持时,其实我们在说的是 PWA 背后的几个关键技术都得到支持了没有。以浏览器内核来划分的话,Blink(Chrome、Oprea、Samsung Internet 等)与 Gecko(Firefox)都已经实现了 PWA 所需的所有关键技术(👏👏👏),并已经开始探寻更多的可能性。EdgeHTML(Edge)简直积极得不能更积极了,所有的特性都已经处于「正在开发中」的状态。最大的绊脚石仍然来自于 Webkit(Safari),尤其是在 iOS 上,上述的四个 API 都未得到支持,而且由于平台限制,第三方浏览器也无法在 iOS 上支持。(什么你说 IE?

不过,也不要气馁,Webkit 不但在它 2015 年发布的五年计划里提到了 Service Worker,更是已经在最近实现了 Service Worker 所依赖的 Request、Response 与 Fetch API,还把 Service Worker 与 Web App Manifest 纷纷列入了「正在考虑」的 API 中;要知道,Webkit 可是把 Web Components 中的 HTML Imports 直接列到「不考虑」里去了……(其实 Firefox 也是)

更何况,由于 web 社区一直以来所追求的「渐进增强、优雅降级」,一个 PWA 当然可以在 iOS 环境正常执行。事实上,华盛顿邮报将网站迁移到 PWA 之后发现,不止是 Android,在 iOS 上也获得了 5 倍的活跃度增长,(无论是不是它们之前的网站写得太烂吧),就算 iOS 现在还不支持 PWA 也不会怎么样,我们更是有理由相信 PWA 会很快在 iOS 上到来。

感觉好像是:

manifest.json – Mozilla | MDN

里面的参数,和w3c定义的不太一样,比如:

theme,没有theme_color

而是:

theme – Mozilla | MDN

theme下面的colors

【总结】

Web App Manifest

里面有示例代码,参数含义解释。

此处摘录别人的部分解释:

  • short_name 显示为桌面图标文字(用户可在添加时定义);

  • name 显示在启动界面(Splash Screen);

  • start_url 用户刷新从桌面图标打开的页面时载入;

  • icons:最好包括一个 144×144 大小的 PNG 图标;

  • scope:定义了 web 应用的浏览作用域,比如作用域外的 URL 就会打开浏览器而不会在当前 PWA 里继续浏览。

  • start_url:定义了一个 PWA 的入口页面。比如说你添加 Hux Blog 的任何一个文章到主屏,从主屏打开时都会访问 Hux Blog 的主页。

  • orientation:终于,我们可以锁定屏幕旋转了(喜极而泣…)

  • theme_color/background_color:主题色与背景色,用于配置一些可定制的操作系统 UI 以提高用户体验,比如 Android 的状态栏、任务栏等。

转载请注明:在路上 » 【整理】web的app中的manifest.json的作用和参数含义

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.182 seconds, using 22.09MB memory