Transform a React Application into a Progressive Web App (PWA)

Prerequisites:

• 具备React经验

受众

• 开发者

Overview:

React 是一個用於創建前端 Web 應用的 JavaScript 函式庫。Progressive Web Apps 是一種在 Android、Windows 等平台上功能和外觀都類似於原生應用的 Web 應用。將 React 應用轉換為 Progressive Web App 可以整合原生功能，如離線使用、推送通知等。

這是一個由講師指導的培訓（線上或線下），旨在幫助開發者將 React 應用轉換為 Progressive Web App。

在培訓結束時，參與者將能夠：

• 設置必要的開發環境，開始轉換 React 應用。
• 使用 Service Worker 進行快取，使 React 應用能夠離線工作。
• 創建並設計推送通知。
• 將 Progressive Web App 安裝到移動設備上。

課程形式

• 互動式講座與討論。
• 大量練習與實踐。
• 在實時實驗室環境中進行實際操作。

課程定制選項

• 如需為此課程定制培訓，請聯繫我們進行安排。

Course Outline:

介紹

React 和 JavaScript 函式庫

• JavaScript 函式庫中用於開發 Web 應用程序的流程

Web Application Development 週期概述

• 原生應用程序與漸進式應用程序的比較
• Javascript 邏輯、CSS 模板和 HTML 模板

React Goes Native 與漸進式 Web 應用程序

• 跨平台
• 向後兼容性
• 功能對等

漸進式 Web 應用程序與推送通知

• Push API
• Notification API

準備開發環境

• 安裝和配置 Node.Js
• 安裝和配置 NPM

Programming 與優化 React 應用程序

• 創建一個新的 React 應用程序模板
• 安裝 dom 路由器以在 React 應用程序中進行導航和保存
• 編寫待辦事項列表
• 更新默認樣式
• 註冊 Service Worker

配置圖標和推送通知

• 創建和設計推送通知
• 創建和設計圖標

部署應用程序

• 在移動模擬器或移動設備上運行 React 應用程序

測試應用程序

• 使用 Lighthouse 驗證 React 應用程序是否符合 PWA 標準

總結與結論