PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面_pwa manifest.json

简介 WEB 应用清单 manifest.json

web 应用清单是一个简单的 json 文件，其中包含 short_name 以及 icons 字段，目的是提供将应用添加至桌面的功能，从而使用户可以无需下载如同原生应用一般从桌面打开 web 应用，只要在 service worker 基础上添加一个描述性的配置文件 manifest.json 就可以了

添加应用至桌面，也称为 “Web 应用安装操作栏”，这是一种允许用户在浏览器中快速无缝地将 Web 应用添加到主屏幕的绝佳方法。为了确保用户可以快速地访问网站，此功能会显示提示，询问用户是否要将 Web 应用添加到主屏幕。如果用户接受，一个图标会被添加设备的主屏幕上，此图标引用了应用的 URL 。此后访问 Web 应用只需手指轻轻一按。

PWA 添加到主屏幕的不仅仅是一个网页快捷方式，它提供了更多的功能，让 PWA 具有更加原生的体验

添加到主屏幕功能是浏览器提供的不需要写代码，但是需要满足以下的条件

manifest.json 文件
清单文件需要启动 URL
需要 144x144 的 PNG 图标
网站正在使用通过 HTTPS 运行的 Service Worker
用户需要至少浏览网站两次，并且两次访问间隔在五分钟之上

1. manifest.json 文件配置说明

<!-- html 文件中引入 manifest 文件 -->
<link rel="manifest" href="/manifest.json" />

// 实际上是个 json 文件，这里为了方便注释
   "name": "Progressive Times web app", // 用作当用户被提示安装应用时出现的文本
   "short_name": "Progressive Times", // 用作当应用安装后出现在用户主屏幕上的文本
   "start_url": "/index.html", // 打开后第一个出现的页面地址
   "display": "standalone", // 定义应用的显示方式
   "description": "应用描述", // 参考 meta 中的 description
   "orientation": "natural", // 定义默认应用显示方向，竖屏、横屏
   "prefer_related_applications", false, // 是否设置对应应用
   "theme_color": "#FFDF00", // 主题颜色，用于控制浏览器地址栏着色
   "background_color": "#FFDF00", //  应用加载之前的背景色，用于应用启动时的过渡
   "icons": [ // 定义不同尺寸的图标，最终会根据应用场景选择合适大小的图标
         "src": "icon.png",
         "sizes": "144x144",
         "type": "image/png" // 非必填
   "scope": "/" // 设置 PWA 的作用域
用户点击主屏幕上的 web 应用后，浏览器渲染页面第一针时，将显示一个临时的启动页面
应用清单中的 display 配置项，可以设置 web 应用的显示模式，有一下选项 
  FullScreen 打开 Web 应用并占用整个可用的显示区域。
Standalone 独立原生应用模式 用户代理将排除诸如 URL 栏等标准浏览器 UI 元素，但可以包括诸如状态栏和系统返回按钮的其他系统 UI 元素
Minimal-ui 此模式类似于 fullscreen，但为终端用户提供了可访问的最小 UI 元素集合，例如，后退按钮、前进按钮、重载按钮以及查看网页地址的一些方式。
Browser 使用操作系统内置的标准浏览器来打开 Web 应用
可以通过在 CSS 中设置 display-mode 这个媒体查询条件去指定在不同的显示类型下不同的显示样式 
@media all and (display-mode: fullscreen) {
  body {
目前如果修改了 manifest.json，已添加到主屏幕的应用样式不会改变，除非重新添加到桌面
start_url 如果配置相对地址，则基本地址与 manifest.json 相同 
2. 提示用户添加应用至桌面 
// 取消添加到主屏幕
window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  return false;
// 添加到主屏幕后响应
window.addEventListener('beforeinstallprompt', function(event) {
  event.userChoice.then(result => {
    console.log(result);
    // {outcome: "dismissed", platform: ""} // 取消添加
    // {outcome: "accepted", platform: "web"} // 完成添加
// 手动添加，要等到符合规格后才能起效
let savedPrompt = null; // 用来保存 事件
const btn = document.getElementById('btn');
// 添加到主屏幕后响应
window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  savedPrompt = e;
  return false;
btn.addEventListener('click', function() {
  if (savedPrompt) {
    console.log(savedPrompt);
    // 异步触发横幅显示，弹出选择框，代替浏览器默认动作
    savedPrompt.prompt();
    // 接收选择结果
    savedPrompt.userChoice.then(result => {
      console.log(result);
PWA 渐进式网络应用 - 1 - 简介及调试方法 
PWA 渐进式网络应用 - 2 - 使用 Service Workers 
PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面
PWA 渐进式网络应用 - 4 - 推送通知
                    PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面简介 WEB 应用清单 manifest.json  web 应用清单是一个简单的 json 文件，其中包含 short_name 以及 icons 字段，目的是提供将应用添加至桌面的功能，从而使用户可以无需下载如同原生应用一般从桌面打开 web 应用，只要在 service worker 基础上添加一个描...
				3. Manifest
Manifest 是一种简单的 JSON 数据风格的配置文件，通过对其相应的属性进行配置，可以实现诸如自定义启动画面、打开 URL、设置界面颜色、设置桌面图标等功能。
使用 Manifest 可以实现的功能大致如下：
能够真实存在于用户主屏幕上
在 Android 上能够全屏启动，不显示地址栏
控制屏幕方向已获得最佳效果
定义启动画面，为站点定义主题
追踪应用是从主屏幕还...
if (navigator.serviceWorker != null) {
    navigator.serviceWorker.register('sw.js').then(function (registartion) {
      console.log('支持sw:', registartion.sco.
				https://developer.mozilla.org/zh-CN/docs/Learn
只能在https://或http://localhost的网址运行
普通的网页：没有manifest文件
新建mainfest文件:mainfest.webmanifest/manifest.json
    "name": "用于指定应用的名称,用户安装横幅提示的名称,和启动画面中的文字",
    "short_name": " 应用的短名称,主屏幕显示",
    "display": "standal
				mainfest
manifest作为渐进式Web应用程序pwa中的一个核心技术，通过manifest.json来配置，实现了将Web应用程序添加到设备的主屏幕，为用户提供更快的访问和更丰富的体验。
更快体现在放在主屏幕，而更丰富体现在在打开添加到主屏幕的一个缓冲界面及一个自定义的图标。
部署manifest
部署manifest非常容易，首先我们新建一个文件夹，在该文件夹中创建如下目录
in...
接上篇步步提高网站体验系列之——PWA（Service Worker）。，这次通过manifest.json来实现将网站添加到主屏幕，当有新文章上线时通过Notification（通知）提醒用户。 这两种交互方式的共同目的其实只有一个：吸引并留住用户。
文章目录如下：
manifest.json
				pwa创建快捷方式Hello, Medium! 您好，中！ 
In this article, I want to explain and show an example regarding the new Shortcuts feature for PWA. 在本文中，我想解释和展示有关PWA的新“快捷方式”功能的示例。 
Note before we start: Initial knowle...
				渐进式web应用程序 添加到主屏幕 (Add To Homescreen)
Here the web app install banner is focused on web app, with the feature of add to homescreen. 在此，Web应用程序安装标语专注于Web应用程序，具有添加到主屏幕的功能。 
 浏览器对“添加到主屏幕”的支持 (Browser Sup...
我们知道，在 chrome(等一些现代浏览器)中，你可以将访问的网站添加到桌面，这样就会在桌面生成一个类似 “快捷方式” 的图标，当你点击该图标时，便可以快速访问该网站(Web App)
我们以 demo 为例，其添加到桌面后以及重新打开时的状态如下：
				如果你在使用 PWA（Progressive Web Apps）开发应用程序，在 manifest.json 文件中选择了 Push 选项，但是你的 profile 文件不支持推送通知功能，那么你需要检查以下几个方面：
1. 检查浏览器是否支持推送通知功能：不是所有的浏览器都支持推送通知功能，因此，你需要确保你使用的浏览器支持该功能。你可以在浏览器的官方文档中查看是否支持推送通知功能。
2. 检查是否启用了 HTTPS：推送通知功能需要使用 HTTPS 协议进行通信，因此，你需要确保你的网站已启用 HTTPS 协议。
3. 检查是否正确配置了服务工作线程：推送通知功能需要使用服务工作线程进行处理，因此，你需要确保你正确配置了服务工作线程，并在 manifest.json 文件中指定了正确的路径。
如果你已经检查了以上三个方面，并且仍然无法解决问题，可以提供更多的细节和错误信息，以便我能够更好地帮助你解决问题。
                    mjzhang1993: 
                    1. 首先，对于类似我这种非计算机专业程序员，考证的过程也是个学习的过了，有助于了解计算机领域的一些基础知识
2. 软考中级的证书，可能对大部分互联网公司是没啥用的，但是一旦有机会可以用到这个证书谋福利（例如进国企、央企），短期内又不能快速拿到，所以提前准备一个，有备无患
3. 整体考下来，感觉难度还可以，掌握技巧后下午题基本上没啥问题，JAVA 等只要掌握基本语法即可，用起来根 Typescript 很像