最低 PWA 要求 - 将网页转变为移动/桌面上可安装的 Web 应用程序至少需要做什么？

Question

我有一个网页，我想在移动设备（也可能是桌面）上以全屏或独立方式显示，没有任何浏览器控件 - 例如地址栏和后退/刷新/等按钮。

将其转换为 PWA（渐进式 Web 应用程序）至少需要做什么，以便当我在移动设备上“添加到主屏幕”时，它将创建一个图标，单击该图标时，它将以全屏或独立方式打开页面- 没有任何浏览器控件。无需进行任何缓存，无需在线即可使用页面。

它也可以作为 Chrome 应用程序在台式机/笔记本电脑操作系统上运行吗？

Answer 1

你需要三样东西：

1. 通过 HTTPS 提供页面
2. 至少 1 个 PNG 图标，尺寸至少为 144 像素 x 144 像素
3. 以下最小清单文件：

{
  "name": "MyApp",
  "start_url": "./",
  "icons": [
    {
      "sizes": "512x512",
      "src": "./MyAppIcon-512x512.png",
      "type": "image/png"
    }
  ],
  "//display": "standalone",
  "display": "fullscreen"
} 

注意 - (1.) 您还可以从本地主机通过 HTTP 提供服务。从技术上讲，要求 (1.) 是从受信任的来源提供页面，该来源是网络上的 HTTPS 或本地主机上的 HTTP/HTTPS

注意 - (2. & 3.) 在示例清单中，我们假设 PNG 图标为 512x512；名为 MyAppIcon-512x512.png ，与 manifest.json 和 index.html 位于同一目录中 - 否则您应该适当更改路径 - 相对于 manifest.json 的位置或使用绝对路径路径。

注意 - 当然你还应该有一个

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

在你的 index.html

的头部

自 2024 年 8 月起，这将在 iOS 和 Android 上作为全屏/独立应用程序运行，并在运行基于 Crome/Chromium 的浏览器的任何桌面操作系统上作为 Chrome 应用程序运行。在 iOS 上，全屏似乎与独立相同 - 即，它始终显示状态栏。