当前位置：首页 > news >正文

react pwa应用示例

news 2025/9/14 13:14:00

创建一个基于React的PWA应用，你可以使用create-react-app，它自带PWA支持，但默认是关闭的。以下是创建React PWA应用的步骤：

安装create-react-app

如果你还没有安装，你可以通过npm来安装：

npm install -g create-react-app

或者使用yarn：

yarn global add create-react-app

创建新的React应用

npx create-react-app my-pwa

这里的my-pwa是你的应用的名称，你可以根据需要来命名。

将PWA支持激活

进入你创建的应用的目录：

cd my-pwa

然后找到src/index.js文件，将serviceWorker.unregister();改为serviceWorker.register();

启动应用

yarn start

或者

npm start

现在你的应用已经是一个PWA应用了。你可以在浏览器中打开http://localhost:3000/来查看你的应用。

在使用create-react-app初始化的项目中，已经自动包含了一份默认的Service Worker文件，位于src/serviceWorker.js。但是默认情况下，这个Service Worker是未注册的，我们需要手动去注册它。

首先，确保 src/index.js 中已经将Service Worker注册了，如下所示：

import * as serviceWorker from './serviceWorker';// ...serviceWorker.register();

修改后，Service Worker就会被注册，并开始控制那些从公共路径访问到的资源。一旦Service Worker被注册，它将开始接收fetch事件并且可以通过一个可配置的响应策略来处理这些事件。

在src/serviceWorker.js文件中，你可以看到预先定义的一些策略。默认，它使用了workbox库来创建一个具有缓存策略的Service Worker。

以下是一个简单的例子，展示了如何使用 Service Worker 缓存应用的静态资源，使得应用在离线状态下仍然可以访问：

// Check if service worker is supported
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('./service-worker.js', { scope: './' }) // set the scope to root directory.then((registration) => {console.log("[Service Worker] Registered: ", registration);}).catch((error) => {console.log("[Service Worker] Registration failed: ", error);});
}