[1.Progressive Web Apps](https://web.dev/learn/pwa/progressive-web-apps/)

###### tags: `PWA` # [1.Progressive Web Apps](https://web.dev/learn/pwa/progressive-web-apps/) *Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.* *漸進式 Web 應用程序 (PWA) 是使用現代 API 構建和增強的 Web 應用程序，可提供增強的功能、可靠性和可安裝性，同時可以在任何設備上隨時隨地訪問任何人，所有這些都使用一個代碼庫。* A Progressive Web Apps (PWA) is a web apps that use progressive enhancement to provide users with a more reliable experience, use new capabilities to provide a more integrated experience, and can be installed. And, because it's a web app, it can reach anyone, anywhere, on any device, all with a single codebase. Once installed, a PWA looks like any other app, specifically: 漸進式網絡應用程序（PWA）是一種網絡應用程序，它使用漸進式增強為用戶提供更可靠的體驗，使用新功能提供更集成的體驗，並且可以安裝。而且，因為它是一個網絡應用程序，它可以在任何地方、任何設備上訪問任何人，所有這些都只需一個代碼庫。安裝後，PWA 看起來像任何其他應用程序，具體而言： * It has an icon on the home screen, app launcher, launchpad, or start menu. * It appears when you search for apps on the device. * It opens in a standalone window, wholly separated from a browser's user interface. * It has access to higher levels of integration with the OS, for example, URL handling or title bar customization. * It works offline. * 它在**主屏幕**、**應用程序啟動器**、**啟動板**或**開始菜單**上有一個圖標。 * 當您在設備上搜索應用程序時它會出現。 * 它在獨立窗口中打開，完全獨立於瀏覽器的用戶界面。 * 它可以訪問更高級別的操作系統集成，例如 URL 處理或標題欄自定義。 * 它離線工作。 ## The web platform 網絡平台 The web is an incredible platform. Its mix of universality across devices and operating systems, its user-centered security model, and the fact that no single company controls its specification or implementation make it a powerful platform for delivering software. 網絡是一個不可思議的平台。其跨設備和操作系統的通用性、以用戶為中心的安全模型以及沒有任何一家公司控制其規範或實施的事實使其成為交付軟件的強大平台。 Combined with the web's inherent linkability, it's possible to search across it and share what you've found with anyone, anywhere. Whenever you go to a website, it's the latest version the publisher deployed, and your experience with that site can be as temporary or as permanent as you'd like. 結合網絡固有的可鏈接性，可以在整個網絡上進行搜索並與任何地方的任何人分享您的發現。無論何時您訪問一個網站，它都是發布者部署的最新版本，並且您對該網站的體驗可以是臨時的，也可以是永久的，只要您願意。 Web applications can reach anyone, anywhere, on any device with a single codebase. For developers, the web also offers a transparent and straightforward deploying mechanism. There is no need for packaging, no extra content review, or delays on updates. Users always get the latest version when they visit your app. With new capabilities and techniques, a web app can now allow you to interact or see content even when offline, a hurdle that was impossible to overcome a few years ago. Web 應用程序可以通過單一代碼庫在任何設備上訪問任何人、任何地方。對於開發人員，Web 還提供了一種透明且直接的部署機制。不需要打包，不需要額外的內容審查，也不需要延遲更新。用戶在訪問您的應用程序時始終獲得最新版本。憑藉新的功能和技術，網絡應用程序現在可以讓您即使在離線狀態下也能進行交互或查看內容，這在幾年前是無法克服的障礙。 ## Platform-specific apps 特定於平台的應用程序 Platform-specific apps, on both mobile and desktop, are known for being rich and reliable. They're ever-present, on home screens, docks, and taskbars. They work regardless of network connection, and launch in their own standalone experience. They can read and write files from the local file system, access hardware connected via USB, serial, or Bluetooth, and interact with data stored on your devices, such as contacts and calendar events. In platform-specific applications, you can take pictures, play songs listed on the home screen, or control media playback while in another app. These applications feel like part of the device they run on. 移動和桌面上的特定於平台的應用程序以豐富和可靠著稱。它們無處不在，出現在主屏幕、停靠欄和任務欄上。它們的工作不受網絡連接的影響，並以自己的獨立體驗啟動。它們可以從本地文件系統讀取和寫入文件，訪問通過 USB、串口或藍牙連接的硬件，並與存儲在您設備上的數據（例如聯繫人和日曆事件）進行交互。在特定於平台的應用程序中，您可以在其他應用程序中拍照、播放主屏幕上列出的歌曲或控制媒體播放。這些應用程序感覺就像是運行它們的設備的一部分。 In modern mobile operating systems, platform-specific apps are installed mostly from app stores, with rules and limitations on who can publish and what can be published for their users. These apps are typically shipped as a large, indivisible package, and every update needs re-packaging, re-signing, re-approval, and on-device re-installation. 在現代移動操作系統中，特定於平台的應用程序主要是從應用程序商店安裝的，對誰可以發布以及可以為用戶發布什麼內容有規則和限制。這些應用程序通常作為一個大的、不可分割的包交付，每次更新都需要重新打包、重新簽名、重新批准和在設備上重新安裝。 A challenge for platform-specific apps is that they are not compatible with multiple platforms and devices, so it's not easy, if even possible, to move an Android app to iOS or an iOS to Windows or ChromeOS without creating a new app from scratch. 特定於平台的應用程序面臨的一個挑戰是它們與多個平台和設備不兼容，因此如果不從頭開始創建新應用程序，就很難將 Android 應用程序移動到 iOS 或將 iOS 移動到 Windows 或 ChromeOS。 ## Bringing the best of both worlds 兩全其美 If you think about platform apps and web apps in terms of capabilities and reach, platform apps represent the best of capabilities, whereas web apps represent the best of reach. Progressive Web Apps sit at the intersection of the capabilities of platform apps and the reach of web apps. A Progressive Web App includes features from both worlds. 如果您從功能和範圍的角度考慮平台應用程序和 Web 應用程序，平台應用程序代表最佳功能，而 Web 應用程序代表最佳範圍。漸進式 Web 應用程序位於平台應用程序的功能和 Web 應用程序的範圍的交匯處。漸進式 Web 應用程序包括來自兩個世界的功能。 | Web | Platform apps | | -------- | -------- | | Linkability | Offline-capable | | Accessible by default | High performance | | Ubiquitous | Device Integration | | Easy to Deploy | Standalone experience | | Easy to Update | Installed Icon | | Everyone can publish | Rich and reliable | | Web | Platform apps | | -------- | -------- | | 可鏈接性 | 離線功能 | | 默認可訪問 | 高性能 | | Ubiquitous | 設備集成 | | Ubiquitous | 單機體驗 | | 易於更新 | 已安裝圖標 | | 每個人都可以發布 | 豐富可靠 | People tend to think of Progressive Web Apps as an app that the user can install from a browser instead of an app store. However, a PWA can be listed in many app stores today as an optional distribution channel, including Google Play Store (for Android and ChromeOS), Microsoft Store (for Windows 10 and 11), and Apple AppStore (for iOS, iPadOS, and macOS). For these cases, you must follow all store rules and requirements, but you will still get some of the advantages of a PWA. 人們傾向於將 Progressive Web Apps 視為用戶可以從瀏覽器而不是應用商店安裝的應用程序。但是，PWA 現在可以作為可選的分發渠道列在許多應用程序商店中，包括 Google Play Store（適用於 Android 和 ChromeOS）、Microsoft Store（適用於 Windows 10 和 11）和 Apple AppStore（適用於 iOS、iPadOS 和 macOS） ).對於這些情況，您必須遵守所有商店規則和要求，但您仍然可以獲得 PWA 的一些優勢。 ## Adoption has its benefits 採用有其好處 Hulu, a video streaming service in the USA, created a Progressive Web App version of their experience to replace their desktop apps which had poor user reviews and poor usage. As shared at [Google I/O 2019](https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html), one developer could research and implement this experience from their existing web application in two weeks. 美國的視頻流媒體服務 Hulu 創建了一個漸進式 Web 應用程序版本，以取代其用戶評價不佳且使用率低的桌面應用程序。正如在 Google I/O 2019 上分享的那樣，一名開發人員可以在兩週內從他們現有的 Web 應用程序研究和實施這種體驗。 Within five months, 96% of their legacy app users had adopted the PWA, with a 27% increase in return visits and a 5.5% increase in engagement. Because it's in the launcher and on taskbars, PWAs are easier to return to than if they just lived in a tab. 在五個月內，96% 的舊版應用程序用戶採用了 PWA，回訪增加了 27%，參與度增加了 5.5%。因為它在啟動器和任務欄上，PWA 比只存在於選項卡中更容易返回。 [JD.ID](https://web.dev/jdid/), an e-commerce platform in Indonesia providing delivery services for many products, wanted to expand its online presence by focusing on performance and a network-independent solid experience for their PWA. With this enhanced experience, they increased their overall mobile conversion rate by 53%, 200% for installed users, and increased their daily active users by 26%. JD.ID 是印度尼西亞的一個電子商務平台，為許多產品提供送貨服務，它希望通過關注其 PWA 的性能和獨立於網絡的可靠體驗來擴大其在線業務。憑藉這種增強的體驗，他們將整體移動轉化率提高了 53%，安裝用戶的轉化率提高了 200%，每日活躍用戶增加了 26%。 [Clipchamp](https://web.dev/clipchamp/) is an in-browser, desktop-class online video editor that empowers anyone to tell stories worth sharing through video. They saw 9% higher user retention with their PWA versus their standard desktop app users and have seen their PWA installations increasing at a rate of 97% each month in its first five months launched. Clipchamp 是瀏覽器內的桌面級在線視頻編輯器，它使任何人都可以通過視頻講述值得分享的故事。與標準桌面應用程序用戶相比，他們發現 PWA 的用戶保留率高出 9%，並且在推出的前五個月中，他們的 PWA 安裝量每月以 97% 的速度增長。 a powerful, desktop-class vector design tool that serves tens of thousands of daily active users demanding rich, affordable, accessible vector illustration software. Since adding a PWA as an install option for users, they've seen PWA users are 24% more active, the PWA accounts for 31% more repeat users, and PWA users are 2.5 times more likely to purchase Gravit Designer PRO, as compared to their other platforms and install options. 一個功能強大的桌面級矢量設計工具，為數以萬計的日常活躍用戶提供服務，這些用戶需要豐富、負擔得起、易於訪問的矢量插圖軟件。自從將 PWA 添加為用戶的安裝選項後，他們發現 PWA 用戶的活躍度提高了 24%，PWA 重複用戶的比例增加了 31%，PWA 用戶購買 Gravit Designer PRO 的可能性增加了 2.5 倍，與他們的其他平台和安裝選項。 Many other companies have implemented PWA and seen a benefit. Large companies have already published PWAs on various products, including Apple (AppStore Connect, Feedback Assistant), Microsoft (Office 365, Windows 365), Google (Duo, YouTube Music, Drive), Amazon (Luna), Facebook (Instagram Lite, Gaming). 許多其他公司已經實施 PWA 並從中受益。大公司已經在各種產品上發布了 PWA，包括蘋果（AppStore Connect、反饋助手）、微軟（Office 365、Windows 365）、谷歌（Duo、YouTube Music、Drive）、亞馬遜（Luna）、Facebook（Instagram Lite、遊戲). ## The streaming game changer 流媒體遊戲規則改變者 A great example of the power of Progressive Web Apps is the industry of streaming platforms, including cloud gaming and remote computing. Since 2021, most cloud game providers have launched Progressive Web Apps, letting you play console games from any device and just a browser or a PWA installation: iPhone, Android, iPad, laptops, Macs, or PCs. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now, and BlueStacks X offer cloud gaming solutions over the browser as PWAs. They all provide a great experience with performance close to native on all platforms thanks to web technologies such as WebRTC, WebAssembly, and GamePad APIs. 漸進式 Web 應用程序的強大功能的一個很好的例子是流媒體平台行業，包括雲遊戲和遠程計算。自 2021 年以來，大多數雲遊戲提供商都推出了 Progressive Web Apps，讓您可以從任何設備玩主機遊戲，只需一個瀏覽器或 PWA 安裝：iPhone、Android、iPad、筆記本電腦、Mac 或 PC。 Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now 和 BlueStacks X 通過瀏覽器作為 PWA 提供雲遊戲解決方案。得益於 WebRTC、WebAssembly 和 GamePad API 等 Web 技術，它們都提供了在所有平台上接近原生性能的出色體驗。