如何适配macOS的Safari将网站保存到应用的功能

上一篇文章介绍了如何将网站保存为应用程序。Safari的网站应用程序有着与macOS无缝协同的配合、更好的性能。那么作为网站主如何将自己的网站适配macOS的新特性呢？

这个文章主要来介绍一下如何将你的网站适配Safari的macAPP。

如果您的网站有自己的导航控件，或者您的网站上下文中不需要导航控件，您可能不想显示工具栏。这称为独立显示模式。iOS 上的默认行为与 macOS 不同。已添加到主屏幕的网站将在默认浏览器中打开。这为用户提供了一种直接从主屏幕访问常用站点的快速方法。在iOS和iPadOS上添加到主屏幕的网站，以独立显示模式，将成为主屏幕Web应用程序。主屏幕 Web 应用程序在 iOS 上具有独立的、类似应用程序的体验，具有独立于浏览器的 cookie 和存储。没有浏览器提供的 UI，例如工具栏，所有内容都来自网页。如果您希望您的网站能够在 iOS 上使用 Web Push 和徽章，那么您应该使用独立显示模式。

添加网页清单

和我们之前做webapp一样，我们需要创建一个网页清单，用于专门做webapp的适配。来设置显示模式。我将向我的网站添加一个 Web 应用程序清单。 Web 应用程序清单是网站与系统传达 Web 应用程序相关功能的预期行为的一种方式。要将 Web 应用程序清单添加到您的网站，只需将带有 rel=”manifest” 的链接添加到 HTML 头部的 JSON 文件即可。我将我的命名为“manifest.json”。

<！-- index.html -->
＜！DOCTYPE html>
<html>
<head>
<title>Browser Pets Al1 Pets Welcome</title> <link rel="manifest" href="manifest.json"> </head>
<body>
<h1>Browser Pets</h1>
</body>
</htm1>

在相应的清单文件中，添加适用于您的网站的键和值。首先，我将设置名称，因为这是我想要用作网络应用程序名称的名称，而不是网站标题，因为我的名称很长。

json

要更改显示模式，我将显示设置为“独立”。在 macOS 上，Web 应用程序不会有工具栏。在 iOS 和 iPadOS 上，该网站将在主屏幕 Web 应用程序中打开，而不是在默认浏览器中打开。

现在，让我们介绍一下在 Web 应用程序中单击链接的打开位置。所有 Web 应用程序都有关联的范围。范围内的链接在 Web 应用程序中打开。默认范围是用于创建 Web 应用程序的网页的主机。您可以使用 Web 应用程序清单进一步细化范围，将其限制为网站上的特定路径。例如，当我单击 Browser Pets Web 应用程序中的此链接转到另一个页面“webkittens”时，您会注意到我们停留在 Web 应用程序中，因为 Web Kittens 只是我们网站上 example.com 下的另一个页面。现在，当我单击 apple.com 的链接时，该链接将在我的默认浏览器中打开，因为它超出了 example.com 的范围。如果我希望在默认浏览器中打开 Web Kittens 的链接（例如 apple.com 的链接），那么我可以调整 Web 应用程序清单中的范围。

跳转清单范围

要调整范围，我首先添加“start_url”。 start_url 是首次打开 Web 应用程序时加载的 URL。这将打开/browserpets/的主页。现在我将添加范围。假设我想将/browserpets/和Web Kittens分离到不同的网络应用程序中，那么我可以将范围限制为仅/browserpets/。范围是清单 URL 的子目录。在本例中，范围将为 example.com/browserpets。该范围内的任何链接都将保留在 Web 应用程序中，而范围之外的任何链接都将在默认浏览器中打开。在 iOS 上的主屏幕 Web 应用程序中，范围之外的链接将在 Safari 视图控制器中打开。

让网站支持通知

如果想要支持iOS、iPadOS、macOS通知，可以参考：

推送API

在网络应用程序和浏览器中发送网络推送通知

更改网站标题栏颜色

macOS程序的网站标题栏颜色与meta配置项目无关，跟body背景颜色有关。

if (window.matchMedia('(display-mode: standalone)').matches) {
      const body = document.body;
      // 检查body是否存在
      if (body) {
          body.style.backgroundColor = "RRGGBB"; // 用你希望的颜色替换color
      } else {
          console.error("document.body不存在");
      }
  }