돌아가기

Resolving Issues Where JavaScript Does Not Execute in React Native WebView

11/14/2024 6:17:15 PM

Let's set up the Metro bundle.

Below are the instructions for setting up the Metro bundle and configuring Release settings using ChatGPT o1-mini.

Release configuration allows you to prepare your iOS app developed with React Native for distribution on the App Store. Below is a step-by-step guide that explains everything from setting up the Metro bundler to creating a release build in Xcode, code signing, optimization, testing, and deployment.

1. Prepare the App

1.1. Configure App Icon and Splash Screen

For the release build, ensure that the app icon and splash screen are correctly set up.

  • App Icon: Configure it through the AppIcon in the Images.xcassets folder. Prepare and add icon files in various resolutions.

  • Splash Screen: Edit the LaunchScreen.storyboard file to design the splash screen.

1.2. Set App Version and Build Number

In the ios/MyWebViewApp/Info.plist file, set CFBundleShortVersionString (app version) and CFBundleVersion (build number).

<key>CFBundleShortVersionString</key>
<string>1.0.0</string>
<key>CFBundleVersion</key>
<string>1</string>

2. Optimize Metro Bundler

For the release build, optimize the bundle size and remove debugging-related code.

2.1. Add Bundle Generation Script

Add a script for generating the release bundle in package.json.

"scripts": {
  "bundle-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios"
}

2.2. Run Bundle Generation

Execute the following command in the terminal to generate the bundle.

npm run bundle-ios

Or if using Yarn:

yarn bundle-ios

The generated main.jsbundle file will be included in the Xcode project.

3. Configure Release Build in Xcode

3.1. Open Xcode

Open Xcode by navigating to the project root directory and opening the ios/MyWebViewApp.xcworkspace file.

3.2. Change Build Settings

  1. Select Target: Choose the app target in the project navigator.
  2. General Tab:
    • Bundle Identifier: Set a unique identifier (e.g., com.yourcompany.MyWebViewApp).
    • Version and Build: Ensure they match the values set in the previous step.
    • App Icons and Launch Images: Verify they are correctly set.
  3. Signing & Capabilities Tab:
    • Enable Automatically manage signing or manually set the provisioning profile.
    • Select the appropriate Team for your development team.

3.3. Set Release Scheme

  1. Go to Product > Scheme > Edit Scheme.
  2. In the Run section, set Build Configuration to Release.
  3. In the Archive section, also set Build Configuration to Release.

3.4. Include App Bundle

Open the AppDelegate.m file and configure it to load the bundle file.

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

#if DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MyWebViewApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  // Other code...
}
@end

This configuration ensures that the pre-generated main.jsbundle is used for the release build.

4. Code Signing and Provisioning Profile

4.1. Set Up Apple Developer Account

  • Log in to your Apple Developer account.
  • Create the necessary certificates and provisioning profiles.

4.2. Configure Certificates and Provisioning Profiles in Xcode

  • In the Signing & Capabilities tab, if Automatically manage signing is enabled, Xcode will handle signing automatically.
  • If signing manually, select the correct certificates and provisioning profiles.

5. Create and Test Release Build

5.1. Create Archive

  1. Select Product > Archive from the menu.
  2. Once the build is complete, Xcode's Organizer window will open.

5.2. Testing

  • Use TestFlight to distribute the app to beta testers for testing.
  • When testing on actual devices, you can use an Ad Hoc provisioning profile.

6. Deploy to the App Store

6.1. Prepare App Information

  • Prepare necessary metadata such as App Description, Screenshots, and Icons.
  • Log in to App Store Connect and register a new app.

6.2. Submit the App

  1. In the Organizer window, click Distribute App.
  2. Select App Store Connect and follow the prompts to upload the app.
  3. Once the upload is complete, proceed with the submission process in App Store Connect.

7. Additional Optimization and Considerations

7.1. Code Obfuscation and Security

In the release build, you can protect your source code by using code obfuscation tools. For example, you can use the react-native-obfuscating-transformer package.

npm install react-native-obfuscating-transformer --save-dev

Modify the metro.config.js file to add the obfuscator.

const ObfuscatingTransformer = require('react-native-obfuscating-transformer');

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-obfuscating-transformer'),
    obfuscatorOptions: {
      // Set obfuscation options
    },
  },
  resolver: {
    /* resolver settings */
  },
};

7.2. Performance Optimization

  • Image Optimization: Reduce image file sizes and remove unnecessary images.
  • Code Splitting: Implement code splitting if necessary to reduce initial loading times.

7.3. Reduce App Size

Remove unused packages and utilize metro's dead code elimination to reduce the app size.

8. Troubleshooting

If the release bundle is not loading correctly or issues arise, double-check the bundle generation process and ensure that the main.jsbundle file is correctly included in the Xcode project.

8.2. Signing Errors

If you encounter code signing errors, review the Signing & Capabilities settings in Xcode and ensure that the correct certificates and provisioning profiles are being used.

8.3. App Rejection by Apple

Ensure that your app complies with Apple's guidelines and accurately address any rejection reasons. Refer to Apple's App Review Guidelines for more information.

9. References

Release configuration can be more complex than initial development settings, but by following the steps above, you can successfully deploy your iOS app. If you have additional questions or encounter issues, feel free to reach out!