저는 현재 Expo의 OTA 업데이트에서 순수 매장 관리 EAS 업데이트로 마이그레이션하여 개발 워크플로를 간소화하고 OTA 업데이트를 처리하기 위해 공유할 수 있는 편리한 스크립트를 작성했음을 알게 되었습니다.

개요

서문 - Expo에는 앱이 무선(OTA) 업데이트를 수신할 수 있는 편리한expo-updates 모듈이 있습니다. 당신의 사용자. 그러면 사용자는 App Store나 Play Store로 이동할 필요 없이 이 새로운 업데이트를 자동으로 또는 주문형으로 설치할 수 있습니다.

두 가지 이유로 환상적입니다.

작은 수정 사항, 새로운 기능 또는 긴급 수리가 있는 경우 30분 빌드 주기를 기다리는 대신 몇 초 만에 사용자에게 푸시할 수 있습니다.

OTA 업데이트는 App Store/Play Store 검토 프로세스를 우회하므로 업데이트가 검토되고 게시되기까지 며칠을 기다릴 필요가 없습니다.

업데이트 확인

내가 작성한 유틸리티 기능을 사용하면 몇 가지 선택 사항을 개선하여 OTA 업데이트를 확인할 수 있습니다.

첫째, 사용 가능한 업데이트가 없을 때 사용자에게 기본 경고 대화 상자를 표시하는 선택적expo publish 부울을 사용합니다. 이는 사용자가 작업에 대한 피드백을 제공하기 위해 업데이트를 요청한 경우 특히 유용합니다.

그런 다음 업데이트가 완료되면 앱을 다시 시작하는 "확인"버튼이 있는 기본 경고 대화 상자가 자동으로 표시되어 앱이 자동으로 다시 시작되지 않도록 하여 이상한 경험을 방지합니다.

또한 OTA 업데이트가 존재하지 않는 개발 환경을 고려합니다. 이에 대한 논리는 유틸리티 함수에 있으므로 사용할 때 특별한 검사를 수행할 필요가 없습니다.

마지막으로 Typescript로 처리되어 자체 오류를 처리하므로 다른 파일에서 사용하기가 매우 쉽습니다.

어쨌든, 여기 우리가 간다:

코드

import { Alert } from 'react-native';
import {
  checkForUpdateAsync,
  reloadAsync,
  fetchUpdateAsync,
} from 'expo-updates';

const checkForUpdates = async (showSuccess = false): Promise<void> => {
  console.log('Checking for updates...');

  if (__DEV__) {
    if (showSuccess) {
      Alert.alert('Development', "Can't check for updates in development.");
    }
    return;
  }

  try {
    const update = await checkForUpdateAsync();
    if (update.isAvailable) {
      await fetchUpdateAsync();
      Alert.alert(
        'App successfully updated',
        'The app has been updated to the latest version. The app will now restart.',
        [{ text: 'OK', onPress: async () => reloadAsync() }],
        { cancelable: false }
      );
    } else if (showSuccess) {
      Alert.alert(
        'Up to date',
        'You already have the latest version of the app.'
      );
    }
  } catch (error) {
    console.log(error);
    Alert.alert('Error', 'An error occurred while checking for updates.');
  }
};

export default checkForUpdates;

용법

showSuccess를 사용하는 것은 매우 쉽습니다. 나는 2곳에서 사용하는 경향이 있다.

useCachedResources

앱이 부팅될 때 사용하면 좋은 기능이므로 자동으로 업데이트를 확인합니다. Typescript로 간단한 Expo 앱을 만들었다고 가정하면 다음과 같이 편리한 checkForUpdates 후크에 추가할 수 있습니다.

import { Ionicons } from '@expo/vector-icons';
import { useEffect, useState } from 'react';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { checkForUpdates } from '../api/expo';

export default function useCachedResources() {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHideAsync();

        // Here we go! Notice there's no showSuccess bool passed in.
        await checkForUpdates();

        await Font.loadAsync({
          ...Ionicons.font,
        });
      } catch (e) {
        console.warn(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

설정에서

앱에 설정 페이지가 있는 경우 프로그래밍 방식으로 OTA 업데이트를 확인하는 버튼이 있으면 좋을 수 있습니다. 그렇게 하려면 다음과 같이 표준useCachedResources(또는 기타 터치 가능한 구성 요소)을 연결하면 됩니다.

import { checkForUpdates } from '../api/expo';
import { Button } from 'react-native';

const Settings = () => {
  // ...

  return (
    <Button onPress={() => checkForUpdates(true)}>Check for updates</Button>
  );
};

그게 다야! 빠르고 편리한 업데이트를 즐기십시오.