问题标签 [web-manifest]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

19 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
887 浏览

html - 通过网络清单显示未读通知计数

我最近按照本指南向我的 web 应用程序添加了一个 web 清单。它工作得很好。我还实现了推送通知。我想知道是否有一种方法可以添加未读通知计数，就像任何其他 android 应用程序一样，在主屏幕上的启动器图标上指示未读通知的数量。

0 投票
1 回答
1320 浏览

json - 清单 'https://www.example.com/manifest.json' 不是 http 200

我正在尝试为我的网站创建渐进式应用程序。我创建了 manifest.json 文件并上传到服务器。然后我在主页中提供了清单文件的链接。清单文件是正确的，但是当我尝试使用我的站点 url 检查它时，它给出一个错误，因为“Manifest ' https://www.example.com/manifest.json ' is not http 200”

0 投票
1 回答
5632 浏览

reactjs - 无法安装渐进式 Web 应用程序站点：没有可显示的图标

我正在构建一个渐进式网络应用程序。我从create-react-app的样板开始。然后我添加了一个网络应用清单。

应用程序/公共/manifest.json

将此链接到index.html

应用程序/公共/index.html

我已经使用生成图标realfavicongenerator.net并将它们放在公共目录中。

我正在使用gh-pages. 当我尝试时Add to homescreen，我收到以下错误

  • android-chrome-192x192.png:1 获取https://roshanjossey.github.io/android-chrome-192x192.png 404（未找到）
  • 尝试使用清单中的以下图标时出错：https ://roshanjossey.github.io/android-chrome-192x192.png （下载错误或资源不是有效图像）
  • 无法安装站点：没有可显示的图标

我认为我在 webmanifest 中为图标做错了什么。

0 投票
6 回答
32667 浏览

iis - 如何让 IIS 在我的网站上正确提供 .webmanifest 文件？

Favicon Generator组装了一个包供网站管理员使用，以便为许多不同的设备提供可用的图标。该页面带有一个名为的文件，该文件site.manifest通过网页文档中的以下标记链接到<head>：

根据Mozilla的说法：“Web 应用程序清单在 JSON 文本文件中提供有关应用程序的信息（例如名称、作者、图标和描述）。清单的目的是将 Web 应用程序安装到设备的主屏幕，提供用户访问速度更快，体验更丰富。”

不幸的是，如果您使用的是 Microsoft 的 Internet 信息服务 (IIS)，如果您尝试访问该site.webmanifest文件，则会收到 404.3 错误。

确切的错误消息如下：“由于扩展​​配置，无法提供您请求的页面。如果页面是脚本，请添加处理程序。如果应该下载文件，请添加 MIME 映射。”

如何site.webmanifest在 IIS 中正确提供文件？

0 投票
2 回答
587 浏览

android - WebAPK 忽略在本地网络上运行的 PWA 的 display:standalone 标志

我正在开发一个 PWA，我希望它在独立显示模式下具有“添加到主屏幕”（a2hs）功能。

在开发过程中，我的 PWA 运行在只能从我的本地网络（不能从外部 Internet）访问的服务器上。

在 Chrome for Android 上测试 a2hs 时，我遇到了以下奇怪的行为。

简单添加到主屏幕 当我的 PWA 作为普通快捷方式添加到主屏幕时，一切正常。单击快捷方式将以独立显示模式打开 PWA（不显示 Chrome UI）。

高级添加到主屏幕 (WebAPK) 当 PWA 作为 WebAPK 快捷方式添加到主屏幕时，我的 Web 清单中的独立标志将被忽略。单击快捷方式将在浏览器选项卡中打开 PWA（Chrome UI 可见）。

这种不正确行为的原因可能是什么？我的猜测是，Google 的服务器需要能够访问我的 PWA 清单才能正确组装 WebAPK。由于无法从 Internet 访问我的清单，因此 WebAPK 没有正确组装。这只是猜测。有人可以确认或描述这种奇怪行为的原因吗？

0 投票
0 回答
325 浏览

javascript - 通过firebase生成清单文件获取值为null的属性`splash_pages`

什么价值应该采取splash_pages财产manifest.json？

默认情况下是null

我使用了 firebase 清单生成器，并且这个属性得到空值，我想知道它应该取什么值？是所有浏览器都支持还是只有 Chrome 支持

谢谢！

0 投票
1 回答
58 浏览

google-chrome - “添加到主屏幕”提示未出现

我创建了一个小应用程序，我的移动访问者可以在其中向 WhatsApp 用户发送消息，而无需将他们的号码保存在联系人列表中（测试链接）

无论我如何尝试，当移动用户访问该网站时，我都无法获得“添加到主屏幕”提示。

Chrome 开发工具显示“无法安装站点：该页面无法脱机工作”。我该如何解决这个问题？

0 投票
1 回答
2485 浏览

html - Favicon error 404 for local and remote, favicon.ico directory automatically generated in git repo

In both Firefox and Chrome, the browser will not recognize my favicons, throwing 404 errors in the Network panel for all favicon files on both localhost and remote sites.

All of my favicons are located in /favicon. When I navigate to both mywebsite.com/favicon/favicon.ico and localhost:5000/favicon/favicon.ico I get an error 404. This is the case even after I have closed all tabs with the local and remote website, completely cleared the browser cache, then closed and reopened the browser. The issue is the same in both Firefox and Chrome.

For some reason, a directory called favicon.ico is being generated, no mater how many times I remove it from the local and remote repos. Inside it is a new manifest.json, identical to the manifest.json inside /favicon.

My index file is located in /static/index.html Links in index.html head are:

Favicons and html were generated at favicon-generator. I added in /favicon as a prefix to all of the files, as they are kept in /favicon and not root.

This question has been asked and answered several times in the past 7 years, but I'm asking again as none of the solutions are working for me.

0 投票
2 回答
815 浏览

android - 带有 Web App Manifest 的 Android 9 上的自适应图标

我正在为我的 PWA 设置一个 Web App Manifest。但是 Android 的图标被压缩成一个圆形图标。

我尝试了普通图标，没有背景，并且考虑了safe-zone。

我的 Android 上安装的图标图像

可悲的是，我没有找到任何文档，而且这个图标真的让我很烦。

编辑：

编辑 2：当我只使用圆形图标时，它似乎有效。但我猜每个版本的 Android 的 UI 都不一样。

通过制作圆形图标来解决它。现在的问题是，桌面上的图标现在也是圆形的。

0 投票
1 回答
346 浏览

angular - SharePoint Online 是否支持 .webmanifest？如何使用受支持的 webmanifest 文件创建 SharePoint Online 渐进式 Web 应用程序？

我正在尝试使用使用 Angular 8 PWA 生成的构建来创建 SharePoint Online 渐进式 Web 应用程序。我能够让服务人员和应用程序正常工作。但是，网络清单文件未正确加载。

我在 SharePoint 中创建了一个新的 ASPX 页面，并以这种方式添加了 webmanifest 文件：

在 chrome 开发者工具中，manifest 文件总是等待下载：

没有这个，我在从移动设备浏览时无法获得“添加到主屏幕”功能。


12345678910