create-react-native-app渐进式Web应用(PWA)开发：扩展Web能力

【免费下载链接】create-react-native-app 项目地址: https://gitcode.com/gh_mirrors/cre/create-react-native-app

你是否遇到过React Native应用在Web端体验不佳的问题？希望同时拥有原生应用的流畅体验和Web应用的便捷访问？本文将带你通过create-react-native-app工具，从零开始构建一个具备PWA能力的跨平台应用，让你的Web应用拥有离线访问、推送通知等原生应用级体验。读完本文后，你将掌握使用create-react-native-app开发PWA的完整流程，包括环境配置、核心功能实现和性能优化技巧。

PWA与React Native的完美结合

渐进式Web应用（Progressive Web App，PWA）是一种结合了Web和原生应用优势的现代应用模式。它通过Service Worker、Web App Manifest等技术，使Web应用具备离线运行、桌面图标、推送通知等原生应用特性。create-react-native-app作为Expo生态系统的一部分，提供了无缝集成PWA功能的能力，让开发者能够使用React Native语法同时构建iOS、Android和Web应用。

create-react-native-app的PWA开发主要依赖以下核心模块：

• 模板系统：src/Template.ts负责项目初始化和配置文件生成
• 项目构建：src/index.ts提供命令行工具和项目创建流程
• 示例模板：src/Examples.ts包含多种项目模板，可快速集成PWA功能

环境准备与项目初始化

安装create-react-native-app

首先确保你的开发环境中已安装Node.js（建议v14或更高版本）和npm/yarn。使用以下命令全局安装create-react-native-app：

npm install -g create-react-native-app
# 或使用yarn
yarn global add create-react-native-app

创建PWA项目

使用以下命令创建一个新的React Native项目，并指定PWA模板：

create-react-native-app my-pwa-app --template expo-template-bare-minimum
cd my-pwa-app

create-react-native-app会自动初始化项目结构并安装依赖。从package.json中可以看到，项目默认包含了expo相关依赖，这些依赖是实现PWA功能的基础。

项目结构解析

创建完成后，项目结构如下：

my-pwa-app/
├── app.json          # 应用配置文件
├── package.json      # 项目依赖和脚本
├── src/              # 源代码目录
├── ios/              # iOS原生代码（可选）
├── android/          # Android原生代码（可选）
└── web/              # Web相关配置和资源

其中，app.json是PWA配置的关键文件，通过修改该文件可以配置应用名称、图标、主题色等PWA相关属性。

核心PWA功能实现

Web App Manifest配置

Web App Manifest是一个JSON文件，用于定义应用的名称、图标、启动方式等信息。在create-react-native-app项目中，这部分配置通过app.json文件实现：

{
  "expo": {
    "name": "My PWA App",
    "slug": "my-pwa-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "manifest": {
        "name": "My PWA App",
        "short_name": "PWA App",
        "description": "A React Native PWA application",
        "start_url": "/",
        "display": "standalone",
        "background_color": "#ffffff",
        "theme_color": "#000000",
        "icons": [
          {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
          },
          {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
        ]
      }
    }
  }
}

上述配置定义了应用在Web端的显示名称、图标、启动URL等信息。设置display: "standalone"会使应用以独立窗口模式运行，类似原生应用体验。

Service Worker实现离线功能

Service Worker是PWA实现离线功能的核心技术。create-react-native-app通过expo-service-worker库简化了Service Worker的配置和使用。首先安装相关依赖：

expo install expo-service-worker

然后创建Service Worker文件src/service-worker.js：

import { registerRootComponent } from 'expo';
import { Workbox } from 'workbox-window';
import App from './App';

// 注册React Native应用
registerRootComponent(App);

// 注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    const workbox = new Workbox('/expo-service-worker.js');
    workbox.register();
  });
}

Service Worker会在应用首次加载时缓存关键资源，当用户离线时，应用会使用缓存的资源继续运行。

添加到主屏幕功能

要启用"添加到主屏幕"功能，需要满足以下条件：

1. 应用使用HTTPS协议（开发环境下localhost除外）
2. 配置了Web App Manifest
3. 注册了Service Worker

create-react-native-app会自动处理这些条件。当用户访问应用时，浏览器会提示"添加到主屏幕"，点击后应用会像原生应用一样出现在设备主屏幕上。

开发与调试

启动开发服务器

使用以下命令启动开发服务器，同时支持Web和原生平台：

npm run web
# 或
yarn web

开发服务器启动后，访问http://localhost:19006即可查看Web应用。create-react-native-app使用src/index.ts中的逻辑启动开发服务器并处理命令行参数。

PWA调试工具

Chrome浏览器提供了强大的PWA调试工具：

1. 打开Chrome开发者工具（F12）
2. 切换到"Application"标签
3. 在左侧菜单中可以查看和调试Service Worker、Manifest、缓存等PWA相关功能

使用Lighthouse工具可以对PWA性能和合规性进行评估：

# 安装Lighthouse CLI
npm install -g lighthouse
# 运行评估
lighthouse http://localhost:19006 --view

构建与部署

构建Web应用

使用以下命令构建生产版本的Web应用：

expo build:web

构建完成后，生成的静态文件位于web-build目录下。这个过程由src/Template.ts中的extractAndPrepareTemplateAppAsync函数处理，它负责准备项目文件和配置。

部署PWA应用

构建完成的Web应用可以部署到任何支持静态文件的服务器。推荐使用Netlify、Vercel等支持PWA的平台，这些平台会自动配置HTTPS并提供CDN加速。

部署步骤示例（使用Netlify）：

1. 创建Netlify账户并连接GitHub仓库
2. 设置构建命令：expo build:web
3. 设置发布目录：web-build
4. 部署完成后，Netlify会提供一个HTTPS域名，访问该域名即可使用PWA应用

性能优化与最佳实践

资源预加载与缓存策略

合理的缓存策略可以显著提升PWA应用性能。在src/service-worker.js中，可以配置Workbox的缓存策略：

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';

// 缓存API请求
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate()
);

// 缓存静态资源
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst()
);

响应式设计

确保应用在不同设备上都有良好的显示效果：

1. 使用Flexbox和Grid进行布局
2. 使用DimensionsAPI获取屏幕尺寸
3. 使用媒体查询适配不同屏幕

推送通知

通过Firebase Cloud Messaging(FCM)或Web Push协议实现推送通知：

import * as Notifications from 'expo-notifications';

Notifications.requestPermissionsAsync().then(({ status }) => {
  if (status === 'granted') {
    console.log('Notification permissions granted.');
    // 注册推送通知
  }
});

总结与展望

通过create-react-native-app开发PWA应用，我们可以使用React Native的语法同时构建跨平台应用，大大提高了开发效率。本文介绍了PWA的核心功能实现、开发调试、构建部署等方面的内容，涵盖了从项目创建到上线的完整流程。

随着Web技术的不断发展，PWA的能力也在不断增强。未来，我们可以期待更多原生级别的API被引入Web平台，使PWA与原生应用的差距进一步缩小。create-react-native-app团队也在持续更新package.json中的依赖和src/Examples.ts中的模板，为开发者提供更好的PWA开发体验。

如果你有任何问题或建议，欢迎通过项目的GitHub仓库参与讨论和贡献代码。祝你的PWA开发之旅顺利！

---

点赞 + 收藏 + 关注，获取更多React Native和PWA开发技巧！下期预告："使用Expo EAS构建优化React Native应用"。

【免费下载链接】create-react-native-app 项目地址: https://gitcode.com/gh_mirrors/cre/create-react-native-app