PWA 面试题 目录

Web App Manifest 中有哪些常用的配置项?

推荐答案

Web App Manifest 是一个 JSON 文件,用于定义 PWA(Progressive Web App)的元数据。以下是一些常用的配置项:

  • name: 应用的名称。
  • short_name: 应用的短名称,通常用于主屏幕图标下方。
  • start_url: 应用启动时加载的 URL。
  • display: 定义应用的显示模式,如 standalonefullscreenminimal-uibrowser
  • background_color: 应用的背景颜色,通常用于启动时的背景。
  • theme_color: 应用的主题颜色,通常用于工具栏和状态栏。
  • icons: 定义应用图标,通常包含不同尺寸的图标。
  • orientation: 定义应用的默认屏幕方向,如 portraitlandscape
  • scope: 定义应用的作用域,通常用于限制 PWA 的导航范围。

本题详细解读

name

name 是应用的完整名称,通常显示在应用的标题栏或安装提示中。这个名称应该简洁明了,能够准确描述应用的功能。

short_name

short_name 是应用的短名称,通常用于主屏幕图标下方。由于空间有限,这个名称应该尽可能简短。

start_url

start_url 是应用启动时加载的 URL。这个 URL 通常是应用的首页或登录页面。

display

display 定义了应用的显示模式。常见的模式包括:

  • standalone: 应用以独立窗口的形式运行,不显示浏览器的地址栏和工具栏。
  • fullscreen: 应用以全屏模式运行,隐藏所有浏览器 UI。
  • minimal-ui: 应用以最小化 UI 模式运行,显示有限的浏览器 UI。
  • browser: 应用以常规浏览器模式运行。

background_color

background_color 是应用的背景颜色,通常用于启动时的背景。这个颜色应该与应用的主题颜色协调一致。

theme_color

theme_color 是应用的主题颜色,通常用于工具栏和状态栏。这个颜色应该与应用的整体设计风格一致。

icons

icons 定义了应用图标,通常包含不同尺寸的图标。这些图标用于主屏幕、启动画面等场景。

orientation

orientation 定义了应用的默认屏幕方向。常见的选项包括 portrait(竖屏)和 landscape(横屏)。

scope

scope 定义了应用的作用域,通常用于限制 PWA 的导航范围。如果用户尝试导航到作用域之外的 URL,应用将退回到常规浏览器模式。

纠错
反馈