###### tags: `PWA`

# [2.Getting started](https://web.dev/learn/pwa/getting-started/)

*If you want to build a Progressive Web App, you may be wondering where to start, if it's possible to upgrade a website to a PWA without starting from scratch, or how to move from a platform-specific app to a PWA. This article will help you answer these questions.*

如果你想構建一個漸進式 Web 應用程序，你可能想知道從哪裡開始，是否可以在不從頭開始的情況下將網站升級到 PWA，或者如何從特定於平台的應用程序轉移到 PWA。本文將幫助您回答這些問題。

# First steps第一步
Progressive Web Apps are still websites, with enhanced features and capabilities. They are not attached to a particular technology stack and you can start from scratch with a new site or update your existing website without a complete overhaul. In this guide you'll learn to create a good implementation of the PWA pattern. Here are some strategies to get you started:

漸進式 Web 應用程序仍然是網站，具有增強的特性和功能。它們不依附於特定的技術堆棧，您可以從頭開始創建一個新站點或更新您現有的網站而無需徹底檢修。在本指南中，您將學習如何創建 PWA 模式的良好實現。以下是一些幫助您入門的策略：

# Make it installable使其可安裝
Start small! This approach includes beginning with a basic manifest file, a simple offline page, and a service worker to serve the offline page and cache some critical CSS and JavaScript. Thanks to the critical CSS and JavaScript caching, you will get your existing web app ready to work offline while improving its performance.

從小做起！這種方法包括從一個基本的清單文件開始，一個簡單的離線頁面，以及一個服務工作者來為離線頁面提供服務並緩存一些關鍵的 CSS 和 JavaScript。得益於關鍵的 CSS 和 JavaScript 緩存，您可以讓現有的 Web 應用程序準備好離線工作，同時提高其性能。

# Focus on a feature 專注於一個功能
Pick one new feature—such as push notifications or file handling—that will significantly impact your users or your business. This will allow you to dip your toes into the PWA pool without making too many changes at once.
選擇一項將對您的用戶或業務產生重大影響的新功能，例如推送通知或文件處理。這將允許您將腳趾浸入 PWA 池中，而無需一次進行太多更改。

# Build a simple version 構建一個簡單的版本
Take an existing section of your application or a specific user journey, like video playback or access to a boarding pass, and make it work front-to-back as an offline-first PWA, either stand-alone or in context. This allows for a low-stakes experiment enabling you to rethink an experience for your users with PWAs.
獲取應用程序的現有部分或特定用戶旅程，例如視頻播放或訪問登機牌，並使其作為離線優先 PWA 從前到後工作，無論是獨立還是在上下文中。這允許進行低風險實驗，使您能夠重新考慮 PWA 用戶的體驗。

# Start from the ground up從頭開始
If you're going through a redesign of your website or can start from scratch, this strategy makes a lot of sense. It enables you to more easily build in PWA design patterns than other strategies, in particular allowing you to take advantage of all the power of service workers from the get-go.
如果您正在重新設計您的網站或可以從頭開始，這種策略很有意義。與其他策略相比，它使您能夠更輕鬆地構建 PWA 設計模式，特別是允許您從一開始就利用服務工作者的所有功能。

# Upgrading a store app升級商店應用程序
With the ability to publish a PWA to app stores, it's possible to wrap your PWA into a PWA launcher and upload it to stores, such as Google's Play Store or Windows Store. If you have an existing platform-specific app, you can replace it with your PWA published in the store.
通過將 PWA 發佈到應用商店的能力，可以將您的 PWA 包裝到 PWA 啟動器中並將其上傳到商店，例如 Google 的 Play Store 或 Windows Store。如果您有現有的特定於平台的應用程序，您可以將其替換為在商店中發布的 PWA。

With this approach, your existing users get an upgrade of their experiences to the PWA, and new users can still use or install your PWA from the browser, or the app stores. And, you will have one app for everyone, saving costs, time and improving user experience.
通過這種方法，您的現有用戶可以將他們的體驗升級到 PWA，而新用戶仍然可以從瀏覽器或應用商店使用或安裝您的 PWA。而且，您將為每個人提供一個應用程序，從而節省成本、時間並改善用戶體驗。

# PWA checklist PWA 清單

A Progressive Web App is a website, which leads to the question: When does it become a Progressive Web App? The answer is not so simple, as the PWA concept doesn't refer to a specific technology or stack, PWA is instead a pattern including various technical components.
Progressive Web App 是一個網站，這就引出了一個問題：它什麼時候成為 Progressive Web App？答案並不那麼簡單，因為 PWA 概念並不是指特定的技術或堆棧，而是一種包含各種技術組件的模式。

While there are no unique rules among all browsers, there are a set of recommendations, called the [Progressive Web App Checklist](https://web.dev/pwa-checklist/), to help you create a PWA that users will love.
雖然在所有瀏覽器中沒有獨特的規則，但有一組建議，稱為漸進式 Web 應用清單，可幫助您創建用戶喜愛的 PWA。

### Core requirements 核心要求
Because PWAs span all devices, from mobile through desktop, the core Progressive Web App Checklist is about what you need to do to make your app installable and reliable for all users, regardless of screen size or input type.

因為 PWA 跨越所有設備，從移動設備到桌面設備，核心的 Progressive Web App Checklist 是關於你需要做什麼來讓你的應用程序對所有用戶來說都是可安裝和可靠的，無論屏幕尺寸或輸入類型如何。

The core requirements are:
核心要求是：

#### Starts fast, stays fast快速開始，保持快速
Performance plays a significant role in the success of any online experience, as high-performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric performance metrics.
性能對於任何在線體驗的成功都起著重要作用，因為高性能網站比性能差的網站更能吸引和留住用戶。站點應專注於優化以用戶為中心的性能指標。

#### Works in any browser 適用於任何瀏覽器
Progressive Web Apps are web apps first, which means they need to work across browsers, not just in one of them. The experience doesn't have to be identical in all browsers, though. There can be features that aren't supported by one browser, with a fallback to ensure a good experience.
漸進式 Web 應用程序首先是 Web 應用程序，這意味著它們需要跨瀏覽器工作，而不僅僅是在其中一個瀏覽器中工作。不過，體驗不必在所有瀏覽器中都相同。可能存在一種瀏覽器不支持的功能，通過回退以確保良好的體驗。

#### Responsive to any screen size 響應任何屏幕尺寸
Users can use your PWA on any screen size, and all content is available at any viewport size.
用戶可以在任何屏幕尺寸上使用您的 PWA，並且所有內容都可以在任何視口尺寸下使用。

#### Provides a custom offline page提供自定義離線頁面
When users are offline, keeping them in your PWA provides a more seamless and native-like experience than dropping back to the default browser offline page.
當用戶處於離線狀態時，將他們保留在您的 PWA 中可以提供比返回到默認瀏覽器離線頁面更加無縫和類似本機的體驗。

#### Is installable 可安裝
Users who install or add apps to their home screens tend to engage with those apps more, and when the PWA is installed it can take advantage of more abilities for a better user experience.
在主屏幕上安裝或添加應用程序的用戶往往會更多地使用這些應用程序，安裝 PWA 後，它可以利用更多功能來獲得更好的用戶體驗。

## Optimal PWA characteristics 最佳 PWA 特性
To create a genuinely great Progressive Web App, one that feels like a best-in-class app, you need more than just the core checklist. The optimal Progressive Web App checklist is about making your PWA feel capable and reliable while taking advantage of what makes the web powerful.
要創建真正出色的漸進式 Web 應用程序，感覺就像一流的應用程序，您需要的不僅僅是核心清單。最佳的 Progressive Web App 清單是關於讓你的 PWA 感覺有能力和可靠，同時利用網絡的強大之處。

### Provides an offline experience 提供離線體驗
By allowing users to use your PWA while offline, you'll create an authentic app-like experience for them. Do this by identifying those features that don't require connectivity, so that users can access at least some functionality.
通過允許用戶在離線時使用你的 PWA，你將為他們創造一個真實的類似應用程序的體驗。通過識別那些不需要連接的功能來做到這一點，以便用戶至少可以訪問某些功能。

<div style="display:flex">

:bulb:
<p style="color:#6001ff;margin-top:-1.5em">
Gotchas陷阱
</p>
</div>

<p style="color:#6001ff;background-color:#faf6fe;padding:1rem">
When we say that the PWA should provide an offline experience, it doesn't mean that all the services and content should be available offline. For example a note taking app can't sync its notes when there is no connectivity, but it can allow the users to write the note and sync new changes when they are back online. At the very least you should render the app's user interface with a proper message if your app needs a live connection.
</p>

<p style="color:#6001ff;background-color:#faf6fe;padding:1rem">
當我們說 PWA 應該提供離線體驗時，並不意味著所有的服務和內容都應該離線可用。例如，當沒有連接時，筆記應用程序無法同步其筆記，但它可以允許用戶寫筆記並在他們重新聯機時同步新的更改。如果您的應用程序需要實時連接，您至少應該使用正確的消息呈現應用程序的用戶界面。
</p>

### Is fully accessible 完全無障礙
Ensure all the application's content and interactions are understood by screen readers, usable with just a keyboard, that focus is indicated, and color contrast is strong. By making your PWA accessible, you ensure it's usable for everyone.
確保屏幕閱讀器可以理解所有應用程序的內容和交互，只需鍵盤即可使用，指示焦點，並且顏色對比強烈。通過讓您的 PWA 易於訪問，您可以確保它可供所有人使用。

### Uses powerful capabilities where available 在可用的情況下使用強大的功能
From push messaging, WASM, and WebGL to file system access, contact pickers, and integration with app stores. The tools to create highly capable, deeply integrated PWAs are here, allowing you to create a fully-featured user experience, previously reserved for platform apps, that your users can take with them wherever they go.
從推送消息、WASM 和 WebGL 到文件系統訪問、聯繫人選擇器以及與應用商店的集成。用於創建功能強大、深度集成的 PWA 的工具在這裡，讓您可以創建功能齊全的用戶體驗，以前為平台應用程序保留，您的用戶可以隨身攜帶。

### Is discoverable through search可通過搜索發現
More than half of all website traffic comes from organic search. Making sure that canonical URLs exist for content and that search engines can index your site is critical for users to find your PWA.
所有網站流量的一半以上來自有機搜索。確保內容存在規範 URL 並且搜索引擎可以為您的網站編制索引對於用戶找到您的 PWA 至關重要。

### Works with any input type適用於任何輸入類型
Users should be able to switch between input types while using your application seamlessly, and input methods should not depend on screen size.
用戶應該能夠在無縫使用您的應用程序的同時在輸入類型之間切換，並且輸入法不應取決於屏幕尺寸。

### Provides context for permission requests為權限請求提供上下文
Only trigger prompts for permissions like notifications, geolocation, and credentials, after providing in-context rationale to improve chances of accepting the prompts from the user.
在提供上下文理由以提高接受用戶提示的機會後，僅觸發通知、地理定位和憑據等權限的提示。

### Follows best practices for healthy code遵循健康代碼的最佳實踐
Keeping your application up-to-date and your codebase healthy makes it easier for you to deliver new features that meet the other goals laid out in this checklist.
讓您的應用程序保持最新和代碼庫健康，可以讓您更輕鬆地交付滿足此清單中列出的其他目標的新功能。

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
While the PWA Checklist has a set of best practices for all developers, some browsers also have PWA Criteria. The PWA criteria is a set of technical requirements that your website must comply with to be treated as a PWA. Your PWA will receive special treatment when that happens, such as firing new events, rendering an install badge or dialog, or adding a new Install menu within the browser.
</p

<p style="background-color:#D2DEF9;padding:1rem;line-height:1.9">
雖然 PWA Checklist 為所有開發人員提供了一組最佳實踐，但某些瀏覽器也有 PWA 標準。 PWA 標準是您的網站必須遵守的一組技術要求才能被視為 PWA。當發生這種情況時，您的 PWA 將得到特殊處理，例如觸發新事件、呈現安裝標誌或對話框，或者在瀏覽器中添加新的安裝菜單。
</p>