如何構建響應式漸進式 Web 應用程序？

已發表: 2021-08-24

自 4 到 5 年前，Google 和 Microsoft 等技術巨頭一直在為漸進式 Web 應用程序（或 PWA）鋪平道路。 現在，PWA 已經成為大公司和小型創業公司的必備技術。 Twitter、星巴克、谷歌和全球速賣通使用 React Progressive Web 應用程序構建器來提升他們的在線形象。

PWA 是一個 Web 應用程序，它捕捉了本機和 Web 應用程序的優點。 它提供硬件功能，並包含在跨平台應用程序的主體中。 與原生應用程序相比，它的創建和維護更快、更簡單、成本更低。

PWA 支持普通站點無法訪問的功能。 它結合了離線工作、推送通知、訪問地理位置、攝像頭、麥克風等。PWA 甚至可以在瀏覽器之外工作，利用可以在啟動時調度的本地應用程序外殼。

  • Statista 研究表明，全球超過40% 的企業和獨立程序員更喜歡使用 React，使其成為 2021 年最流行的 Web 框架。
  • React 也被稱為 GitHub 上的明星技術，共有85 個存儲庫，使其成為最容易訪問的開源框架。
  • 根據前30 名 PWA 報告進行的一些報告和研究，React Progressive Web 應用程序構建器的平均轉化率比原生移動應用程序高 36%。
  • 據 Smashing Ideas 稱，擁有 PWA 的公司的客戶參與度提高了 50% 。
  • 同一份報告通過粉碎創意還指出開發和維護減少了 33% 。 該報告還提供了有關開發和維護節省的信息，如果 PWA 能夠滿足所有移動 Web 需求，從而消除對新的或現有應用程序的需求，可能會節省 33% 以上。

PWA 和反應

既然你已經知道 PWA 的重要性。 有幾種方法可以創建 React 應用程序 PWA 或漸進式 Web 應用程序。 您可以輕鬆使用 vanilla JS、HTML、CSS 並選擇您的框架和庫。 一些流行的選擇是 Ionic、Vue、Angular、Polymer，當然還有 React。

Read more

PWA 的 Web 技術：

  • 網絡清單
  • 服務代理
  • 應用程序外殼
  • HTTPS

如何構建 React 應用程序？

要從如何構建 Web 應用程序開始，首先確保您安裝了最新版本的 Node 和熟悉的代碼編輯器。 大多數情況下，Visual Studio Code 被許多人用作流行的選擇。

但是，如果您有一個需要與漸進式功能綁定的 React Web 應用程序，那就太棒了。 如果沒有，請確保安裝以獲得React 本機應用程序開發的全部優勢。 Facebook 的 CreateReactApp 工具可以幫助解決這個問題。 您甚至可以從 GitHub 導入現成的響應應用程序。

Core building bricks

使用 Create-React-App 構建 PWA

設置一個簡單的 React 應用程序

第一步是構建 PWA。 為此，您需要使用上面段落中討論的 create-react-app 。 如果您的系統中沒有安裝它，那麼您可以使用以下代碼運行此命令：

npm i create-react-app -g

要使用 create-react-app 構建 TypeScript React 應用程序，請輸入下面給出的 npx 命令：

npx create-react-app pwa-react-typescript –模板打字稿

這些步驟將創建一個使用 TypeScript 為您構建的 React Web 應用程序，可以通過以下方式在本地進行測試：

cd pwa-react-typescript

紗線開始

創建 React 應用程序的另一種方法是：

創建反應應用程序反應pwa

下面給出的圖像顯示了將在 react-app 文件夾中構建的文件。

files in react app folder

註冊一個 Service Worker

Create-react-app (CRA) 提供了工具來解決這個問題——如何為你的企業創建一個帶有 React 的 PWA 應用程序？

但是，如果您正在考慮如何構建可在離線模式下運行的漸進式 Web 應用程序？ 然後你必須配置自動生成的 service worker 文件。

新建項目的目錄包含文件 index.js。 當你打開它時，你會發現下面給出的代碼：

在文件中，您可能會看到未註冊的 service Worker。 要註冊它，您必須將 unregister() 調用更改為 register() 之一。

至此，如何使用 React 創建 React 應用程序或使用 Service Worker 創建 PWA 應用程序的問題就解決了？

Let's Talk

配置 Web 應用清單

您應該知道 public 文件夾中的 manifest.js 包含元數據，即控制應用程序如何出現在用戶面前並解釋其在啟動時的外觀的信息。

Configure web apps

manifest.json 鏈接在 public/index.html 文件中：

<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />

注意：在上面的標籤中使用 %PUBLIC_URL%。 在開發過程中會與公用文件夾的 URL 進行交換。 另請注意，只有公用文件夾內的文件才能從 HTML 中獲取。

Chrome 需要具有 manifest.json 才能將 PWA 添加到主屏幕。

serviceWorker.js 註冊了我們的 service worker 文件。 要回答您的問題，工人檔案將在哪裡註冊？ 該文件將在構建應用程序時使用 CRA 生成，即在為生產構建時：

npm 運行構建

解釋文件的組成部分，我們開始：

  • 該命令構建項目並存儲在構建文件夾中。
  • 所有的 js 和 css 文件都由 static 文件夾保存。
  • index.html 是加載存儲在 static/js 文件夾中的所有 React 文件以及存儲在 static/css 文件夾中的 CSS 的主頁。
  • 在 service-worker.js 文件中存儲了所有 service worker 代碼。
  • 服務工作者緩存在數組中的所有文件都由 precache-man aifest.*.js 文件保存。
  • 為了讓一切按計劃進行，您必須在瀏覽器中加載構建文件夾，但首先，您需要一個瀏覽器。 安裝http服務器
  • 下一步是在 package.json 的腳本部分添加 start。

Component of the file

測試 PWA

在製作 React PWA 之後。 下一步與測試應用程序有關。

要在生產模式下運行應用程序，請鍵入下圖中給出的以下命令：

測試 pwa

現在您已經構建了應用程序，是時候測試它了。 Google 已經創建了 PWA 清單，您可以使用 Lighthouse 評估您的網絡應用程序。 它是位於 Chrome DevTools 選項卡中的工具。

為什麼選擇 React 來構建漸進式 Web 應用程序？

React 最初是由 Facebook 的 Jordan Walke 於 2013 年創建的 JavaScript 開源庫，它是為以快速、基本和適應性強的方式開發 UI 而構建的。 Facebook 小組與圖書館保持同步，目前在 Facebook 和 Instagram 等他們的項目中執行。

React 很受歡迎，每週的 JavaScript 下載量達到 8+ 百萬次。 人們進行本機應用程序開發的眾多原因之一。

結束語

為初創公司開發 PWA React是一種趨勢，因為它可以利用他們熟悉的技術為數十億台設備設計、開發、傳達和發布 PWA。 現有的 React 應用程序同樣可以更改為 PWA。

在 pwa 應用開發公司的幫助下，PWA 易於創建和分發，並通過提供本地洞察力，通過組件更好地承諾來增加客戶價值，例如，添加到主屏幕，彈出消息等，無需建立相互作用。

如果您在為您的業務構建漸進式 Web 應用程序響應方面需要幫助，我們經驗豐富的漸進式 Web 應用程序開發公司團隊準備了解您的查詢並為您提供有關漸進式 Web 應用程序反應開發的建議。 同樣，您可以找到我們排名第一的 PWA 上下文調查之一。