###### tags: `PWA`
# [4.APP](https://web.dev/learn/pwa/app-design/)
> One of the key differences between Progressive Web Apps and classic websites and web apps is installability. This creates a standalone experience more integrated into the platform and operating system. Installation enables new flexibility and new responsibility, as we won't have a browser's user interface around our content.
> Progressive Web Apps
>
> 與經典網站和 Web 應用程序之間的主要區別之一是可安裝性。這創造了一種更加集成到平台和操作系統中的獨立體驗。安裝帶來了新的靈活性和新的責任，因為我們的內容將不再有瀏覽器的用戶界面。
This chapter focuses on some critical aspects of rendering content outside of the browser tab.
本章重點介紹在瀏覽器選項卡之外呈現內容的一些關鍵方面。
## The window
Different operating systems have different ideas about what an application window is. For example, on iPhones, an application always takes up 100% of the screen. On Android and iPads applications usually run fullscreen but it is possible to share the screen between two apps, however there is only one app instance open at a time. In contrast, on a desktop device, an application can have more than one instance open at a time. It shares the available screen real estate with all other open applications. Each application instance can be resized and positioned anywhere on the screen, even overlapping other applications.
不同的操作系統對什麼是應用程序窗口有不同的看法。例如，在 iPhone 上，應用程序始終佔據 100% 的屏幕。在 Android 和 iPad 上，應用程序通常全屏運行，但可以在兩個應用程序之間共享屏幕，但一次只能打開一個應用程序實例。相反，在桌面設備上，一個應用程序可以同時打開多個實例。它與所有其他打開的應用程序共享可用的屏幕空間。每個應用程序實例都可以調整大小並定位在屏幕上的任何位置，甚至可以與其他應用程序重疊。
## The icon
We recognize apps by their icon. That icon appears when you search for apps, in settings, wherever you launch apps, and where you see running apps.
These include:
我們通過圖標識別應用程序。當您搜索應用程序時、在設置中、啟動應用程序的位置以及看到正在運行的應用程序的位置時，該圖標都會出現。
這些包括：
* Home screen (iOS, iPadOS, Android).
* App Launcher (macOS, Android).
* Start Menu or App Menu (Windows, ChromeOS, Linux).
* Dock, TaskBar, or Multi-task panels (all operating systems).
* 主屏幕（iOS、iPadOS、Android）。
* 應用程序啟動器（macOS、Android）。
* 開始菜單或應用程序菜單（Windows、ChromeOS、Linux）。
* Dock、任務欄或多任務面板（所有操作系統）。
When creating the icon for your Progressive Web App make sure its icon is platform-agnostic, as each operating system can render icons and apply different shape masks to them, like the ones in the image below.
在為您的 Progressive Web App 創建圖標時，請確保其圖標與平台無關，因為每個操作系統都可以呈現圖標並為其應用不同的形狀遮罩，如下圖所示。
## Theming your app為您的應用設置主題
There are a number of ways you can customize app styling in your PWA's, including:
您可以通過多種方式在 PWA 中自定義應用樣式，包括：
* Theme color: defines the color of the window's title bar on the desktop and the color of the status bar on mobile devices. Using a meta tag, you can have options for different schemes, such as dark or light mode and they will be used based on the user's preference.
* Background color: defines the color of the window before the app and its CSS are loaded.
* Accent color: defines the color of built-in browser components, such as form controls.
* 主題顏色：定義桌面上窗口標題欄的顏色和移動設備上狀態欄的顏色。使用元標記，您可以為不同的方案提供選項，例如暗模式或亮模式，它們將根據用戶的偏好使用。
* 背景顏色：定義應用程序及其 CSS 加載前窗口的顏色。
* 強調色：定義內置瀏覽器組件的顏色，例如表單控件。
A desktop PWA showing theme and accent colors, and an Android PWA splash screen showing theme and background colors.
顯示主題和強調色的桌面 PWA，以及顯示主題和背景色的 Android PWA 初始屏幕。
<p style="background-color:#D2DEF9;padding:1rem;line-height:1.;color:#174ea6">
When planning your Progressive Web App user interface, beware that you can't use images, or gradients for your theme, just plain colors. It's best to pick colors without transparency, and use the <kbd>rgb</kbd> or <kbd>hsl</kbd> colors, hex codes, or named colors. Theming your app may also affect browser theming even without installing the app, such as when using the<kbd><meta name="theme-color"></kbd> element.
</p>
<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9;color:#174ea6">
在規劃 Progressive Web App 用戶界面時，請注意不能使用圖像或漸變作為主題，只能使用純色。最好選擇沒有透明度的顏色，並使用 rgb 或 hsl 顏色、十六進制代碼或命名顏色。即使沒有安裝應用程序，為您的應用程序設置主題也可能會影響瀏覽器主題，例如在使用 <kbd><meta name="theme-color"></kbd> 元素時。
</p>
## Display modes顯示模式
You can define what kind of window experience you'd like for your Progressive Web App. There are three options to choose from:
您可以為您的 Progressive Web App 定義您想要的窗口體驗類型。有以下三個選項可供選擇：
* Fullscreen
* Standalone
* Minimal User Interface
* 全屏
* 單機
* 最小的用戶界面
<div style="background-color:#D2DEF9;padding:1rem;line-height:1.9;margin-bottom:1rem">
If a particular display mode isn't supported or otherwise can't be used to display your PWA, it'll fall back to the next available display mode. Fullscreen will fall back to standalone, standalone will fall back to minimal user interface, and minimal user interface will fall back to browser, the default. The browser display mode doesn't show up as its own window, but rather displays your PWA in a tab in the browser it was installed from, like a web bookmark on a home screen.
</div>
<div style="background-color:#D2DEF9;padding:1rem;line-height:1.9;margin-top:1rem">
如果特定顯示模式不受支持或無法用於顯示您的 PWA，它將回退到下一個可用的顯示模式。全屏將回退到獨立，獨立將回退到最小用戶界面，最小用戶界面將回退到瀏覽器，這是默認設置。瀏覽器顯示模式不會顯示為它自己的窗口，而是在安裝它的瀏覽器的選項卡中顯示你的 PWA，就像主屏幕上的網絡書籤一樣。
</div>
## Fullscreen experience全屏體驗
A fullscreen experience is suitable for immersive experiences, such as games, VR, or AR experiences. It's currently only available on Android devices, and it hides the status bar and the navigation bar, giving your PWA 100% of the screen for your content.
全屏體驗適用於沉浸式體驗，例如游戲、VR 或 AR 體驗。它目前僅在 Android 設備上可用，它隱藏了狀態欄和導航欄，讓你的 PWA 100% 的屏幕顯示你的內容。
On desktop and iPadOS, fullscreen PWAs are not supported; however, you can use the [Fullscreen API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API) from within your PWA to display your app fullscreen at a user's request.
在桌面和 iPadOS 上，不支持全屏 PWA；但是，您可以在 PWA 中使用全屏 API 來應用戶請求全屏顯示您的應用。
## Standalone experience 單機體驗
The most common option for a Progressive Web App, standalone mode displays your PWA in an OS-standard window without any browser navigation UI. The window may also include a browser-controlled menu where the user can:
漸進式 Web 應用程序最常見的選項，獨立模式在沒有任何瀏覽器導航 UI 的操作系統標準窗口中顯示您的 PWA。該窗口還可能包括一個瀏覽器控制的菜單，用戶可以在其中：
* Copy the current URL.
* See, apply, or disable browser extensions.
* See and change permissions.
* Check current origin and the SSL certificate.
* 複製當前網址。
* 查看、應用或禁用瀏覽器擴展。
* 查看和更改權限。
* 檢查當前來源和 SSL 證書。
The title bar may also show permissions and hardware usage replacing the omnibox or URL bar when the PWA renders in the tab.
當 PWA 在選項卡中呈現時，標題欄還可能顯示權限和硬件使用情況，以替換多功能框或 URL 欄。
*The images above show how a PWA displays in standalone mode on the desktop in Microsoft Edge, and Chrome.*
*上圖顯示了 PWA 如何在 Microsoft Edge 和 Chrome 的桌面上以獨立模式顯示。*
On mobile devices, a standalone PWA experience will create a standard screen that keeps the status bar visible, so the user can still see notifications, time, and battery level. It often does not have any browser-controlled menu like desktop standalone experiences may include.
在移動設備上，獨立的 PWA 體驗將創建一個標準屏幕，使狀態欄保持可見，因此用戶仍然可以看到通知、時間和電池電量。它通常沒有任何瀏覽器控制的菜單，就像桌面獨立體驗可能包括的那樣。
Some browsers on Android create a fixed and silent notification while the PWA is in the foreground that lets the user copy the current URL or other options.
當 PWA 位於前台時，Android 上的某些瀏覽器會創建一個固定的靜默通知，讓用戶複製當前 URL 或其他選項。
## Minimal user interface 最小的用戶界面
This mode is available for Progressive Web Apps on Android and desktop operating systems. When you use it, the browser rendering your PWA will show a minimal user interface to help the user navigate within the application.
此模式適用於 Android 和桌面操作系統上的 Progressive Web Apps。當您使用它時，呈現您的 PWA 的瀏覽器將顯示一個最小的用戶界面，以幫助用戶在應用程序中導航。
On Android, you will get a title bar that renders the current
在 Android 上，您將獲得一個標題欄，它呈現當前
<kbd> < title > </kbd> element and the origin with a small drop-down menu available. On desktop, you will get a set of buttons in the title bar to help with navigation, including a back button and a control that swaps between a stop and a reload action, based on the current loading status.
<kbd> < title > </kbd>元素和原點，帶有可用的小下拉菜單。在桌面上，您將在標題欄中獲得一組按鈕來幫助導航，包括一個後退按鈕和一個根據當前加載狀態在停止和重新加載操作之間切換的控件。
<div style="padding:1rem;background-color:#fff5e3">
<div style="display:flex">
:warning:
<p style="color:#c34900;margin-top:-1.5em">
Warning
</p>
</div>
<p style="color:#c34900;">There are countless combinations of screen sizes, capabilities, devices, and contexts a user may be browsing with, and as a designer, you do not control what that final mix will be.
</p>
</div>
<div style="padding:1rem;background-color:#fff5e3;margin-top:1rem">
<div style="display:flex">
:warning:
<p style="color:#c34900;margin-top:-1.5em">
警告
</p>
</div>
<p style="color:#c34900;">
用戶可能瀏覽的屏幕尺寸、功能、設備和上下文有無數種組合，作為設計師，您無法控制最終的組合。
</p>
</div>
## Optimizing design for desktop優化桌面設計
When you design a Progressive Web App to work on a desktop, you need to think about the endless possibilities for window size as compared to being in the browser's tab or as an app in a mobile operating system.
當你設計一個在桌面上運行的漸進式 Web 應用程序時，你需要考慮窗口大小的無限可能性，與在瀏覽器的選項卡中或作為移動操作系統中的應用程序相比。
In [Chapter 3](https://web.dev/learn/pwa/foundations/), we mentioned mini-mode: a desktop app can be as small as 200 by 100 pixels. This window will use the <kbd> < title > </kbd> element's content in your HTML as the title of the window. That content is also rendered when you alt-tab"** between apps and in other places.
在第 3 章中，我們提到了迷你模式：桌面應用程序可以小到 200 x 100 像素。該窗口將使用 HTML 中的<kbd> < title > </kbd> 元素內容作為窗口的標題。當您在應用程序之間和其他地方按 alt-tab"** 時，也會呈現該內容。
Pay attention to your HTML's <kbd> < title > </kbd> element and rethink how you use it. The <kbd> < title > </kbd> isn't just for SEO or to render just the first characters in a browser's tab; it will be part of the user experience of your standalone desktop window.
注意 HTML 的 <kbd> < title > </kbd> 元素並重新考慮如何使用它。 <kbd> < title > </kbd> 不僅用於 SEO 或僅呈現瀏覽器選項卡中的第一個字符；它將成為您獨立桌面窗口用戶體驗的一部分。
<div style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
If you are developing your app using a client-side library, such as React or Vue, don't forget to change the <kbd> < title > </kbd> to some practical value when moving between sections or routes of your app. It's time to reimagine the <kbd> < title > </kbd>!
</div>
<div style="background-color:#D2DEF9;padding:1rem;line-height:1.9;margin-top:1rem">
如果您正在使用客戶端庫（例如 React 或 Vue）開發您的應用程序，請不要忘記在您的應用程序的各個部分或路線之間移動時將 <kbd> < title > </kbd> 更改為一些實用值。是時候重新構想 <kbd> < title > </kbd> 了！
</div>
## CSS best practices CSS 最佳實踐
All your experience with [CSS layout, design, and animation](https://web.dev/learn/css/) is valid when your content is rendered in its standalone experience. However, there are a couple of tips and tricks to making the experience better for a standalone window.
當您的內容以其獨立體驗呈現時，您在 CSS 佈局、設計和動畫方面的所有經驗都是有效的。但是，有一些提示和技巧可以使獨立窗口的體驗更好。
<div style="padding:1rem;background-color:#faf6fe;color:#6001ff;">
<span style="display:flex">
:bulb:
<p style="color:#6001ff;margin-top:-1.5em">
Gotchas陷阱
</p>
</span>
<p style="color:#6001ff;">
Remember that CSS only defines styles for the content of the PWA; later in this course, we will see how to specify style declarations for the window around your content, such as properties in the [web app manifest](https://web.dev/learn/pwa/web-app-manifest/) .
</p>
</div>
<div style="padding:1rem;background-color:#faf6fe;margin-top:1rem;color:#6001ff;">
<span style="display:flex">
:bulb:
<p style="color:#6001ff;margin-top:-1.5em">
Gotchas陷阱
</p>
</span>
<p style="color:#6001ff;">
請記住，CSS 僅為 PWA 的內容定義樣式；在本課程的後面，我們將了解如何為您的內容周圍的窗口指定樣式聲明，例如 Web 應用程序清單中的屬性。
</p>
</div>
## Media Queries
The first [media query](https://web.dev/learn/design/media-queries/) that you can take advantage of in your PWA is the <kbd> display-mode </kbd> property accepting the values <kbd>browser</kbd>,<kbd> standalone</kbd>,<kbd> minimal-ui </kbd> , or fullscreen.
您可以在 PWA 中利用的第一個媒體查詢是接受值<kbd>browser</kbd>、<kbd> standalone</kbd>、<kbd> minimal-ui </kbd> 或 fullscreen 的 <kbd> display-mode </kbd> 屬性。
This media query applies different styles to each mode. For example, you could render an [installation invitation](https://web.dev/learn/pwa/installation/) only when in browser mode, or render one particular piece of information only when the user uses your app from the system icon. This might include adding a back button to use when your app launches in standalone mode.
此媒體查詢對每種模式應用不同的樣式。例如，您可以僅在瀏覽器模式下呈現安裝邀請，或者僅在用戶通過系統圖標使用您的應用程序時呈現一條特定信息。這可能包括添加一個後退按鈕，以便在您的應用程序以獨立模式啟動時使用。
```
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen),
(display-mode: minimal-ui) {
}
```
<div style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
Users expect apps to integrate with the platform, so consider offering dark and light modes using <kbd>prefers-colors-scheme </kbd> and <kbd>honoring prefers-reduced-motion </kbd> media queries to disable or reduce transitions and animations.
</div>
<div style= "background-color:#D2DEF9;padding:1rem;line-height:1.9;margin-top:1rem;" >
用戶希望應用程序與平台集成，因此請考慮使用偏好顏色方案提供深色和淺色模式，並遵循偏好減少運動的媒體查詢以禁用或減少過渡和動畫。
</div>
## The app experience應用體驗
When the users are using an installed PWA, they expect app behavior. While it's not simple to define what it means, the default web behavior doesn't give the best experience in some situations.
當用戶使用已安裝的 PWA 時，他們期望應用行為。雖然定義它的含義並不簡單，但默認的 Web 行為在某些情況下並不能提供最佳體驗。
## User selection 用戶選擇
Content is generally selectable with a mouse or pointer, or a press and hold touch gesture. While helpful for content, it doesn't provide the best experience for navigation items, menus, and buttons within your PWA.
內容通常可用鼠標或指示器或按住觸摸手勢來選擇。雖然對內容有幫助，但它不能為 PWA 中的導航項、菜單和按鈕提供最佳體驗。
Therefore, it's a good idea to disable user selection on these elements using
<kbd> user-select: none </kbd> and it's <kbd> -webkit- </kbd> prefix version:
```
.unselectable {
user-select: none;
}
```
因此，最好使用以下方法禁用用戶對這些元素的選擇
用戶選擇：無，它是 -webkit- 前綴版本：
<div style="padding:1rem;background-color:#faf6fe;color:#6001ff;">
<span style="display:flex">
:bulb:
<p style="color:#6001ff;margin-top:-1.5em">
Gotchas陷阱
</p>
</span>
<p style="color:#6001ff;">
User selection is a vital feature of every web app for usability and accessibility. Do not disable user selection on all content, only on UI elements when not doing so creates a poor or unexpected experience.
</p>
</div>
<div style="padding:1rem;background-color:#faf6fe;color:#6001ff;margin-top:1rem">
<span style="display:flex">
:bulb:
<p style="color:#6001ff;margin-top:-1.5em">
Gotchas陷阱
</p>
</span>
<p style="color:#6001ff;">
用戶選擇是每個網絡應用程序的可用性和可訪問性的重要特徵。不要在所有內容上禁用用戶選擇，僅在 UI 元素上禁用，否則會造成糟糕或意外的體驗。
</p>
</div>
## Accent color強調色
In your PWA, you can define a color to match your brand within HTML form controls using the property <kbd> accent-color </kbd>
在您的 PWA 中，您可以使用屬性 accent-color 在 HTML 表單控件中定義一種顏色以匹配您的品牌
* [accent-color](https://web.dev/state-of-css-2022/#accent-color)
## System fonts
If you want an element, like dialogs or messages, to match the user's default platform font, you can use the following font family:
如果您希望某個元素（如對話框或消息）與用戶的默認平台字體相匹配，您可以使用以下字體系列：
```
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
```
## Pull to refresh拉動刷新
Modern mobile browsers, such as Google Chrome and Safari, have a feature that refreshes the page when it is pulled down. On some browsers, such as Chrome on Android, that behavior is also enabled on standalone PWAs.
現代移動瀏覽器，例如 Google Chrome 和 Safari，具有在下拉時刷新頁面的功能。在某些瀏覽器上，例如 Android 上的 Chrome，獨立 PWA 也會啟用該行為。
You may want to disable this action. For example when providing your own gesture management or refresh action, or if there is a possibility that your user will trigger the action unintentionally.
您可能想要禁用此操作。例如，當提供您自己的手勢管理或刷新操作時，或者如果您的用戶有可能無意中觸發該操作。
It's possible to disable this behavior by using
可以通過使用禁用此行為
<kbd>overscroll-behavior-y: contain:</kbd> .
```
body {
overscroll-behavior-y: contain;
}
```
## Safe areas 安全區域
Some devices do not have unobstructed rectangular screens; instead, their screen may be a different shape, like a circle, or have portions of the screen that can't be used, like the iPhone 13's notch. In these cases, some browsers will expose [environment variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/env) with safe areas that can display content.
有些設備沒有暢通無阻的矩形屏幕；相反，他們的屏幕可能是不同的形狀，比如圓形，或者屏幕的某些部分無法使用，比如 iPhone 13 的劉海屏。在這些情況下，一些瀏覽器會公開帶有可以顯示內容的安全區域的環境變量。
If you want full access to the screen, even the invisible area, to render your color or image, include <kbd>viewport-fit=cover </kbd> in the content of your <kbd> < meta name="viewport" > </kbd> tag. Then use the <kbd>safe-area-inset-* </kbd> environment variables to extend your content safely into those areas.
如果您想要完全訪問屏幕，甚至是不可見區域，以呈現您的顏色或圖像，請在您的 <kbd> < meta name="viewport" > </kbd> 標籤的內容中包含 <kbd>viewport-fit=cover </kbd>。然後使用 <kbd>safe-area-inset-* </kbd>
環境變量將您的內容安全地擴展到這些區域。
<div style="padding:1rem;background-color:#fce8e8">
<div style="display:flex">
:warning:
<p style="color:#a50e0e;margin-top:-1.5em">
Caution警告
</p>
</div>
<p style="color:#a50e0e;">
When you apply <kbd>viewport-fit=cover </kbd> , remember that you can now render pixels behind rounded corners and notches, so you should always use safe margins or paddings for the critical content and interactive elements.
</p>
</div>
<div style="padding:1rem;background-color:#fce8e8;margin-top:1rem">
<div style="display:flex">
:warning:
<p style="color:#a50e0e;margin-top:-1.5em">
Caution警告
</p>
</div>
<p style="color:#a50e0e;">
當您應用 <kbd>viewport-fit=cover </kbd> 時，請記住您現在可以在圓角和凹口後面渲染像素，因此您應該始終為關鍵內容和交互元素使用安全的邊距或填充。
</p>
</div>
### Resources
* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/)
* [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/)
* [prefers-reduced-motion: Sometimes less movement is more](https://web.dev/prefers-reduced-motion/)
* [env() CSS function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/env)
* [CSS Accent Color](https://web.dev/accent-color/)
* [控制您的滾動：自定義下拉刷新和溢出效果](https://hackmd.io/0af2IevvSB-LjZ_cISWbzA)
* prefers-color-scheme: 你好黑暗，我的老朋友
* [更喜歡減少運動：有時運動越少越好](https://hackmd.io/OYXHnQxDQ1WVEnzTUa4ZmA)
* env() CSS 函數
* CSS 強調色
* [Using Window Controls Overlay](https://dev.to/azure/11-displaying-content-more-like-an-app-10md)
Sign in with Wallet
Connect another wallet