microsoft/react-native-code-push

The page remains unchanged after the app is updated and restarted.

yangzhipeng-xx opened this issue · 9 comments

Steps to Reproduce

"react": "18.3.1",
"react-native": "0.75.2",
"react-native-code-push": "^9.0.0"
import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import CodePush from 'react-native-code-push';
import ProgressBarModal from './ProgressBarModal';
class App extends Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            progressModalVisible: false,
            syncMessage: '',
            progress: {}
        }
    }
    componentDidMount() {
        console.log('开始检查更新')
        this.syncImmediate(); //开始检查更新
    }
    syncImmediate() {
        CodePush.sync(
            {
                // IMMEDIATE ON_NEXT_RESTART ON_NEXT_RESUME ON_NEXT_SUSPEND
                installMode: CodePush.InstallMode.ON_NEXT_SUSPEND,
                updateDialog: {
                    appendReleaseDescription: true, //是否显示更新description,默认为false
                    descriptionPrefix: '更新内容:', //更新说明的前缀。 默认是” Description:
                    mandatoryContinueButtonLabel: '立即更新', //强制更新的按钮文字,默认为continue
                    mandatoryUpdateMessage: '', //- 强制更新时,更新通知. Defaults to “An update is available that must be installed.”.
                    optionalIgnoreButtonLabel: '稍后', //非强制更新时,取消按钮文字,默认是ignore
                    optionalInstallButtonLabel: '后台更新', //非强制更新时,确认文字. Defaults to “Install”
                    optionalUpdateMessage: '有新版本了,是否更新?', //非强制更新时,更新通知. Defaults to “An update is available. Would you like to install it?”.
                    title: '更新提示', //要显示的更新通知的标题. Defaults to “Update available”.
                },
            },
            this.codePushStatusDidChange.bind(this),
            this.codePushDownloadDidProgress.bind(this),
        );
    }

    codePushStatusDidChange(syncStatus: string | number) {
        console.log('codePushStatusDidChange is:' + syncStatus);
        switch (syncStatus) {
            case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
                this.setState({ syncMessage: 'Checking for update.' });
                break;
            case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
                this.setState({ syncMessage: 'Downloading package.', progressModalVisible: true });
                break;
            case CodePush.SyncStatus.AWAITING_USER_ACTION:
                this.setState({ syncMessage: 'Awaiting user action.' });
                break;
            case CodePush.SyncStatus.INSTALLING_UPDATE:
                this.setState({ syncMessage: 'Installing update.', progressModalVisible: true });
                break;
            case CodePush.SyncStatus.UP_TO_DATE:
                this.setState({ syncMessage: 'App up to date.', progress: false });
                break;
            case CodePush.SyncStatus.UPDATE_IGNORED:
                this.setState({ syncMessage: 'Update cancelled by user.', progress: false, });
                break;
            case CodePush.SyncStatus.UPDATE_INSTALLED:
                this.setState({ syncMessage: 'Update installed and will be applied on restart.', progress: false, });
                break;
            case CodePush.SyncStatus.UNKNOWN_ERROR:
                this.setState({ syncMessage: 'An unknown error occurred.', progress: false, });
                break;
        }
    }

    codePushDownloadDidProgress(progress: any) {
        console.log('codePushDownloadDidProgress is11:' + JSON.stringify(progress));
        this.setState({ progress });
    }


    render() {
        let progressView;
        if (this.state.progress) {
            let total: any = (this.state.progress.totalBytes / (1024 * 1024)).toFixed(2);
            let received: any = (this.state.progress.receivedBytes / (1024 * 1024)).toFixed(2);
            let progress: number = (received / total) * 100;
            progressView = (
                <ProgressBarModal
                    progress={progress}
                    totalPackageSize={total}
                    receivedPackageSize={received}
                    progressModalVisible={this.state.progressModalVisible}
                />

            );
        }
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>欢迎使用热更新--test!</Text>
                <Text>SyncStatus: {this.state.syncMessage}</Text>
                <Text>{this.state.progressModalVisible.toString()}</Text>
                <TouchableOpacity onPress={this.syncImmediate.bind(this)}>
                    <Text style={styles.syncButton}>Press for dialog-driven sync</Text>
                </TouchableOpacity>
                {progressView}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        paddingTop: 10,
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    syncButton: {
        color: 'green',
        fontSize: 17,
    },
})

let codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };


export default CodePush(codePushOptions)(App);

On ios, When I clicked Update Now, the update was applied and then restarted, but the page did not change after restart.

Hello @yangzhipeng-xx thank you for reaching out. Could you please share codepush logs so i can further assist you? Take a look here how to enable logs for IOS app.

Hi @DordeDimitrijev
I use 'code-push-server' and set up a local server to work with 'code-push-cli'

terminal

 BUNDLE  ./index.js 

 LOG  Running "AwesomeProject" with {"rootTag":11,"initialProps":{"concurrentRoot":false}}
 LOG  开始检查更新
 LOG  codePushStatusDidChange is:5
 LOG  [CodePush] Reporting CodePush update success (v2)
 LOG  codePushStatusDidChange is:0

info.plist

<key>CodePushDeploymentKey</key>
<string>d5QmUSkavUtdK1NzaB7a6gRv2dxE4ksvOXqog</string>
<key>CodePushServerURL</key>
<string>http://10.51.126.168:3000/</string>

AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <CodePush/CodePush.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"AwesomeProject";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  // return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  return [CodePush bundleURL];
#endif
}

@end

I see that you are using forked repos of code-push-server and code-push-cli, so we can't guarantee it will work properly. I suggest that you use this code-push repo with appcenter or you can build your own standalone code-push-server from official repo.

I've fixed the problem and now update the code page on the server after reboot. But now I have a new problem. When I open the app for the second time, it goes back to the page before the update. How can I solve this problem?

Is this occuring with offical code-push and official code-push-server or appcenter, If so please share some logs.

@yangzhipeng-xx to keep the code-push persists, make sure to run codePush.notifyAppReady() after installing the new bundle.

Closing due inactivity.

@yangzhipeng-xx How did you solve this problem can you share i am having the same problem

Hello @nguyenductoan1995 thank you for reaching out. Are you using custom code-push server, if so please check the comment posted for reference.

I see that you are using forked repos of code-push-server and code-push-cli, so we can't guarantee it will work properly. I suggest that you use this code-push repo with appcenter or you can build your own standalone code-push-server from official repo.