• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Atomic Service
2
3## Pre-loading by HAP Type
4
5### HAP File Implementation
6
7To speed up the initial startup of an atomic service, you can configure it to load on demand with the use of HAP files. HAP files of an atomic service are classified as entry-type or feature-type. The entry-type HAP file contains the page code and related resources required for starting up the atomic service. The feature-type HAP files contain the rest of the code and resources. To start the atomic service, the user only needs to download and install the entry-type HAP file, which minimizes the time for downloading the atomic service.
8
9#### How to Use
10
11You create HAP files of an atomic service by creating an atomic service project in DevEco Studio. The basic project directory structure is as follows:
12
13```
14├── AppScope
15|    ├── resources
16|    └── app.json5
17├── entry
18|    └── src/main
19|       ├── ets
20|       ├── resources
21|       └── module.json5
22├── feature
23|    └── src/main
24|       ├── ets
25|       ├── resources
26|       └── module.json5
27├── library
28|    └── src/main
29|       ├── ets
30|       ├── resources
31|       └── module.json5
32├── node_modules
33```
34
35Note that you must set the **bundleType** field to **atomicService** in the [app.json5](app-configuration-file.md) file, which is located in the **AppScope** folder. The following is an example of the file content:
36
37```json
38{
39  "app": {
40    "bundleName": "com.example.hmservice",
41    "bundleType":"atomicService",
42    "vendor": "example",
43    "versionCode": 1000000,
44    "versionName": "1.0.0",
45    "icon": "$media:app_icon",
46    "label": "$string:app_name",
47    "targetAPIVersion": 9
48  }
49}
50```
51
52For details about HAP files, see [Multi-HAP Design Objectives](multi-hap-objective.md).
53
54#### Restrictions
55
561. The **installationFree** field must be set to **true** in each module-specific configuration file [module.json5](module-configuration-file.md) file.
57
582. When packaging an atomic service, comply with the following size rules:
59
60- The total size of HAP files cannot exceed 10 MB.
61
62- The size of a HAP file itself and all its dependent [HSP](in-app-hsp.md) cannot exceed 2 MB.
63
64
65### Pre-loading Implementation
66
67You can configure the system to automatically pre-download required modules when the atomic service enters a module, thereby speeding up module access.
68
69Currently, pre-loading can be implemented only through configuration, not by invoking APIs.
70
71#### How to Use
72
73Pre-loading is triggered after the first frame of the newly accessed module is rendered. You can configure what to pre-load for a module, by setting the **preloads** field under **atomicService** in the [module.json5](module-configuration-file.md) file of the module. The following is an example of the **module.json5** file of the **entry** module, saved in **entry/src/main**:
74
75```json
76{
77  "module": {
78    "name": "entry",
79    "type": "entry",
80    "srcEntry": "./ets/Application/MyAbilityStage.ts",
81    "description": "$string:entry_desc",
82    "mainElement": "MainAbility",
83    "deviceTypes": [
84      "default",
85      "tablet"
86    ],
87    "deliveryWithInstall": true,
88    "installationFree": true,
89    "pages": "$profile:main_pages",
90    "atomicService": {
91      "preloads": [
92        {
93          "moduleName": "feature"
94        }
95      ]
96    },
97    "abilities": [
98      {
99        "name": "MainAbility",
100        "srcEntry": "./ets/MainAbility/MainAbility.ts",
101        "description": "$string:MainAbility_desc",
102        "icon": "$media:icon",
103        "label": "$string:MainAbility_label",
104        "startWindowIcon": "$media:icon",
105        "startWindowBackground": "$color:white",
106        "exported": true,
107        "skills": [
108          {
109            "entities": [
110              "entity.system.home"
111            ],
112            "actions": [
113              "action.system.home"
114            ]
115          }
116        ]
117      }
118    ]
119  }
120}
121```
122
123In this example, the system automatically pre-loads the **feature** module after the first frame of the **entry** module is rendered.
124
125#### Restrictions
126
127[moduleType](../reference/apis/js-apis-bundleManager.md#moduletype) corresponding to moduleName in the **preloads** list cannot be entry.
128
129## Using Dynamic Shared Packages in Atomic Services
130
131A [Harmony Shared Package (HSP)](shared-guide.md) is a dynamic shared package for sharing code, C++ libraries, resources, and configuration files among modules.
132For details about how to use the HSP within an atomic service, see [In-Application HSP Development](in-app-hsp.md).
133
134#### How to Use
135
136Assume that the project directory structure is as follows:
137```
138├── AppScope
139|    ├── resources
140|    └── app.json5
141├── entry
142|    └── src/main
143|       ├── ets
144|           ├── entryAbility
145|           └── pages
146|               └── Index.ets
147|       ├── resources
148|       └── module.json5
149├── feature
150|    └── src/main
151|       ├── ets
152|       ├── resources
153|       └── module.json5
154├── library
155|    └── src/main
156|       ├── ets
157|           └── pages
158|               └── menu.ets
159|       ├── resources
160|       └── module.json5
161├── node_modules
162```
163
164If you want to add a button in the **entry** module to jump to the menu page (**library/src/main/ets/pages/menu.ets**) in the **library** module, you can write the following code in the **entry/src/main/ets/MainAbility/Index.ets** file of the **entry** module:
165
166```ts
167import router from '@ohos.router';
168
169@Entry
170@Component
171struct Index {
172    @State message: string = 'Hello World';
173
174    build() {
175    Row() {
176        Column() {
177        Text(this.message)
178            .fontSize(50)
179            .fontWeight(FontWeight.Bold)
180        // Add a button to respond to user clicks.
181        Button() {
182            Text('click to menu')
183            .fontSize(30)
184            .fontWeight(FontWeight.Bold)
185        }
186        .type(ButtonType.Capsule)
187        .margin({
188            top: 20
189        })
190        .backgroundColor('#0D9FFB')
191        .width('40%')
192        .height('5%')
193        // Bind click events.
194        .onClick(() => {
195            router.pushUrl({
196              url: '@bundle:com.example.hmservice/library/ets/pages/menu'
197            }).then(() => {
198              console.log("push page success");
199            }).catch(err => {
200              console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
201            })
202        })
203      .width('100%')
204    }
205    .height('100%')
206    }
207  }
208}
209```
210
211The input parameter **url** of the **router.pushUrl** API is as follows:
212```ts
213'@bundle:com.example.hmservice/library/ets/pages/menu'
214```
215The **url** content template is as follows:
216```ts
217'@bundle:bundle name/module name/path/page file name (without the extension .ets)'
218```
219