网站添加pwa操作和配置manifest.json后，没有效果排查问题

pwa技术官网：https://web.dev/learn/pwa

应用清单manifest.json文件字段说明：https://web.dev/articles/add-manifest?hl=zh-cn

Web App Manifest：Web App Manifest | MDN

当网站添加了manifest.json文件后，也引入到html中了，但是打开网页却看不到效果，想要排查问题怎么排查呢？可以打开网页的检查，然后点击application：如果有问题，就可以看到报错的内容，然后针对内容想解决办法

如果没有问题的话，应该是没有错误和警告：

pwa事件：https://web.dev/learn/pwa/installation-prompt?hl=zh-cn 

创建清单文件

清单文件可以使用任何名称，但通常命名为 manifest.json，并从根目录（网站的顶级目录）提供。该规范建议该扩展程序应为 .webmanifest，但浏览器也支持 .json 扩展程序，这对开发者来说可能更容易理解。

典型的清单如下所示：

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

关键清单属性

short_name 和/或 name

您必须至少提供 short_name 或 name 属性。如果同时提供这两者，系统会在用户的主屏幕、启动器或空间可能有限的其他位置使用 short_name。在用户安装应用时使用 name。

注意 ：操作系统通常要求每个应用窗口都有一个标题。标题会显示在各种窗口切换界面（例如 Alt + Tab、概览模式和任务栏窗口列表）中。对于在独立模式下运行的 PWA，Chromium 会在 HTML 文档的 <title> 中指定的内容前面附加 short_name（如果未提供，则添加 name），以防伪装攻击，使独立应用可能被误认为是操作系统对话框。因此，当应用在独立模式下运行时，开发者不得在 <title> 中重复应用名称。

icons

当用户安装您的 PWA 时，您可以定义一组图标供浏览器在主屏幕、应用启动器、任务切换器、启动画面等位置使用。

icons 属性是图片对象的数组。每个对象都必须包含 src、sizes 属性和图片的 type。如需使用可遮盖图标（在 Android 中有时称为自适应图标），您还需要将 "purpose": "any maskable" 添加到 icon 属性。

对于 Chromium，您必须提供一个至少 192x192 像素的图标和一个 512x512 像素的图标。如果仅提供这两种图标大小，Chrome 会自动缩放图标以适应设备大小。如果您希望缩放自己的图标，并调整图标以实现像素完美，请以 48dp 为增量提供图标。

注意 ：基于 Chromium 的浏览器还支持 SVG 图标，这些图标可任意缩放而不会像素化，并且支持对 prefers-color-scheme 的响应等高级功能，但需注意，这些图标不会实时更新，而是保持在安装时的状态。为了安全地使用 SVG 图标，对于不支持 SVG 图标的浏览器，您应始终指定光栅化图标作为后备选项。

id

借助 id 属性，您可以明确定义用于应用的标识符。向清单添加 id 属性会移除对 start_url 或清单位置的依赖，使其可在将来更新。有关详情，请参阅通过 Web 应用清单 ID 属性唯一标识 PWA。

start_url

start_url 是必需的，用于告知浏览器应用启动时应从何处启动，并阻止应用在用户将应用添加到主屏幕时所在的任何页面启动。

您的 start_url 应将用户直接定向到您的应用，而不是商品着陆页。想一想用户打开您的应用后会想要做什么，并将他们放在那里。

background_color

首次在移动设备上启动应用时，启动画面会使用 background_color 属性。

display

您可以自定义应用启动时显示的浏览器界面。例如，您可以隐藏地址栏和浏览器界面元素。游戏甚至可以 以全屏模式启动display 属性采用以下值之一：

属性使用情形
fullscreen打开没有任何浏览器界面的 Web 应用，并占据整个可用显示区域。
standalone打开 Web 应用，使其看起来和感觉像是一个独立应用。应用在其单独的窗口中运行，与浏览器分开，并隐藏网址栏等标准浏览器界面元素。
minimal-ui此模式与 standalone 类似，但只为用户提供了一组用于控制导航（例如返回和重新加载）的界面元素。
browser标准的浏览器体验。
display_override

如上文所述，Web 应用可以通过在其清单中设置 display 模式来选择其显示方式。浏览器不需要支持所有显示模式，但需要支持规范定义的回退链 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果它们不支持给定模式，则会回退到链中的下一个显示模式。在极少数情况下，这种不灵活的行为可能会带来问题。例如，在 "minimal-ui" 不受支持的情况下，开发者不得在未强制回到 "browser" 显示模式的情况下请求 "minimal-ui"。另一个问题是，当前行为导致无法以向后兼容的方式引入新的显示模式，因为标签页式应用模式等探索在回退链中没有自然位置。

这些问题可通过 display_override 属性解决，浏览器会在 display 属性之前考虑该属性。它的值是按列出顺序考虑的一系列字符串，并且会应用第一个支持的显示模式。如果两者都不受支持，浏览器会回退到评估 display 字段。

请参考以下示例。（"window-control-overlay" 的详细信息不在本文的讨论范围内。）

{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

如前所述，浏览器会先查看 display_override。

  1. "window-control-overlay"
  2. "minimal-ui"

如果这两个选项都不可用，它会回退到 display。如果 "standalone" 不可用，它会从该时间点恢复规范定义的 Faabck 链。

  1. "standalone"
  2. "minimal-ui"
  3. "browser"

注意 ：除非 display 也存在，否则浏览器不会考虑 display_override。

scope

scope 定义了浏览器认为位于您应用中的一组网址，并用于确定用户何时离开应用。scope 可控制包含 Web 应用中的所有入口点和退出点的网址结构。您的 start_url 必须位于 scope 内。

注意 ：如果用户在应用中点击了某个链接，但该链接会转到 scope 之外，则此链接会在现有 PWA 窗口中打开并呈现。如果您希望在浏览器标签页中打开该链接，则必须将 target="_blank" 添加到 <a> 标记中。在 Android 设备上，包含 target="_blank" 的链接会在 Chrome 自定义标签页中打开。

关于 scope 的一些其他说明：

  • 如果您未在清单中添加 scope，则默认的隐含 scope 是起始网址，但移除了其文件名、查询和片段。
  • scope 属性可以是相对路径 (../)，也可以是任何有助于提高 Web 应用中的导航覆盖率的更高级别路径 (/)。
  • start_url 必须在范围内。
  • start_url 相对于 scope 属性中定义的路径。
  • 以 / 开头的 start_url 将始终是原点的根。
theme_color

theme_color 用于设置工具栏的颜色，并且可以反映在任务切换器中的应用预览中。theme_color 应与文档标头中指定的 meta 主题颜色一致。

采用自定义 theme_color 的 PWA 窗口示例。

从 Chromium 93 和 Safari 15 开始，您可以在媒体查询中使用 meta 主题颜色元素的 media 属性调整此颜色。系统会选择第一个匹配项。例如，您可以为浅色模式指定一种颜色，为深色模式指定另一种颜色。在编写时，您无法在清单中定义这些内容。请参阅 w3c/manifest#975 GitHub 问题。

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">
shortcuts

shortcuts 属性是一组应用快捷方式对象，其目标是让用户快速访问应用内的关键任务。每个成员都是一个字典，至少包含一个 name 和一个 url。

description

description 属性描述了应用的用途。

screenshots

screenshots 属性是一组图片对象，用于在常见使用场景中代表您的应用。每个对象都必须包含 src、sizes 属性和图片的 type。form_factor 属性是可选的。 您可以将它设置为 "wide"（对于仅适用于宽屏的屏幕截图）或 "narrow"（对于窄屏屏幕截图）。

在 Chrome 中，图片必须符合特定条件：

  • 宽度和高度必须介于 320 像素到 3840 像素之间。
  • 最大尺寸不能超过最小尺寸的 2.3 倍。
  • 与相应设备规格匹配的所有屏幕截图都必须具有相同的宽高比。
    • 从 Chrome 109 开始，桌面设备上只会显示 form_factor 设置为 "wide" 的屏幕截图。
  • 从 Chrome 109 开始，在 Android 设备上将忽略 form_factor 设置为 "wide" 的屏幕截图。为了向后兼容，系统仍会显示不含 form_factor 的屏幕截图。

桌面版 Chrome 至少会显示一张（最多八张）符合上述条件的屏幕截图。其余屏幕截图将会被忽略。

Android 版 Chrome 至少会显示一张且最多五张符合上述条件的屏幕截图。其余屏幕截图将会被忽略。

在桌面设备和移动设备上提供更丰富的安装界面。

创建清单后，将 <link> 标记添加到渐进式 Web 应用的所有页面。例如：

<link rel="manifest" href="/manifest.json">

针对清单发出的请求不使用凭据（即使请求位于同一网域中），因此，如果清单要求提供凭据，您必须在清单标记中添加 crossorigin="use-credentials"。

测试清单

如需验证您的清单是否已正确设置，请使用 Chrome DevTools 的 Application 面板中的 Manifest 窗格。

在 Chrome 中，所有平台上的说明长度都不得超过 300 个字符。如果说明超过该限制，将会被截断并以省略号字符显示。在 Android 上，额外限制为最多 7 行。

在开发者工具中测试您的清单。

此窗格提供人类可读版本的许多清单属性，可让您轻松验证所有图片是否均已正确加载。

移动设备上的启动画面

当您的应用首次在移动设备上启动时，浏览器需要一些时间才能启动，然后才会开始呈现初始内容。浏览器会在进行首次渲染之前显示启动画面，而不是显示可能会像应用停滞一样向用户显示的白色屏幕。

Chrome 会根据清单属性自动创建启动画面，具体而言：

  • name
  • background_color
  • icons

background_color 应与加载页面的颜色相同，以便能够从启动画面平稳过渡到应用。

Chrome 将选择与设备的设备分辨率高度匹配的图标。在大多数情况下，提供 192 像素和 512 像素的图标就足够了，但您可以提供其他图标来使像素完美呈现。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/415588.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

安卓使用okhttpfinal下载文件,附带线程池下载使用

安卓使用okhttpfinal下载文件,附带线程池下载使用

1.导入okhttp包 implementation cn.finalteam:okhttpfinal:2.0.7 2.单个下载 package com.example.downloading;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.util.Log; import android.view.View;import java.io.File;import c…
阅读更多...
K8S存储卷与PV,PVC

K8S存储卷与PV,PVC

一、前言 Kubernetes&#xff08;K8s&#xff09;中的存储卷是用于在容器之间共享数据的一种机制。存储卷可以在多个Pod之间共享数据&#xff0c;并且可以保持数据的持久性&#xff0c;即使Pod被重新调度或者删除&#xff0c;数据也不会丢失。 Kubernetes支持多种类型的存储卷…
阅读更多...
Python编程实验五：文件的读写操作

Python编程实验五：文件的读写操作

目录 一、实验目的与要求 二、实验内容 三、主要程序清单和程序运行结果 第1题 第2题 四、实验结果分析与体会 一、实验目的与要求 &#xff08;1&#xff09;通过本次实验&#xff0c;学生应掌握与文件打开、关闭相关的函数&#xff0c;以及与读写操作相关的常用方法的…
阅读更多...
74HC04六角逆变器介绍

74HC04六角逆变器介绍

74HC04系列六角逆变器的输入包括钳位二极管&#xff0c;允许使用限流电阻将输入连接到高于 VCC 的电压。该小工具可使用 2.0 至 6.0 伏的电源工作。当使用上拉电阻时&#xff0c;器件输入与标准 CMOS 输出和 LSTTL 输出兼容。 74HC04基础参数 • 输出驱动能力&#xff1a;10 …
阅读更多...
Avalonia学习（二十七）-显示图像

Avalonia学习（二十七）-显示图像

其实和Avalonia没有什么关系&#xff0c;但是还是以其它承载&#xff0c;主要是生成二维码。 主要是库&#xff1a;QRCoder 另外是&#xff1a;SixLabors.ImageSharp&#xff0c;ZXing.ImageSharp.Barcode 用image控件显示bitmap即可。 运行效果
阅读更多...
ArmV8架构

ArmV8架构

Armv8/armv9架构入门指南 — Armv8/armv9架构入门指南 v1.0 documentation 上面只是给了一个比较好的参考文档 其他内容待补充
阅读更多...
JS进阶——深入对象

JS进阶——深入对象

构造函数 封装是面向对象思想中比较重要的一部分&#xff0c;js面向对象可以通过构造函数实现的封装。 前面我们学过的构造函数方法很好用&#xff0c;但是 存在浪费内存的问题 原型 目标&#xff1a;能够利用原型对象实现方法共享 构造函数通过原型分配的函数是所有对象所…
阅读更多...
linux系统-----------搭建LNMP 架构

linux系统-----------搭建LNMP 架构

PHP(Hypertext Preprocessor 超文本预处理器)是通用服务器端脚本编程语言&#xff0c;主要用于web开发实现动态web页面&#xff0c;也是最早实现将脚本嵌入HTML源码文档中的服务器端脚本语言之一。同时&#xff0c;php还提供了一个命令行接口&#xff0c;因此&#xff0c;其也可…
阅读更多...
resilience4j 2.0.0版本使用要求最低JDK17（使用踩坑记录）

resilience4j 2.0.0版本使用要求最低JDK17（使用踩坑记录）

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作…
阅读更多...
如何选择科技公司或者技术团队来开发软件项目呢

如何选择科技公司或者技术团队来开发软件项目呢

最近有客户问我们为什么同样软件项目不同公司报价和工期差异很大&#xff0c;我们给他解释好久才讲清楚&#xff0c;今天整理一下打算写一篇文章来总结一下&#xff0c;有需要开发朋友可以参考&#xff0c;我们下次遇到客户也可以直接转发文章给客户自己看。 我们根据我们自己报…
阅读更多...
vue项目中使用antv X6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）

vue项目中使用antv X6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）

前言&#xff1a; 之前分别做了vue2和vue3项目里的网络拓扑图功能&#xff0c;发现对antv X6的讲解博客比较少&#xff0c;最近终于得闲码一篇了&#xff01; 需求&#xff1a; 用户可以自己拖拽节点&#xff0c;节点之间可以随意连线&#xff0c;保存拓扑图数据后传给后端&…
阅读更多...
TensorFlow 使用 Rust 指南

TensorFlow 使用 Rust 指南

一、概述 TensorFlow是由 Google Brain 团队开发的强大的开源机器学习框架&#xff0c;已成为人工智能的基石。虽然传统上与 Python 等语言相关&#xff0c;但 Rust&#xff08;一种因其性能和安全性而受到重视的系统编程语言&#xff09;的出现为 TensorFlow 爱好者开辟了新的…
阅读更多...
人工智能到深度学习:药物发现的机器智能方法（综述学习）

人工智能到深度学习:药物发现的机器智能方法（综述学习）

Artificial intelligence to deep learning: machine intelligence approach for drug discovery - PubMed (nih.gov) 人工神经网络、深度神经网络、支持向量机、分类和回归、生成对抗网络、符号学习和元学习是应用于药物设计和发现过程的算法的例子。人工智能已应用于药物设计…
阅读更多...
定制开发一款家政小程序，应知应会

定制开发一款家政小程序，应知应会

引言 在这个快节奏的现代生活中&#xff0c;人们对高效、便捷的家政服务的需求日益增加。随着社会结构的变化和职业生活的繁忙&#xff0c;许多家庭面临着时间不足、精力不济的挑战。在这种情况下&#xff0c;家政服务成为解决问题的有效途径。然而&#xff0c;传统的家政服务…
阅读更多...
iMazing3安全吗？好不好用？值不值得下载

iMazing3安全吗？好不好用？值不值得下载

一、安全性 iMazing在设计和开发过程中&#xff0c;始终把用户数据的安全性放在首位。它采用了多种先进的安全技术来确保用户数据在传输、备份和存储过程中的安全。 iMazing3Mac-最新绿色安装包下载如下&#xff1a; https://wm.makeding.com/iclk/?zoneid49816 iMazing3Wi…
阅读更多...
ubuntu2204部署hbase2.3.7

ubuntu2204部署hbase2.3.7

开启root 修改root用户的密码 sudo passwd rootSSH放行 sudo sed -i s/^#\?PermitRootLogin.*/PermitRootLogin yes/g /etc/ssh/sshd_config; sudo sed -i s/^#\?PasswordAuthentication.*/PasswordAuthentication yes/g /etc/ssh/sshd_config;重启服务 sudo service ssh…
阅读更多...
IEEE Transactions on Industrial Electronics工业电子TIE修改稿注意事项及提交须知

IEEE Transactions on Industrial Electronics工业电子TIE修改稿注意事项及提交须知

一、背景 兔年末投了一篇TIE&#xff0c;手稿初次提交的注意事项也整理成了博客IEEE Transactions on Industrial Electronics工业电子TIE论文投稿须知&#xff0c;获得了许多点赞和收藏。最近也收到了审稿结果&#xff0c;给的意见是大修major revision&#xff0c;总之只要不…
阅读更多...
day01-HTML-CSS

day01-HTML-CSS

一、Web 开发 1. 什么是 Web &#xff1f; Web&#xff1a;全球广域网&#xff0c;也称为万维网(www&#xff0c;World Wide Web)&#xff0c;能够通过浏览器访问的 网站。 2. Web 网站的开发模式 3. Web 标准 Web 标准也称为网页标准&#xff0c;由一系列的标准组成&#xff…
阅读更多...
【React 报错】—Remove untracked files, stash or commit any changes, and try again.

【React 报错】—Remove untracked files, stash or commit any changes, and try again.

【React 报错】—Remove untracked files, stash or commit any changes, and try again. 在react项目中通过.less文件进行样式定义&#xff0c;先暴露webpack配置文件&#xff0c;执行命令&#xff1a;yarn eject 或 npm run eject&#xff0c;报错如下&#xff1a; 原因是因…
阅读更多...
ZDH-大数据采集-支持KETTLE任务

ZDH-大数据采集-支持KETTLE任务

目录 目录 项目源码 预览地址 支持KETTLE介绍 新增KETTLE任务 配置调度KETTLE 重要说明 感谢支持 项目源码 预览地址 支持KETTLE介绍 新增KETTLE任务 配置调度KETTLE 重要说明 项目源码 zdh_web:GitHub - zhaoyachao/zdh_web: 大数据采集,抽取平台 预览地址 后…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站