创建react应用程序_轻松与创建React应用程序集成

创建react应用程序

Recently, I was in a situation that required workbox integration for background sync in an application. After some trial, error and success, I decided to write this article to demonstrate the easiest way I’ve found to integrate workbox with create-react-app.

最近，我处于一种需要集成工作箱才能在应用程序中进行后台同步的情况下。 经过一番尝试，错误和成功之后，我决定写这篇文章来演示我发现将Workbox与create-react-app集成的最简单方法。

This article assumes basic knowledge of create-react-app, workbox and the react framework, as we will be using some terminology associated with these technologies. There’s no need to be a pro, beginner-level knowledge should suffice.

本文假设您具有create-react-app，workbox和react框架的基本知识，因为我们将使用与这些技术相关的一些术语。 不需要专业人士，初学者水平的知识就足够了。

1.更新serviceWorker.js (1. Update serviceWorker.js)

The first step is updating the serviceWorker.js file within the src folder. We will be updating the register function. At the moment, it looks like this:

第一步是更新src文件夹中的serviceWorker.js文件。 我们将更新寄存器功能。 目前，它看起来像这样：

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
      return;
    }window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;if (isLocalhost) {
        // This is running on localhost. Let's check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config);// Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://bit.ly/CRA-PWA'
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });
  }
}

We’re going to update the following line:

我们将更新以下行：

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

To:

至：

const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;

This will allow us to create and register our own custom service worker file named ‘custom-service-worker.js’. You can name this whatever you like.

这将使我们能够创建和注册我们自己的名为“ custom-service-worker.js”的定制服务工作者文件。 您可以随意命名。

If you’d like to be able to test this in development, disable the production environment check in the following line:

如果您想在开发中进行测试，请在以下行中禁用生产环境检查：

if (process.env.NODE_ENV === 'production' && 
'serviceWorker' in navigator)

2.创建自定义服务工作者文件 (2. Create custom service worker file)

The next step is creating the custom service worker file in the public folder of our application. This should match the name we used in step 1. In our case, ‘custom-service-worker.js’

下一步是在应用程序的公用文件夹中创建自定义服务工作者文件。 这应该与我们在步骤1中使用的名称相匹配。在本例中，为'custom-service-worker.js'

We can import and use workbox from here:

我们可以从这里导入和使用工作箱：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js') if (workbox) { 
  console.log(`Yay! Workbox is loaded 🎉`); 
} else { 
  console.log(`Boo! Workbox didn't load 😬`); 
}

Once Workbox is loaded from the CDN, a workbox object is created allowing us to make use of the workbox API.

从CDN加载Workbox后，将创建一个工作箱对象，使我们可以使用工作箱API。

We can self-host workbox by downloading the files into a folder in our public folder in one of 2 ways:

我们可以通过以下两种方式之一将文件下载到公共文件夹中的一个文件夹中，从而实现自我托管工作箱：

1. Using workbox cli’s copyLibraries command

   使用Workbox CLI的copyLibraries命令

2. Downloading the files from a Github release

   从Github版本下载文件

Note that workbox will cache all modules referenced when loaded through the CDN. These modules will then be available for offline use after the first time they are referenced.

请注意，当通过CDN加载时，工作箱将缓存所有引用的模块。 这些模块在第一次被引用后将可以脱机使用。

Therefore, you do not need to host workbox yourself if this is your concern.

因此，如果您担心的话，您不需要自己托管工作箱。

In order to load workbox if we’re self-hosting, we will need to do the following:

为了在自托管时加载工作箱，我们需要执行以下操作：

importScripts('/third_party/workbox/workbox-sw.js'); workbox.setConfig({ modulePathPrefix: '/third_party/workbox/' });

In this instance, the workbox folder is contained within the third_party folder inside our application’s public folder.

在这种情况下，工作箱文件夹包含在应用程序公用文件夹内的third_party文件夹内。

Now we can finally use workbox. We can use destructuring in order to access the different workbox modules:

现在我们终于可以使用工作箱了。 我们可以使用解构来访问不同的工作箱模块：

const { backgroundSync, routing, strategies } = workbox

3.注册服务人员 (3. Register service worker)

The final step is registering the service worker in our application. Navigate to the index.js file in the src folder and change the following line:

最后一步是在我们的应用程序中注册服务工作者。 导航到src文件夹中的index.js文件，并更改以下行：

serviceWorker.unregister();

To:

至：

serviceWorker.register();

If you enjoyed this article, consider following my personal website for early access to my content before it gets published on Medium (don’t worry, it’s still free with no annoying pop-up ads!). Also, feel free to comment on this post. I’d love to hear your thoughts!

如果您喜欢这篇文章，请考虑关注我的 个人网站， 以便在我的内容在Medium上发布之前对其进行早期访问(不用担心，它仍然是免费的，没有令人讨厌的弹出广告！)。 另外，请随时对此帖子发表评论。 我很想听听您的想法！

Originally published at https://kelvinmwinuka.com on August 5, 2020.

最初于 2020年8月5日 发布在 https://kelvinmwinuka.com 上。

翻译自: https://medium.com/@KelvinMwinuka/easy-workbox-integration-with-create-react-app-540224a6300

创建react应用程序