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 标准

总结与结论