###### tags: `PWA`

# [3.Foundations](https://web.dev/learn/pwa/foundations/)

*All Progressive Web Apps are, at their core, modern websites, so it's important that your website has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance.*

*所有 Progressive Web Apps 的核心都是現代網站，因此您的網站在響應式設計、移動和一切優先、內在設計和 Web 性能方面擁有堅實的基礎非常重要。*

## A solid foundation堅實的基礎

A solid foundation is the base requirement for building great PWAs. To implement this foundation you need to design and code for the constraints of the web using a couple of principles:
堅實的基礎是構建出色 PWA 的基本要求。要實現此基礎，您需要使用以下幾個原則針對 Web 的約束進行設計和編碼：

* Use mobile as a focusing constraint. Make sure each view of your design focuses only on the essential content and interactions.
* Emphasize content and core functionality in the design process.
* Progressively enhance when needed. Start by building a component's core content and functionality with the most straightforward, most widely available tools. Make it accessible. Then, test for advanced features you'd like to use and enhance your component with them.

* Offer a fast and good user experience focused on user-centric web performance metrics, get real user metrics, and push performance for all your users, no matter their network connection, input type, CPU, or GPU power.
* 使用手機作為聚焦約束。確保設計的每個視圖只關注基本內容和交互。
* 在設計過程中強調內容和核心功能。
* 需要時逐步加強。首先使用最直接、最廣泛使用的工具構建組件的核心內容和功能。使其易於訪問。然後，測試您想要使用的高級功能並使用它們增強您的組件。
* 提供快速且良好的用戶體驗，專注於以用戶為中心的 Web 性能指標，獲取真實的用戶指標，並為所有用戶推送性能，無論他們的網絡連接、輸入類型、CPU 或 GPU 功率如何。

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
Accessibility is key for a successful PWA. Please follow these guidelines to make sure your app is accessible to anyone, anywhere.
</p>
<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
可訪問性是 PWA 成功的關鍵。請遵循這些指南，以確保任何人在任何地方都可以訪問您的應用程序。
</p>

By following these principles and enhancing with modern patterns and web features, you can create great and fast experiences with truly intrinsic designs. Designs that are powered by constraints instead of pixels, allowing every user access to your content and core functionality in a way that's best suited for their particular browsing context.
通過遵循這些原則並使用現代模式和 Web 功能進行增強，您可以通過真正的內在設計創造出色而快速的體驗。由約束而不是像素驅動的設計，允許每個用戶以最適合其特定瀏覽上下文的方式訪問您的內容和核心功能。

## Responsive web design響應式網頁設計

Since Ethan Marcotte's 2010 A List Apart article, [Responsive Web Design](https://alistapart.com/article/responsive-web-design/), designers and developers have been encouraged to create experiences that flex, making user interfaces that work across a spectrum of screen sizes and devices.
自 Ethan Marcotte 2010 年的 A List Apart 文章“響應式網頁設計”以來，設計師和開發人員一直被鼓勵創造靈活的體驗，使用戶界面能夠在各種屏幕尺寸和設備上工作。

Somewhere along the way, though, that became shortened to mobile, tablet, and desktop sizes, with widths heavily influenced by iOS screen sizes. With modern CSS and a renewed focus on responsive design's original intent, we can put the squish back in squishy sites.
不過，在某些時候，它被縮短為手機、平板電腦和桌面尺寸，寬度受 iOS 屏幕尺寸的影響很大。借助現代 CSS 和對響應式設計的初衷的重新關注，我們可以將 squish 放回 squishy 站點中。

Responsive web design introduces three technical ingredients:
響應式網頁設計引入了三個技術要素：

* Fluid grids
* Flexible media
* Media queries

Ethan concludes that these technical requirements aren't enough; the way forward also requires a different way of thinking.
Ethan 得出結論，這些技術要求還不夠；前進的道路還需要不同的思維方式。
## The mobile user myth移動用戶神話

In the early days of responsive design assumptions were made in the name of making sites easier to design. For example, small experiences were for phones, and they had a 320px width, medium experiences were for tablets, and they had a 1024px width, and anything larger than that was for desktops. Small screens had touch abilities, large screens didn't. Phone users were rushed and distracted and therefore needed a "light" experience.
在早期的響應式設計中，假設是為了讓網站更容易設計。例如，小型體驗適用於手機，寬度為 320px，中等體驗適用於平板電腦，寬度為 1024px，大於此寬度的適用於台式機。小屏幕有觸摸功能，大屏幕沒有。電話用戶匆忙而分心，因此需要“輕鬆”的體驗。

None of this is true; they are mobile myths perpetuated by the assumption that a user's needs are fundamentally different based solely on screen size or device type. This doesn't hold up to scrutiny.
這些都不是真的；它們是移動神話，是由於假設用戶的需求僅基於屏幕尺寸或設備類型而根本不同。這經不起推敲。

Take, for example, a social network PWA that you can install today on mobile and desktop. On desktop, many users can keep a narrow window with the feed at one side of the screen while working, and assuming they are on a mobile device because of the available width would be wrong.
以您今天可以在移動設備和桌面設備上安裝的社交網絡 PWA 為例。在台式機上，許多用戶在工作時可以在屏幕的一側保持一個窄窗口和提要，並且由於可用寬度而假設他們在移動設備上是錯誤的。

The PWA world that is out of the browser's tab is even adding new challenges to a responsive design world, such as the mini-mode and working with foldable devices.
瀏覽器選項卡之外的 PWA 世界甚至給響應式設計世界增加了新的挑戰，例如迷你模式和使用可折疊設備。

## Mini-mode迷你模式
With a PWA installed on a desktop device, a window can get really small; smaller than a browser's window, smaller than a mobile viewport. This is something new on the web: we can support a mini-mode, a window that can be as small as 200x100 CSS pixels.
在桌面設備上安裝 PWA 後，窗口會變得非常小；小於瀏覽器窗口，小於移動視口。這是網絡上的新事物：我們可以支持迷你模式，一個可以小到 200x100 CSS 像素的窗口。

When creating a PWA these days, it's a good idea to think about what to offer in mini-mode, thanks to responsive web design, such as just control buttons on a music player, dashboard information, or quick actions.
如今，在創建 PWA 時，考慮在迷你模式下提供什麼是個好主意，這要歸功於響應式網頁設計，例如音樂播放器上的控制按鈕、儀表板信息或快速操作。

On desktop, a PWA can be rendered in a smaller window than the smallest window you've ever designed for the browser. It adds a new breakpoint for your responsive web design: the mini-mode.
在桌面上，PWA 可以在比您為瀏覽器設計的最小窗口更小的窗口中呈現。它為您的響應式網頁設計添加了一個新的斷點：迷你模式。

## Foldables and hybrid可折疊和混合動力

Foldable and hybrid devices are also common these days:
可折疊和混合設備如今也很常見：

* Small clamshell phones.
* Foldable devices that can be used as phones or tablets.
* Laptops that can be transformed into tablets.
* Tablets that can act as laptops with keyboard and trackpad.
* Phones then can be converted to desktop with a hub.
* 小型翻蓋手機。
* 可用作手機或平板電腦的可折疊設備。
* 可以轉換為平板電腦的筆記本電腦。
* 然後可以使用集線器將電話轉換為台式機。

While the challenge exists for every website, with a Progressive Web App you are in control and responsible for the window when the app is installed. Therefore, your design should react and offer the best experience in every context.
雖然每個網站都存在挑戰，但使用漸進式 Web 應用程序時，您可以控制並負責安裝應用程序時的窗口。因此，您的設計應該在各種情況下做出反應並提供最佳體驗。

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
It's becoming common to transfer an app's navigation between devices, so your PWA can be rendered in a smartwatch after receiving notification; the navigation can be transferred to a phone, and then to a laptop. Supporting all modes and devices is key to avoiding user frustration.
</p>
<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
雖然每個網站都存在挑戰，但使用漸進式 Web 應用程序時，您可以控制並負責安裝應用程序時的窗口。因此，您的設計應該在各種情況下做出反應並提供最佳體驗。
</p>

## Everything first 一切第一

But where should you get started? Mobile first, content first, offline first? When designing for the flexibility of the web, which is it? Well, the answer is yes, everything first. The term mobile first has been interpreted in many ways since Luke Wroblewski first coined it in 2009: from emulating platform-specific UI and UX patterns on the web to building mobile apps before building web apps to just using min-width media queries and calling it a day. Its original intent, though, is this: mobile forces you to focus. As Luke said:

但是你應該從哪裡開始呢？移動優先、內容優先、線下優先？當為 Web 的靈活性而設計時，它是什麼？好吧，答案是肯定的，一切都在第一位。自 Luke Wroblewski 於 2009 年首次創造移動優先一詞以來，該術語已被以多種方式解釋：從在 Web 上模擬平台特定的 UI 和 UX 模式到在構建 Web 應用程序之前構建移動應用程序，再到僅使用最小寬度媒體查詢並調用它一天。不過，它的初衷是：移動迫使你集中註意力。正如盧克所說：

> Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480-pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs Mobile First, the result is an experience focused on the key tasks users want to accomplish without the detours and interface debris that litter today's desktop-accessed websites. That's a good user experience and good for business.
>
> Luke Wroblewski

> 移動設備要求軟件開發團隊只關注應用程序中最重要的數據和操作。 320 x 480 像素的屏幕根本沒有空間容納無關的、不必要的元素。你必須優先考慮。因此，當一個團隊設計“移動優先”時，其結果是一種專注於用戶希望完成的關鍵任務的體驗，而不會出現當今桌面訪問網站中亂七八糟的彎路和界面碎片。這是一種良好的用戶體驗，對企業也有好處。

Focus each view of your website on only the essential tasks a user wants to accomplish there, and don't add more stuff to the idea just because they have more screen real estate.
將您網站的每個視圖都集中在用戶想要在那裡完成的基本任務上，不要僅僅因為他們有更多的屏幕空間就在這個想法中添加更多的東西。

The second principle is hinted at in Responsive Web Design: the "gradient of different experiences." A single, identical, pixel-perfect experience for every single user should not be the goal of your work; it's all but impossible.
響應式網頁設計中暗示了第二個原則：“不同體驗的梯度”。為每個用戶提供單一、相同、像素完美的體驗不應該是您工作的目標；這幾乎是不可能的。

<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;">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:#fce8e8;margin-top:1rem;margin-bottom:1rem">

<div style="display:flex">

:warning:
<p style="color:#a50e0e;margin-top:-1.5em">
Caution警告
</p>
</div>

<p style="color:#a50e0e;">用戶可能瀏覽的屏幕尺寸、功能、設備和上下文有無數種組合，作為設計師，您無法控制最終的組合。
</p>

</div>

Instead of thinking about your web experiences as a fixed thing, think of it as a set of recommendations that the user's device will use to build the best experience for their current context. To do so, progressive enhancement needs to be embraced.

與其將您的網絡體驗視為固定的事物，不如將其視為用戶設備將用來為他們當前環境構建最佳體驗的一組建議。為此，需要接受漸進增強。

## Progressive enhancement 漸進增強

Progressive Enhancement is a pattern that lets us write code that runs everywhere, starting from standard HTML, CSS, and JavaScript, and adding layers of capabilities on top of that with proper fallbacks when an API is not available.

Progressive Enhancement 是一種模式，它讓我們編寫可以在任何地方運行的代碼，從標準的 HTML、CSS 和 JavaScript 開始，並在 API 不可用時通過適當的回退在其之上添加功能層。

How do you enhance? Feature detection is a pattern where you perform a test for support and react based on that test results. There are several built-in web platform tools and practices for doing this.
你如何增強？功能檢測是一種模式，您可以在其中執行支持測試並根據該測試結果做出反應。有幾種內置的 Web 平台工具和實踐可用於執行此操作。

Using @supports, check for browser support of a CSS feature, and apply rules based on the result. This applies to both CSS properties and values; if a property is supported and a value is not, it will fail, as will an unsupported property. JavaScript code can access this through the [CSSSupportsRule](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSSupportsRule)

使用@supports，檢查瀏覽器是否支持 CSS 功能，並根據結果應用規則。這適用於 CSS 屬性和值；如果一個屬性受支持而一個值不受支持，它將失敗，不受支持的屬性也是如此。 JavaScript 代碼可以通過 CSSSupportsRule 訪問它

Most new web platform features are attached to existing objects, so ‘feature' in object style detection works well in JavaScript, as will other similar lookups, like checking for properties or methods on elements.
大多數新的 Web 平台功能都附加到現有對象，因此對像樣式檢測中的“功能”在 JavaScript 中運行良好，其他類似的查找也是如此，例如檢查元素的屬性或方法。

To ship modern JavaScript, you can use the module/nomodule pattern to provide more robust features with a smaller payload to more modern browsers and a fallback experience to older browsers. This has the bonus of guaranteeing a new baseline of JavaScript features, like promises, classes, arrow functions, and const and let are available for browsers that support ES Modules.

要發布現代 JavaScript，您可以使用 module/nomodule 模式為更現代的瀏覽器提供更強大的功能和更小的有效負載，並為舊瀏覽器提供後備體驗。這樣做的好處是保證了 JavaScript 特性的新基線，例如 promises、類、箭頭函數，以及 const 和 let 可用於支持 ES 模塊的瀏覽器。

You can even combine multiple forms of feature detection to create your enhanced baseline. Coined by the BBC News team, this is called Cutting the Mustard and lets you ship a core experience to everyone and start enhancing the experience only after a specific feature-detected bar is reached.

您甚至可以結合多種形式的特徵檢測來創建增強的基線。由 BBC 新聞團隊創造，這被稱為 Cutting the Mustard，讓您向每個人提供核心體驗，並且僅在達到特定的功能檢測欄後才開始增強體驗。

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
The P in PWA comes from Progressive, and it emphasizes the idea of adding features and abilities progressively, and using Feature Detection is key for that goal.
</p>

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
PWA 中的 P 來自 Progressive，它強調漸進地添加特性和能力的思想，而使用 Feature Detection 是實現該目標的關鍵。
</p>

### Avoid device detection避免設備檢測
You should directly test for feature support instead of making support assumptions based on the User-Agent string.
您應該直接測試功能支持，而不是根據 User-Agent 字符串進行支持假設。

User-agent strings have never been truly reliable. They rely on having near-perfect knowledge of every browser, operating system, and device combination in existence to "guess right". Even then they are susceptible to user spoofing, for example, desktop site redirects on mobile browsers are often as simple as spoofing a desktop user-agent string.
用戶代理字符串從來都不是真正可靠的。他們依靠對現有的每個瀏覽器、操作系統和設備組合的近乎完美的了解來“猜對”。即使這樣，它們也容易受到用戶欺騙的影響，例如，移動瀏覽器上的桌面站點重定向通常就像欺騙桌面用戶代理字符串一樣簡單。

Moreover, browsers are working on freezing their User-Agent strings, with user-agent strings for feature detection specifically called out as a reason for deprecation, making them even more unreliable than they previously were for identifying a user and device.
此外，瀏覽器正在努力凍結他們的用戶代理字符串，特別指出用於功能檢測的用戶代理字符串作為棄用的原因，這使得它們比以前用於識別用戶和設備的方式更加不可靠。

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
After saying that device detection is a bad practice, it's also important to clarify that there are still situations where we don't have any other solution, such as detecting iOS devices to offer specific platform instructions. Treat these practices as hacks and be careful to re-test and update these hacks on every new version of the browser on these platforms.
</p>
<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
在說設備檢測是一種不好的做法之後，同樣重要的是要澄清，在某些情況下我們沒有任何其他解決方案，例如檢測 iOS 設備以提供特定平台指令。將這些做法視為 hack，並小心地在這些平台上的每個新版本瀏覽器上重新測試和更新這些 hack。
</p>

## Content first 內容至上

Another principle of designing for the web is: start with your content first. For example, a real-time stock ticker with a graph of a stock's prices is, at its core, a table of stocks with their price over some time, maybe with a link to refresh the site.
網絡設計的另一個原則是：首先從您的內容開始。例如，帶有股票價格圖表的實時股票報價機，其核心是一張股票價格表，其中可能帶有刷新站點的鏈接。

That can then be enhanced with JavaScript and fetch requests to update the table's values on a timer or enhanced with sockets to provide real-time push-based updates. It can be enhanced again to graph the results, maybe with CSS, maybe with SVG, maybe with Canvas. But the core starts with content.
然後可以使用 JavaScript 和獲取請求來增強它以在計時器上更新表的值，或者使用套接字來增強它以提供基於推送的實時更新。它可以再次增強以繪製結果圖，可能使用 CSS，可能使用 SVG，可能使用 Canvas。但核心始於內容。

## Intrinsic design 內在設計

* Mobile as a focusing constraint for user experience.
* Emphasizing content and core functionality in the design process.
* Progressively enhancing with advanced functionality where available.
* 移動作為用戶體驗的焦點約束。
* 在設計過程中強調內容和核心功能。
* 在可用的情況下逐步增強高級功能。

These principles combine to give us something new: intrinsic design. In her talk [Designing Intrinsic Layouts](https://www.youtube.com/watch?v=AMPKmh98XLY), Jen Simmons talks about using modern CSS tools, like Grid, Flexbox, flow layout, and writing modes, to design and build user interfaces. With these tools, she says:
這些原則結合起來給了我們一些新的東西：內在設計。在她的設計內在佈局演講中，Jen Simmons 談到了使用現代 CSS 工具（如網格、Flexbox、流式佈局和書寫模式）來設計和構建用戶界面。有了這些工具，她說：

> You can really make the layout be intrinsic to the content that we have and the design that we want to do.
>
> Jen Simmons

> 你真的可以讓佈局成為我們擁有的內容和我們想要做的設計所固有的。
>
> 珍·西蒙斯

This new CSS allows designers to regain some control over layout but do so in a way that aligns with the latest web design principles. Instead of creating fixed forms based on fixed screen sizes, you define content-based rules by which layout happens by tapping into intrinsic properties of that content, like how small or large it can be, the size of the text, and the available space, all at once. They allow you to realize your design as it interacts with your content without needing to control every pixel's placement.

這個新的 CSS 允許設計人員重新獲得對佈局的一些控制，但這樣做的方式符合最新的網頁設計原則。不是基於固定的屏幕尺寸創建固定的表單，而是定義基於內容的規則，通過利用內容的固有屬性（例如它的大小、文本的大小和可用空間）來進行佈局，一次全部。它們允許您在設計與您的內​​容交互時實現您的設計，而無需控制每個像素的位置。

Intrinsic layouts bring the conversation about control on the web full-circle, giving it definition. Control on the web isn't about dictating devices or screen sizes or colors or fonts or layouts or capabilities for each visitor to your site. Control on the web is about writing the rules a browser will use to assemble your experience, building it uniquely for each user in your Progressive Web App.
內在佈局帶來了關於網絡控制的全面討論，並給出了定義。 Web 上的控制並不是要為站點的每個訪問者指定設備、屏幕尺寸、顏色、字體、佈局或功能。 Web 上的控制是關於編寫瀏覽器將用於組裝您的體驗的規則，為您的 Progressive Web App 中的每個用戶構建獨特的體驗。

## Web performance網絡性能

The last but not least important foundation for our PWA is Web Performance. Having a great experience for users is mandatory; it will lead to more conversions in every possible way.
我們 PWA 的最後但並非最不重要的基礎是 Web 性能。必須為用戶提供良好的體驗；它將以各種可能的方式帶來更多的轉化。

Web performance involves several steps:Web
性能涉及幾個步驟：

* Understand the key user-centric metrics available.
* Set goals for every metric.
* Measure our PWA.
* Improve our metrics by applying techniques and best practices statically in our code or server.
* Measure again.
* Improve the experience to each user, live, based on the user's context.
* 了解可用的以用戶為中心的關鍵指標。
* 為每個指標設定目標。
* 衡量我們的 PWA。
* 通過在我們的代碼或服務器中靜態應用技術和最佳實踐來改進我們的指標。
* 再次測量。
* 根據用戶的上下文，實時改善每個用戶的體驗。

Web performance metrics today measure how fast your content appears on the screen, but also how interactive your website is and how users perceive the experience.
今天的網絡性能指標衡量的是您的內容在屏幕上出現的速度，以及您網站的交互性以及用戶對體驗的看法。

## Web Vitals網絡生命力

During the past decade, we've been dealing with different metrics to measure success in web performance. Today, a set of recommended metrics are grouped under the project Web Vitals. [Web Vitals](https://web.dev/vitals/) focus metrics in three key areas affecting web performance and perception:
在過去的十年中，我們一直在處理不同的指標來衡量網絡性能是否成功。今天，一組推薦的指標被分組在 Web Vitals 項目下。 Web Vitals 關注影響網絡性能和感知的三個關鍵領域的指標：

* Loading
* Interactive
* Visual Stability
* 加載中
* 交互的
* 視覺穩定性

With Core Web Vitals, you can see at a glance, how good or bad is your PWA in web performance and user experience.
通過 Core Web Vitals，您可以一目了然地了解您的 PWA 在網絡性能和用戶體驗方面的好壞。

## PWA foundationsPWA基礎
It's important that your PWA has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance as a foundation for a great experience for all your users.
重要的是，您的 PWA 在響應式設計、移動和一切優先、內在設計和 Web 性能方面擁有堅實的基礎，這是為所有用戶提供出色體驗的基礎。