Create React App 制作渐进式 Web 应用程序(PWA)

渐进式 Web 应用程序（Progressive Web Apps，简称PWA）是一种结合了网页和原生应用程序的技术，可以提供类似于原生应用程序的体验。PWA 可以在离线状态下运行，具有快速加载速度和响应式设计。

为什么要制作 PWA？

制作 PWA 可以带来许多好处，包括：

• 离线访问：PWA 可以在离线状态下继续运行，提供更好的用户体验。
• 快速加载速度：PWA 使用了服务工作线程（Service Worker）技术，可以在后台缓存资源，加快页面加载速度。
• 响应式设计：PWA 可以适配不同设备的屏幕大小，提供更好的用户体验。

如何制作 PWA？

要制作 PWA，首先需要确保你的应用程序具备以下特点：

1. 使用 HTTPS 协议：PWA 要求应用程序必须使用 HTTPS 协议来保证数据传输的安全性。
2. 具备 Responsiveness：应用程序需要具备响应式设计，适配不同设备的屏幕大小。
3. 提供离线访问：通过使用 Service Worker 技术，可以在离线状态下继续访问应用程序。
4. 添加到主屏幕：用户可以将 PWA 添加到主屏幕，像原生应用程序一样访问。

下面是一个简单的示例代码，演示如何通过 Create React App 制作一个基本的 PWA：

// www.javascriptcn.com code example
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.register();

// www.javascriptcn.com code example
// src/serviceWorker.js

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    window.location.hostname === '[::1]' ||
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        checkValidServiceWorker(swUrl);
      } else {
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              console.log('New content is available; please refresh.');
            } else {
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  fetch(swUrl)
    .then(response => {
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

通过以上示例代码，你可以在 Create React App 中制作一个基本的 PWA 应用程序。记得在生产环境中使用 HTTPS 协议，并测试 PWA 的离线访问功能。祝你成功！