반응 앱 버전 확인 만들기

create react app은 작업 중인 새 프로젝트를 부트스트랩할 수 있는 훌륭한 도구입니다. 유용한 도구 체인을 하나의 단일 패키지에 묶어서 시작할 수 있습니다. 기본적으로 제공되는 몇 가지 사항은 다음과 같습니다.

React, JSX, ES6, TypeScript 및 Flow 구문 지원.

개체 확산 연산자와 같은 ES6 이외의 추가 언어입니다.

-webkit- 또는 기타 접두어가 필요하지 않도록 자동 접두어가 붙은 CSS입니다.

적용 범위 보고 지원 기능이 내장된 빠른 대화식 단위 테스트 실행기입니다.

일반적인 실수에 대해 경고하는 라이브 개발 서버입니다.

JS, CSS 및 프로덕션용 이미지를 해시 및 소스 맵과 함께 묶는 빌드 스크립트입니다.

모든 프로그레시브 웹 앱 기준을 충족하는 오프라인 우선 서비스 워커 및 웹 앱 매니페스트. (참고: 서비스 워커 사용은 [email protected] 이상부터 옵트인입니다.)

단일 종속성으로 위의 도구를 간편하게 업데이트할 수 있습니다.

이를 통해 react-router과 같은 항목을 추가할 수 있으며 새 SPA(단일 페이지 애플리케이션)에 대한 뼈대를 갖게 됩니다.

모두 훌륭하지만 단일 페이지 애플리케이션이므로 사이트를 사용하는 사람들이 사용 가능한 최신 버전이 있다는 것을 어떻게 알 수 있습니까? 이는 배포에서 API 계약을 업데이트한 경우 특히 중요합니다.

이미 이 작업을 수행할 정의된 파이프라인이 없는 한 최신 변경 사항을 적용하려면 페이지를 새로 고쳐야 할 수도 있음을 사용자에게 알릴 수 있는 저렴하고 쉬운 방법이 있습니다.

create-react-app는 yarn build 명령이 실행될 때 manifest.json 파일을 생성합니다. 이 파일은 기본적으로 응용 프로그램에 파일이 있는 위치/무엇을 알려줍니다. 파일 이름은 각 빌드에 대해 해시됩니다. 이것은 우리가 어떻게든 이 매니페스트 파일을 폴링하는 한 무언가가 변경되었는지 알 수 있음을 의미합니다...

따라서 우리는 높은 수준에 놓일 수 있는 일종의 구성 요소를 만들어야 합니다. 이 구성 요소는 이 매니페스트를 폴링하고 변경 사항이 있는지 UI에 알려야 합니다.

다음은 재질 UI를 사용하여 버전이 변경될 때마다 스낵바를 표시하는 예제입니다.

import {Button} from '@material-ui/core';
import {CloseOutlined} from '@material-ui/icons';
import {useSnackbar} from 'notistack';
import React, {useState} from 'react';

const MANIFEST = '/asset-manifest.json';
const POLL_INTERVAL = 60000;

export const VersionCheck: React.FC = ({children}) => {
  const {enqueueSnackbar, closeSnackbar} = useSnackbar();
  const [dismissedVersion, setDismissedVersion] = useState('');

  React.useEffect(() => {
    const getLatestVersion = async () => {
      const response = await fetch(MANIFEST);
      return await response.text();
    };

    const init = async () => {
      try {
        const latestVersion = await getLatestVersion();
        localStorage.setItem('tend-version', latestVersion);
      } catch (ex) {
        // log to sentry / or something
      } finally {
        setTimeout(poll, POLL_INTERVAL);
      }
    };

    const poll = async () => {
      try {
        const currentVersion = localStorage.getItem('tend-version');
        const latestVersion = await getLatestVersion();

        if (currentVersion && currentVersion !== latestVersion && latestVersion !== dismissedVersion) {
          enqueueSnackbar('A new version is available', {
            variant: 'info',
            persist: true,
            preventDuplicate: true,
            action: (key) => (
              <>
                <Button color="inherit" onClick={() => window.location.reload()}>
                  Refresh
                </Button>
                <Button
                  color="inherit"
                  variant="text"
                  onClick={() => {
                    setDismissedVersion(latestVersion);
                    closeSnackbar(key);
                  }}>
                  <CloseOutlined />
                </Button>
              </>
            ),
          });
        }
      } catch (ex) {
        // log somewhere
      } finally {
        setTimeout(poll, POLL_INTERVAL);
      }
    };

    if (process.env.NODE_ENV === 'production') {
      init();
    }
  }, [closeSnackbar, dismissedVersion, enqueueSnackbar]);

  return <>{children}</>;
};

이렇게 하면 배포된 파일이 변경되었을 때 다음 스낵바가 표시됩니다.

.

왜 이것을 원하십니까? SPA를 사용하면 때때로 최신 파일을 얻기 위해 웹 사이트를 새로 고칠 필요가 전혀 없습니다. 이는 API를 사용하는 클라이언트가 잠재적으로 매우 오래된 코드를 실행할 수 있음을 의미합니다. API와 클라이언트 간에 주요 계약을 변경한 경우 어떻게든 알려야 합니다. 이로 인해 최근에 터치한 UI 부분이 올바르게 작동하지 않는다는 버그 보고서가 단락될 수 있습니다.