My last post “Documenting a VUE/typescript/PWA project from development to deployment” was published and I finally had time to write this post. The recent autumn recruitment is also very smooth, got the offer of netease Guangzhou post, it is really suitable for me to stay in Guangzhou development. In the recent reflection, the owner of the building I also realized that their existence is too eager for quick success and instant benefits, the front is an industry of rapid update and iteration, the most taboos is impetuous mentality, so the owner of the building decided to adjust themselves well, to have the spirit of craftsman and delay the consciousness of satisfaction. After the article also want to adjust well, as far as possible write fine write good.

This article describes how to develop a PWA with WorkBox based on the current create-React-app (currently crA version 2.0.3) and publish it to your own server.

Why did you do this project?

  1. Because PWA is already a household word
  2. Create-react-app2 provides support for PWA
  3. After cra2 was released, there were few articles developing PWA based on CRA2
  4. Get hands-on experience with the React stack
  5. To make things

First, let’s talk about the project. This project is the same as the last project based on VUE, which can be said to be a reconstruction of React. The purpose of this project is to browse some experimental information of school psychology college. The project also used react-Redux for state management (redux was introduced for practical purposes) and react-Router for routing control. Take a look at the results:

It can be seen that we opened the APP smoothly from the first-level entrance of the mobile desktop, with transition animation and normal access to experimental data under the condition of disconnection from the Internet. This is PWA, which has the experience like a native app and the portability of Web. Let’s see how create-React-App2 and WorkBox implement this project.

What PWA features does the CRA2 give us?

Note: Ladders are required for some links

Our project is based on create-React-app 2. Cra2 provides support for PWA, which allows us to upgrade our app to PWA optionally. For new cra2 features, check out what’s New about Cra2 here to see exactly what CRA2 currently offers regarding PWA support. First we generate a project using CRA2:

npx create-react-app my-app
Copy the code

As you can see, there is a serviceworker.js file in the SRC file directory. This file looks very complicated, but it checks whether the environment variable is “production” and whether the current browser is compatible with service workers. If you look at our index.js file again, you can see that the last sentence is:

serviceWorker.unregister();
Copy the code

If we want to use the PWA feature provided by CRA2, we need to change serviceworker.unregister () to serviceworker.register (), and then we package our project, In the build folder we can see that a server-worker.js file is generated along with preche-manifest.xxxxxxxxx.js and a manifest.json.

Server-worker.js specifies how we cache our resources, Preche-manifest lists our static resources using the Web-server-for-Chrome web Server tools mentioned in the previous article on VUe-CLI and PWA

When we disconnect the Internet, we can find that our app still works. This is the current DEFAULT PWA feature that CRA2 (2.0.3) gives us. By default, we generate a service-worker.js cache for our app shell so that it can open normally when offline.

restrictive

Is that enough? Clearly not enough. In practice, in addition to caching our app shell, we often need to cache our routing and request data dynamically, which is a normal thing. In other words, we need to customize our service worker to achieve the desired function.

However, in current CRA2, there is no way to customize our service-worker, unless you eject our project to expose all the configuration files, but eject is an irreversible process and exposing our configuration files is not elegant. So we need to find another way to fulfill our needs.

Why does create-react-app not provide a way to customize service workers?

In fact, it is not that CRA2 does not provide corresponding customization methods. At present, CRA2 is also preparing to implement corresponding functions. We can take a look at the following issues or requests.

  1. Custom ServiceWorker Config #2237 developer Huygn asked if the create-React-app would allow developers to customize the configuration if it supports PWA

However, Gaearon, a staff member at React. Js, responded that he had no plans to do this in the short term and might implement the idea in the future, and closed the issue.

  1. Import scripts in Service Worker #2714 An importScripts option for the SWPrecacheWebpackPlugin used by create-React-app allows us to customize our own service worker in the project’s public directory

The request was eventually shut down by Create-React-app coauthor Timer after a developer suggested a more sensible implementation

  1. Davejm, developer of Workbox service worker #4169, came up with a more reasonable solution, which was adopted. Davejm proposes replacing the SW-Precach-Webpack-Plugin with the Workbox Webpack Plugin and providing the corresponding configuration file.

From this we can see that in the future we might be able to customize our service worker as we did in vue-cli3.0 by creating a cra.config.js file in the root directory and writing something like the following:

module.exports = {
  workbox: {
    method: 'inject'.config: {
      swSrc: 'src/my-custom-service-worker.js'}}}Copy the code

One has to marvel at the power of the React community.

Now what?

Since there is currently no way to customize service workers, what should we do? About how to implement this app:

  1. In the current create-React-app based project, how to use Workbox to customize your own service worker?
  2. How to write a service worker file to cache our static files and requested data
  3. How can we deploy our project to our own server and enjoy pWA

I’m going to introduce it to you in my next article, because I found that rather than putting all the content in the same article, it’s better to separate several thin talk to be effective.

Interested students can scan the following TWO-DIMENSIONAL code to experience the project:

note:

  1. You are advised to open it in a UC browser because the UC browser supports PWA.
  2. The “Add to desktop prompt” is triggered by entering the Web app several times within a short period of time

Project address: browseExpByReact

If you’re interested, compare it to a VUe-based implementation: browseExpByVue