进步式 Web 应用程序,或 PWAs,允许 Web 开发人员创建可以更像本地应用程序的 Web 应用程序。
PWA 的一个巨大的销售点是,它们可以使用网络连接性差,甚至没有连接性! 它们通过缓存 Web 应用程序的资产,并在可能的情况下在背景下下下载任何更新来实现这一目标。
在这个简短的教程中,我们将讨论如何使用 React和 create-react-app创建PWA。
开始的
要开始,我们将使用 Create React App 启动一个新项目。
1$ yarn create react-app my-app-name
請注意,在這裡,我們正在使用 Create 指令從 Yarn 。
接下来,我们将打开src/index.js。我们只需要更改删除注册为注册服务工作者,因为服务工作者现在默认选择了,而不是选择了:
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import * as serviceWorker from './serviceWorker';
6
7ReactDOM.render(<App />, document.getElementById('root'));
8
9// Changed from 'unregister' to 'register'
10serviceWorker.register();
我们已经启用了我们的服务员,我们的React应用程序现在将离线工作,但它只会在生产环境中工作,所以如果你想尝试它,你必须先创建一个构建:
1$ yarn build
2
3# If you'd like to serve it locally:
4$ yarn global add serve
5$ serve -s build
请记住,该应用程序将无线工作,其壳将始终可访问,但这也不是魔法,并且需要通过Ajax收集的新数据作为应用程序功能的一部分不会在无线时被收集。
如果您想定制您的 PWA 对用户的显示方式,您可以编辑位于public/manifest.json的 Web 应用程序宣言,在这里您可以设置您的应用程序的名称、图标和主题。
警告
将 Create React App 应用程序转换为 PWA是非常简单的,但它是有理由的选择。
服务人员只在通过HTTPS服务的Web应用程序上工作,唯一的例外是当你在 localhost上测试时。
其次,在所有打开的选项卡都关闭之前,无法更新缓存资产,这是因为如果不同的选项卡运行不同版本的服务人员,可能会出现问题。
最后,用户可能不熟悉渐进式 Web 应用程序,因此,重要的是为用户创建一个消息,告诉他们该应用程序是离线的,或者应用程序不能更新,直到所有其他卡都关闭。
学习更多
这是一个简短的介绍,以满足你的胃口,这里有一些关于渐进式Web应用程序和它们与Create React App的使用的资源:
- 创建渐进式 Web 应用程序来自 Google 创建 React 应用程序文档
- PWA 的概述 。