4、构建可安装的渐进式Web应用（PWA）：从基础到实践

构建可安装的渐进式Web应用（PWA）：从基础到实践

1. 网页应用清单剖析

在构建网页应用时，清单文件起着关键作用。不过，需要注意的是，如果网页应用包含指向清单文件定义范围之外资源的链接，浏览器会在当前窗口加载这些链接。若目标页面没有提供返回启动PWA的导航帮助，用户可能会被困在新页面。为避免这种情况，可在页面的任何HTML锚点（ <a> ）标签中包含 target="_blank" 属性，这样点击链接时会在新窗口打开，PWA窗口保持不变，示例代码如下：

<a href="https://learningpwa.com" target="_blank">Learning PWA</a>

2. 设置应用选项

之前介绍的是使应用可安装所需的清单选项，接下来看看其他有用但非必需的选项。
- 启动屏背景颜色 ：安装的PWA启动时，浏览器会使用应用图标和标题构建简单的启动屏。启动屏背景默认是白色，若应用主页使用不同颜色，从白色启动屏过渡到应用背景色可能会让用户感到突兀。为改善用户体验，可使用清单文件的 background_color 属性设置启动屏背景色，使其与应用主页背景色匹配。例如，在小费计算器应用的清单文件中，设置背景色为白色：

"background_color": "#FFFFFF",

<