From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../index.html" | 218 +++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 "files/zh-cn/web/progressive_web_apps/\346\267\273\345\212\240\345\210\260\344\270\273\345\261\217\345\271\225/index.html" (limited to 'files/zh-cn/web/progressive_web_apps/添加到主屏幕') diff --git "a/files/zh-cn/web/progressive_web_apps/\346\267\273\345\212\240\345\210\260\344\270\273\345\261\217\345\271\225/index.html" "b/files/zh-cn/web/progressive_web_apps/\346\267\273\345\212\240\345\210\260\344\270\273\345\261\217\345\271\225/index.html" new file mode 100644 index 0000000000..a0915ea9d2 --- /dev/null +++ "b/files/zh-cn/web/progressive_web_apps/\346\267\273\345\212\240\345\210\260\344\270\273\345\261\217\345\271\225/index.html" @@ -0,0 +1,218 @@ +--- +title: 添加到主屏幕 +slug: Web/Progressive_web_apps/添加到主屏幕 +tags: + - PWA + - 图标 + - 服务进程 + - 添加到主屏幕 + - 清单 + - 渐进式Web应用 +translation_of: Web/Progressive_web_apps/Add_to_home_screen +--- +

添加到主屏幕（A2HS）添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。本指南说明了A2HS的使用方式，以及作为开发人员要使您的用户利用A2HS所需做的事情。

+ +

为什么选择A2HS？

+ +

A2HS被认为是渐进式Web应用程序哲学的一部分—为Web应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。

+ +

哪些浏览器支持A2HS？

+ +

Mobile Chrome / Android Webview 从31版开始支持A2HS，Opera for Android从32版开始支持，Firefox for Android从58版开始支持。

+ +

如何使用？

+ +

我们已经编写了一个非常简单的示例网站（观看我们的在线演示，并查看源代码)，该网站虽然功能不多，但是开发时使用了必要的代码，也可以将其添加到主屏幕中，并且service worker使其可以脱机使用。这个示例展示了一系列的狐狸图片。

+ +

如果您有适用于Android的Firefox，使用它导航到我们的示例：https://mdn.github.io/pwa-examples/a2hs/。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标—这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。

+ +

+ +

点击此按钮将显示一个确认横幅—按下大“+ 添加到主屏幕”按钮即可完成操作，将应用添加到主屏幕。（注意：在Android 8及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）

+ +

+ +

如果您可以使用Mobile Chrome，则体验会略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。

+ +

+ +
+

注意：您可以在“Web App安装横幅”一文中找到有关Chrome安装横幅的更多信息。

+
+ +

如果您选择不将其添加到主屏幕，则可以稍后使用Chrome主菜单中的添加到主屏幕图标添加。

+ +

无论使用哪种浏览器，当您选择将应用程序添加到主屏幕时，您都会看到它与短标题一起出现，就像原生应用程序一样。

+ +

+ +

点按此图标可以将其打开，但是作为全屏应用程序，您将不再看到其周围的浏览器用户界面。

+ +

如何使应用程序支持A2HS？

+ +

要将您的应用添加到主屏幕，它需要满足以下条件：

+ + + +

Manifest

+ +

web manifest 以标准JSON格式编写，应放置在应用程序目录中的某个位置（最好是在根目录中），名称为somefilename.webmanifest(我们选择 manifest.webmanifest)。它包含多个字段，这些字段定义有关Web应用程序及其行为的某些信息。

+ +
+

注意：.webmanifest扩展名是在规范的“媒体类型注册”部分中指定的，但通常浏览器将支持带有其他适当扩展名的清单，例如：.json。

+
+ +

A2HS所需的字段如下：

+ + + +

我们的示例应用程序的manifest如下所示：

+ +
{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}
+ +

合适的图标

+ +

如以上manifest所示，我们包括一个192 x 192像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome已经支持WebP格式）.

+ +

请注意，每个图标对象中的 type 成员都指定了该图标的mimetype，因此浏览器可以快速读取该图标的类型，然后将其忽略，并在不支持该图标时采用其他图标。

+ +

在设计图标方面，您应该遵循与任何Android图标相同的最佳做法（请参阅Android图标设计指南）。

+ +

将HTML链接到manifest

+ +

要完成manifest的设置，您需要从应用程序主页的 HTML 中引用它：

+ +
<link rel="manifest" href="manifest.webmanifest">
+ +

一旦支持 manifest，支持 A2HS 的浏览器就会知道在哪里查找它。

+ +

A2HS没有给你什么？

+ +

请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问—不会将应用程序的资产和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。 为了使你的应用离线运行，你必须使用Service Worker API来离线存储资源，如果需要，还可以使用 Web storage 或 IndexedDB 来存储其数据。

+ +

在示例应用程序中，我们仅使用了一个service worker来存储所有必需的文件。service worker使用index.js 文件中的最终的代码块在网站上注册。然后，我们使用 Cache API 缓存网站的所有资产，并使用 sw.js 文件中的代码从缓存而不是网络中为它们提供服务。

+ +

桌面上的A2HS

+ +

虽然最初旨在改善移动操作系统上的用户体验，但人们也提出了使PWA也可以安装在桌面平台上的趋势。

+ +
+

注意：在撰写本文时，仅在较新版本的Chrome（在Windows中默认情况下，在macOS上的＃enable-desktop-pwas标志开启后）中支持以下功能。

+
+ +

添加安装按钮

+ +

为了使PWA可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：

+ +
<button class="add-button">Add to home screen</button>
+ +

然后，我们给它一些简单的样式：

+ +
.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+ +

用于处理安装的JavaScript

+ +

在index.js文件的底部，我们添加了一些JavaScript来处理安装。首先，我们声明一个deferredPrompt变量（我们将在后面解释），获得对安装按钮的引用，并初始设置为display: none：

+ +
let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';
+ +

我们最初隐藏该按钮是因为PWA必须遵循A2HS标准才能安装。发生这种情况时，支持的浏览器将触发beforeinstallprompt事件。 然后，我们可以使用以下处理程序来处理安装：

+ +
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 shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});
+ +

所以我们在这里：

+ + + +

点击处理程序包含以下步骤：

+ + + +

So when the button is clicked, the install prompt appears.

+ +

+ +

如果用户选择安装，则将安装该应用程序（可作为独立的桌面应用程序使用），并且不再显示“安装”按钮（如果已经安装了该应用程序，则将不再触发onbeforeinstallprompt事件）。当您打开应用程序时，它将显示在其自己的窗口中：

+ +

+ +

如果用户选择“取消”，则应用程序的状态将返回到单击按钮之前的状态。

+ +
+

注意：本部分的代码主要来自Pete LaPage的应用安装横幅/添加到主屏幕。

+
+ +

其他

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
-- cgit v1.2.3-54-g00ecf