[PWA渐进式门户开发技术-面向未来的WEB构建技术专题]

浏览手册 在逐浪CMS中开发PWA > 逐浪CMS中开发PWA开发的视频教程 >

manifest.json 简介


概述

允许将站点添加至主屏幕,是 PWA 提供的一项重要功能。虽然目前部分浏览器已经支持向主屏幕添加网页快捷方式以方便用户快速打开站点,但是 PWA 添加到主屏幕的不仅仅是一个网页快捷方式,它将提供更多的功能,让 PWA 具有更加原生的体验。

本文将以实现功能为粒度,去说明以下问题:

  1. 如何让 PWA 站点支持添加至主屏幕的功能;

  2. 添加到主屏幕的 PWA 具有哪些原生体验;

  3. 如何引导用户将 PWA 添加至主屏幕。

标准现状

PWA 添加至桌面的功能实现依赖于 manifest.json。当前 manifest.json 的标准仍属于草案阶段,Chrome 和 Firefox 已经实现了这个功能,微软正努力在 Edge 浏览器上实现,Apple 目前仍在考虑中。具体请查阅 caniuse.com 来查看主流浏览器的支持情况。同时需要注意的是,manifest.json 目前仍属于实验性技术,所以其部分属性和功能在未来有可能会发生改变。

使用说明

为了实现 PWA 应用添加至桌面的功能,除了要求站点支持 HTTPS 之外,还需要准备 manifest.json 文件去配置应用的图标、名称等信息。举个例子,一个基本的 manifest.json 应包含如下信息:

123456789101112{    "short_name": "短名称",    "name": "这是一个完整名称",    "icon": [
        {            "src": "icon.png",            "type": "image/png",            "sizes": "48x48"
        }
    ],    "start_url": "index.html"}

使用 link 标签将 manifest.json 部署到 PWA 站点 HTML 页面的头部,如下所示:

1<link rel="manifest" href="path-to-manifest/manifest.json">

通过对 manifest.json 进行相应配置,可以实现以下功能:

  • 基本功能

    • 自定义名称

    • 自定义图标

    • 设置启动网址

    • 设置作用域

  • 改善应用体验

    • 添加启动画面

    • 设置显示类型

    • 指定显示方向

    • 设置主题色

  • 应用安装横幅

    • 引导用户添加应用

    • 引导用户安装原生应用


+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
Copyright © 逐浪软件z01.com版权所有 All rights reserved
中华人民共和国网警备案号:3601040103 经营许可证号:工商3601002021063 沪ICP备09077823号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网 网络110