标签: manifest.json

site.webmanifest 文件的主要用途是什么？

我正在使用 HTML 样板文件，我看到一个名为site.webmanifest. 网上查了资料，不明白怎么用。

是网页开发中的必填文件吗？何时以及为何使用它？我怎么知道什么时候需要使用它？

html javascript manifest boilerplate manifest.json

Jus*_*lix

2021 01-26

30
推荐指数

2
解决办法

2万
查看次数

AWS Cloud9不允许使用静态manifest.json,但允许使用css文件

我正在AWS Cloud9中开发PWA,但它不允许在链接标记中包含/引用我的manifest.json.它在开发工具中说"VFS Connection不存在",好像它找不到清单,因为它在应用程序的外部.我在控制台中收到499错误.如果我停止节点http-server并重新加载预览页面,这就是我得到的相同消息,因为它没有在端口8080上提供.它可以在链接标签中找到CSS文件就好了(在同一个文件夹中) ),它是因为它是rel = manifest,还是出于安全原因或其他原因不允许包含json文件？有谁知道为什么这个文件不起作用？

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

Run Code Online (Sandbox Code Playgroud)

json amazon-web-services progressive-web-apps manifest.json aws-cloud9

rnc*_*rtr

lucky-day

20
推荐指数

1
解决办法

601
查看次数

PWA“清单不包含合适的图标”

我正在构建一个渐进式网络应用程序。Chrome 表示它有图标问题：“Manifest 不包含合适的图标”和“未提供的图标至少为 144px 正方形”。

我有图标，它们可以在我的手机上运行（所以它至少可以安装在 android 上）。

我有几种不同的图标大小，包括最大 512 像素。我试过预先缓存图标，但这似乎没有帮助。

这是我的清单的摘录：

{
  "src": "images/icons/icon-96x96.png",
  "sizes": "144x144",
  "type": "image/png",
  "purpose": "maskable"
},

Run Code Online (Sandbox Code Playgroud)

错误截图

任何帮助表示赞赏。

progressive-web-apps manifest.json

Rob*_*ley

lucky-day

17
推荐指数

2
解决办法

5356
查看次数

如何将manifest.json的start_url设置为站点的根目录？

我有一个manifest.json,它有一个start_url属性,我想指向我的单页面应用程序的第一个文件.

这是index.html,它是网站的根源.我希望这是start_url,但该文件永远不会被要求作为URL.

我如何指向start_url网站的相对根？

例如,假设该网站是在https://example.com什么应的值start_url是https://example.com/manifest.json？我希望PWA从而开始https://example.com而不是 https://example.com/index.html.PWA可能放在不同的域上,因此start_url需要是相对的,而不是绝对的.

javascript progressive-web-apps manifest.json

Kei*_*ith

2018 07-12

14
推荐指数

2
解决办法

1万
查看次数

为什么我收到“无法加载扩展。‘content_security_policy’值无效”？

我正在尝试创建一个 chrome 扩展。我的清单文件是

{
    "name": "Alert-Beep",
    "action": {},
    "manifest_version": 3,
    "version": "0.1",
    "description": "Beeps if alert() is called",
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "permissions": [
    "activeTab",
    "scripting"
    ],
    "content_scripts": [
    {
        "matches": ["https://*.com/*"],
        "js": ["alert-beep.js"],
        "run_at": "document_start"
    }
    ]
}

Run Code Online (Sandbox Code Playgroud)

加载扩展失败并显示消息

Failed to load extension
File
~\alert-beep
Error
Invalid value for 'content_security_policy'.
Could not load manifest.

Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么？

javascript google-chrome-extension manifest.json

DeL*_*n88

lucky-day

14
推荐指数

2
解决办法

2万
查看次数

清单：第 1 行，第 1 列，Chrome 浏览器语法错误

我有一个通过 npm run build 构建的 React 应用程序。从前端到后端的 GET 和 POST 请求给出状态 200，但我收到一个奇怪的错误，这可能导致我的文件中的所有图像都没有出现在本地主机上。

我已经尝试重新安装节点，添加了 'manifest_version': 2 因为它是 chrome manifest 的当前版本。

单击此处查看屏幕截图

清单：行：1，列：1，语法错误。下面是我的 index.html 文件

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>Django React Boilerplate</title>
    <link href="/static/css/2.87ad9c80.chunk.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
        ! function(l) {
            function e(e) {
                for (var r, t, n = e[0], o = e[1], u …

Run Code Online (Sandbox Code Playgroud)

django google-chrome npm reactjs manifest.json

Kyl*_* Ma

2019 08-10

13
推荐指数

5
解决办法

3万
查看次数

如何在 React 应用程序中实现“添加到主屏幕按钮”？

我有一个具有安全连接 (https) 的已部署应用程序。
我设法使用 Google Chrome 中的此功能将其添加到我的 Android 主屏幕：

问题是，如果我不在应用程序中添加执行此操作的按钮，用户不太可能执行此操作。

经过一番研究后，我尝试将此处的代码改编为我的 React 应用程序。
所以我改变了这个：

let deferredPrompt;
const addBtn = document.querySelector(".add-button");
addBtn.style.display = "none";
window.addEventListener("beforeinstallprompt", (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = "block";

  addBtn.addEventListener("click", (e) => {
    // hide our user interface that …

Run Code Online (Sandbox Code Playgroud)

javascript manifest reactjs progressive-web-apps manifest.json

Ahm*_*rib

2022 12-27

13
推荐指数

1
解决办法

5697
查看次数

PWA manifest.json 中的 SVG 图标 - 如何为所有尺寸设置它？

现在有什么方法可以指定 PWA 的“manifest.json”中的 SVG 图标应该用于所有可能的大小？（Chrome/chromium 是我现在的主要目标。Firefox 有望跟进。）

    "icons": [
        {
            "src": "path-to-icon.svg",
            "purpose": "maskable any",
            "sizes: "???"
        }
    ],

Run Code Online (Sandbox Code Playgroud)

icons progressive-web-apps manifest.json

Leo*_*Leo

lucky-day

12
推荐指数

2
解决办法

5576
查看次数

清单start_url不由服务工作者缓存

我正在使用Lighthouse来审核我的webapp.我正在努力解决这些问题,但我仍然坚持这个:

失败:清单start_url不由服务工作者缓存.

在我的manifest.json我

"start_url": "index.html",

Run Code Online (Sandbox Code Playgroud)

在我worker.js,我缓存如下:

let CACHE_NAME = 'my-site-cache-v1';
let urlsToCache = [
    '/',
    '/scripts/app.js',
    '/index.html'
];

Run Code Online (Sandbox Code Playgroud)

哪个与我在Chrome开发工具的应用程序选项卡中看到的一致:

那么......为什么告诉我start_url没有缓存？

这是我的完整worker.js档案:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

let CACHE_NAME = 'my-site-cache-v1.1';
let urlsToCache = [
  '/',
  '/scripts/app.js',
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
    .then(function(cache) {
      console.log('Opened cache');
      return cache.addAll(urlsToCache); …

Run Code Online (Sandbox Code Playgroud)

lighthouse service-worker progressive-web-apps manifest.json

Dev*_*ate

2017 07-29

11
推荐指数

1
解决办法

7958
查看次数