|
| 1 | +import { Meta, Description } from '@storybook/addon-docs' |
| 2 | + |
| 3 | +<Meta |
| 4 | + title="Mobile app/Android/Web resources" |
| 5 | + parameters={{ |
| 6 | + viewMode: 'docs', |
| 7 | + previewTabs: { |
| 8 | + canvas: { hidden: true } |
| 9 | + }, |
| 10 | + }} |
| 11 | +/> |
| 12 | + |
| 13 | +# Accessing and Storing Web Resources |
| 14 | +This documentation provides a concise overview of how to store and access web resources in a React Native application for Android, using the `file:///android_asset/` URL scheme. We will cover the internal workings of Android in this context, the method for using this feature in a high-level approach, and the mechanics of loading these files into a WebView. |
| 15 | + |
| 16 | +In Android, the `file:///android_asset/` URL provides a way to access files bundled within an app's APK. These files are placed in the `assets/` directory during app development, and they are read-only at runtime. The asset mechanism is used to bundle raw resources, such as HTML files, scripts, and images, which are not compiled into the application. |
| 17 | + |
| 18 | +### Internal Workflow |
| 19 | + |
| 20 | +#### 1. File Placement |
| 21 | +During the development of an Android application, specifically when preparing to use React Native or native Android components that require local resources, developers need to manage their file organization meticulously. Here's how the file placement process typically unfolds: |
| 22 | + |
| 23 | +- **Directory Structure:** The `assets/` directory is a special folder in the Android project structure. It is located at `src/main/assets/` in the standard Android project hierarchy. This directory is not subjected to any processing by the Android build system, such as file compression, which preserves the original file format and structure. |
| 24 | + |
| 25 | +- **Types of Files:** Any file type can be placed in this directory, including HTML, JavaScript, CSS, images, and plain text files. It’s essential for developers to ensure that these files are organized in a way that mirrors how they will be referenced in the app, as the structure of folders and subfolders within the `assets/` directory will be maintained in the APK. |
| 26 | + |
| 27 | +- **Development Practices:** While developing, it's a common practice to regularly update and manage the files in the `assets/` directory as the application evolves. Changes to these files during development are reflected in the APK each time the application is built and packaged. |
| 28 | + |
| 29 | +#### 2. APK Packaging |
| 30 | +When the application is built—either for testing or for release—the contents of the `assets/` directory are bundled into the APK without modification. The APK (Android Package) is essentially a ZIP file that Android devices use to install the application. Here’s what happens during this phase: |
| 31 | + |
| 32 | +- **Build Process:** During the build process, tools like Android Studio or the Gradle build system (used in Android development) take the files from the `assets/` directory and package them into the APK under a specific path that directly mirrors the original `assets/` directory's structure. |
| 33 | + |
| 34 | +- **Compression and Storage:** Unlike the `res/` directory, where resources are processed and optimized by the Android build system, files in the `assets/` directory are not compressed; they are stored in their original form. This is crucial for certain types of files that need to be read exactly as they are, such as custom fonts or script files. |
| 35 | + |
| 36 | +- **Accessibility:** Once packaged, these files become part of the application's APK and are accessible to the Android operating system and apps installed on the device, albeit in a read-only format. |
| 37 | + |
| 38 | +#### 3. Runtime Access |
| 39 | +At runtime, when the application is running on an Android device, the assets packaged in the APK can be accessed via the `file:///android_asset/` URL. This phase involves the following aspects: |
| 40 | + |
| 41 | +- **URL Scheme:** The `file:///android_asset/` URL scheme is a special file path used in Android to refer to the contents of the `assets/` directory. This path is recognized by the Android system and allows applications to load content directly from the APK. |
| 42 | + |
| 43 | +- **WebView and Other Components:** Components like WebView, which can display web content, use this URL scheme to reference web resources (HTML, CSS, JavaScript) stored within the `assets/` directory. For example, loading an HTML file into a WebView component would involve setting the source to `file:///android_asset/path/to/file.html`. |
| 44 | + |
| 45 | +- **Security and Performance:** Accessing files from the APK is secure and efficient. Files are read directly from the device's storage and not over the internet, which not only enhances the app's performance by reducing load times but also increases security by minimizing exposure to remote exploits. |
| 46 | + |
| 47 | +## Interfacing with Native Android Code |
| 48 | +Native Modules: React Native uses native modules to perform tasks that require direct interaction with the device's API, such as accessing the file:///android_asset/ directory. These modules are written in Java (or Kotlin) and are registered with React Native's native module system. |
| 49 | +Bridging: The React Native bridge is responsible for communicating between the JavaScript environment and the native environment. When a React Native application needs to load an asset through the file:///android_asset/ URL, it invokes a native module method that handles this request. This method executes on the native side, interacting directly with Android's APIs. |
| 50 | +Method Invocation: To access assets, a native module method is defined in Java, which uses Android's AssetManager to fetch the file from the assets/ directory. This method can be exposed to JavaScript using React Native's @ReactMethod annotation, allowing it to be called from your JavaScript code. |
| 51 | + |
| 52 | + |
| 53 | +### Steps to Use: |
| 54 | +- **Prepare Assets:** Place your HTML files, JavaScript, CSS, and images in the `assets/` directory of your Android project. |
| 55 | +- **Load in WebView:** Use the WebView component from `react-native-webview` to load the URL pointing to an asset, e.g., `file:///android_asset/myfile.html`. |
| 56 | + |
| 57 | +## Loading Files in WebView |
| 58 | +The WebView component in React Native is used to embed web pages inside your app. To load local assets in the WebView, follow these steps: |
| 59 | + |
| 60 | +### Example Code |
| 61 | +```javascript |
| 62 | +import React from 'react'; |
| 63 | +import { WebView } from 'react-native-webview'; |
| 64 | + |
| 65 | +const LocalWebContent = () => { |
| 66 | + return ( |
| 67 | + <WebView |
| 68 | + source={{ uri: 'file:///android_asset/index.html' }} |
| 69 | + style={{ marginTop: 20 }} |
| 70 | + /> |
| 71 | + ); |
| 72 | +}; |
| 73 | + |
| 74 | +export default LocalWebContent; |
| 75 | +``` |
| 76 | + |
| 77 | +### Considerations |
| 78 | +- **Relative Pathing:** Ensure that any resources linked from your HTML file (like images or scripts) use correct relative paths that reference the `assets/` directory. |
| 79 | +- **MIME Types:** Android WebView may require correct MIME types to be set for certain file types to load properly. |
| 80 | + |
| 81 | +## Implications in React Native |
| 82 | +Using `file:///android_asset/` in React Native has several implications: |
| 83 | + |
| 84 | +- **Performance:** Loading files from local assets can be faster than over the network, improving the performance of the WebView component. |
| 85 | +- **Security:** It isolates web content from the network, enhancing security by preventing external attacks through web content. |
| 86 | +- **Offline Access:** Enables your application to function offline, as the assets are packaged within the APK. |
0 commit comments