forked from w3c/miniapp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
695 lines (662 loc) · 47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MiniApp Standardization White Paper</title>
<style type="text/css">
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
}
table {
border-collapse:collapse;
}
table,th, td {
border: 1px solid #666;
}
td {
padding:2px 15px;
}
</style>
<script async class="remove" src="https://www.w3.org/Tools/respec/respec-w3c-common"></script>
<script class="remove">
var respecConfig = {
specStatus: "unofficial",
shortName: "mini-app",
noRecTrack: true,
copyrightStart: "2019",
editors: [{
name: "Anqi Li",
companyURL: "http://www.alibabagroup.com/en/global/home",
company: "Alibaba"
}, {
name: "Qing An",
companyURL: "http://www.alibabagroup.com/en/global/home",
company: "Alibaba"
}, {
name: "Dapeng Liu",
companyURL: "http://www.alibabagroup.com/en/global/home",
company: "Alibaba"
}, {
name: "Hongru Zhu",
companyURL: "http://www.alibabagroup.com/en/global/home",
company: "Alibaba"
}, {
name: "Qingqian Tao",
companyURL: "http://www.baidu.com/",
company: "Baidu, Inc"
}, {
name: "Zhixing Lei",
companyURL: "http://www.baidu.com/",
company: "Baidu, Inc"
}, {
name: "Dan Zhou",
companyURL: "http://www.baidu.com/",
company: "Baidu, Inc"
}, {
name: "Zhiqiang Yu",
companyURL: "http://www.huawei.com/",
company: "Huawei"
}, {
name: "Wanming Lin",
companyURL: "http://www.intel.com/",
company: "Intel Corporation"
}, {
name: "Kaining Yuan",
companyURL: "http://www.intel.com/",
company: "Intel Corporation"
}, {
name: "Yinlin Chen",
companyURL: "https://www.mi.com/",
company: "Xiaomi"
}, {
name: "Xiaowei Jiang",
companyURL: "https://www.mi.com/",
company: "Xiaomi"
}, {
name: "Fuqiao Xue",
companyURL: "https://www.w3.org/",
company: "W3C"
}, {
name: "Lei Zhao",
companyURL: "http://www.10086.cn/",
company: "China Mobile"
}],
wg: "Chinese Web Interest Group",
wgURI: "https://www.w3.org/2018/chinese-web-ig/",
wgPublicList: "public-chinese-web",
github: "w3c/mini-app-white-paper",
wgPatentURI: "https://www.w3.org/2004/01/pp-impl/109611/status"
};
</script>
</head>
<body>
<section id='abstract'>
<p>
This document introduces a new format for mobile application, named MiniApp, which is a very popular hybrid solution relies on Web technologies but also integrates with capabilities of Native Apps.
</p>
</section>
<section id='sotd'>
<p>
This is still a work in progress. The proposal is being incubated in the <a href="https://w3c.github.io/chinese-ig/">W3C Web Chinese Interest Group</a>.
</p>
</section>
<section>
<h2>Introduction</h2>
<section>
<h2>Problems</h2>
<p>Native Apps are well received in our daily life, but still there are many things that can be done better for users.</p>
<ul>
<li>
<p>Before a user get the service from a native app, he/she often have to go through the process to download -> install -> register the app.</p>
<p>User can only keep a limited number of Native Apps on their phone due to constraint of storage capability.</p>
<p>It's not easy to share data between different Native apps.</p>
</li>
<li>
<p>To work on a Native App, developers may need to learn a few new programming languages.</p>
<p>To provide the same service with Native Apps, developers may need to maintain duplicate product for different platforms.</p>
</li>
</ul>
<p>The Web is an ideal platform to avoid these problems, but by far, it's still imperfect.</p>
<ul>
<li>
<p>Compared to the Native, it isn't easy to take advantage of the capabilities provided by the system. </p>
<p>Also, it's usually difficult to design an Web application whose performance can actually match or surpass a similar Native app.</p>
</li>
<li>
<p>On a mobile device, users obtain services or contents outside the browser very frequently, naturally, they would like all their applications to be consistent on user account, login status and user interaction across the whole system.</p>
<p>Moreover, sometimes users may want to share some data with an application if they really trust it, but for a few frequently requested information, such as personal mobile number of the current device, or the contact list, there isn't a good way for the users to give permits on the Web.</p>
</li>
</ul>
</section>
<section>
<h2>What is MiniApp?</h2>
<p>MiniApp is a new format of mobile application, a hybrid solution which relies on Web technologies (especially CSS and Javascript) but also integrates with capabilities of Native Apps.</p>
<p>MiniApps got popular from their usage on a few super-apps, as it was born with a few characters that help to fill the gap of the Web and the Native.</p>
<ul>
<li>It's free of installation.</li>
<li>Multiple webviews to improve performance.</li>
<li>It provides a few mechanisms to get access to OS capabilities or datas through the Native.</li>
<li>The content is usually more trustworthy because the app need to be validated by the platform.</li>
<li>A miniapp can be distributed to multiple MiniApp platforms (the Web, a Native App, even the OS). These platform also provides entry to the miniapp to ensure it can be easily discovered by the users.</li>
</ul>
</section>
<section>
<h2>Can we just use PWA?</h2>
<p>MiniApps are NOT aimed to replace PWA, or the Web, or the Native.</p>
<ul>
<li>Goal
<dl>
<dt>PWA</dt>
<dd>Progressive Web Apps provide user experiences that feels like the Native apps, especially with better support for offline and push APIs.</dd>
<dt>MiniApp</dt>
<dd>MiniApps try to provide seamless service by sharing data and capabilities within the Native Apps, the Web and the OS.</dd>
</dl>
</li>
<li>Host Environment
<dl>
<dt>PWA</dt>
<dd>The browser.</dd>
<dt>MiniApp</dt>
<dd>A platform with extra capabilities, compared to the Native Apps, the Web and the OS. It's easier to implement new APIs on this platfrom.</dd>
</dl>
</li>
</ul>
</section>
<section>
<h2>Case studies</h2>
<section>
<h2>Case 1: Shared Bicycle Service</h2>
<p>The popularization of MiniApps helps to make shared bike a seamless serive instead of a cumbersome application.</p>
<div class="two-cols">
<ul>
<li>User chooses any of the miniapp platform on their mobile device, which, is usually a super-app that he/she already logined;</li>
<li>User scans the QR-code label attached on a shared bicycle within the superapp;</li>
<li>The hosted-app will automatically navigate to the shared bicycle miniapp and unlocks the bicycle instantly;</li>
<li>Upon arrival, user locks the bike on the miniapp;</li>
<li>Transaction completes, a message of the payment detail is sent to the user.</li>
</ul>
<figure>
<img alt="Shared Bicycle Service" src="shared_bike.png" width="200">
<figcaption>
Shared Bicycle Service with MiniApp
</figcaption>
</figure>
</div>
<p>For users, miniapps can bring convenient from a few perspectives:</p>
<table>
<tbody><tr>
<th></th>
<th>the Web</th>
<th>Native App</th>
<th>MiniApp</th>
</tr>
<tr>
<td>Download/Install</td>
<td>No</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Verified/Trusted</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Login/Register</td>
<td>Yes</td>
<td>Yes</td>
<td>User permission</td>
</tr>
<tr>
<td>Payment</td>
<td>Send a payment request</td>
<td>Register a credit card or navigate to anther app</td>
<td>Complete within the hosted-app</td>
</tr>
</tbody></table>
</section>
<section>
<h2>Case 2: AR Zoo</h2>
<p>MiniApp developers can simply use HTML/CSS/Javascript as programming language, but MiniApp is more flexible so it excels at quick development of complex features in daily work.</p>
<p>This MiniApp tries to build a AR zoo with AI technologies to recognise the animals. Developers can easily do that by add a few components or APIs that provide access to the native capabilities or advance features, f.ex., Image Recognition, AR 3D Animal models rendering, a speech API to for speech synthesis, AR navigation provided by the map SDK.</p>
<p>MiniApps can be discovered by the search engines, by the MiniApp store in the hosted-app or by QR-code.
<figure>
<img alt="AR zoo" src="ar_zoo.png" width="600">
<figcaption>
AR Zoo MiniApp
</figcaption>
</figure>
<p>For the developers, the incentive to work on miniapps is very obvious.</p>
<table>
<tbody><tr>
<th></th>
<th>the Web</th>
<th>Native App</th>
<th>MiniApp</th>
</tr>
<tr>
<td>Discoverability</td>
<td>Search Engine</td>
<td>App Store</td>
<td>Multiple: search engines + MiniApp store in the hosted-apps + QR-code</td>
</tr>
<tr>
<td>Verified/Trusted</td>
<td>Still exploring</td>
<td>by Native App stores</td>
<td>by host App platforms</td>
</tr>
<tr>
<td>Deploy/Reload</td>
<td>load/reload the webpage</td>
<td>installed/reinstalled</td>
<td>load/reload as it's using a JS engine</td>
</tr>
<tr>
<td>Programming Language</td>
<td>Web programming language</td>
<td>new/multi languages: iOS and Android at least</td>
<td>Web programming language</td>
</tr>
<tr>
<td>APIs/Components (AR, Image Recognition, Geolocation,Speech API)</td>
<td>very basic</td>
<td>complex for web developers</td>
<td>very simple high level APIs and components</td>
</tr>
</tbody></table>
</section>
<section>
<h2>Case 3: MiniApp for IoT</h2>
<p>One of the goals of MiniApp to connect information and services across different platforms, so it's ideal for IoT applications such as Smart Automotive, voice-control speaker and Smart TV.</p>
<p>Nowadays, it's possible to convert some MiniApps to adapt the vehicle screen and system, also, a few MiniApp vendors have built a MiniApp platfrom specially design for the vehicle system, to help distribute or upgrade applications to various of car model. This brings millions of Web devolpers to the Automotive application ecosystem.</p>
<p>These Automotive miniapps can service many user scenarios, including gas filling, car washing, Electronic Toll Collection, insurance, restaurant reservation, or entertainment. For example, when the system detects the remaining fuel is less than 20%, it can recommend to the owner a Gas Pumping MiniApp. The user can get the information of the nearest gas station and head there to complete the gas pumping including the payment within MiniApp, "refueling without getting off the vehicle".</p>
<figure>
<img alt="smart car" src="smart_cars.png" width="600">
<figcaption>
MiniApp for Smart Car(Gas Pumping App)
</figcaption>
</figure>
</section>
</section>
</section>
<section>
<h2>MiniApp Overview</h2>
<section>
<h2>Core Features</h2>
<section>
<h2>Separate the View Layer from the Logic Layer</h2>
<p>In a miniapp, the view layer is usually isolated from the logic layer.</p>
<figure>
<img alt="logic layer and view layer" src="logic_view.png" width="400">
<figcaption>
General Architecture of MiniApp
</figcaption>
</figure>
<p>View Layer is responsible for rendering MiniApp pages, including Web components rendering and native components rendering, which can be seen as a hybrid rendering. For example, Web components rendering can be shandled by WebView. Since some components rendering cannot be supported by WebView or due to its performance limitation, MiniApp relies on some native components, such as map, video, etc.</p>
<p>Logic Layer is implemented by JS Worker. Worker is responsible for MiniApp’s event processing, API calling and life circle management.</p>
<p>Extended native capabilities are provided by Native App or OS, such as payment, file processing, scanning, phone call, etc. These capabilities are called through API. When a MiniApp calls a native API, it transfers the API calling to Extended Native Capabilities for further processing via JS Bridge, and obtains the result from Extended Native Capabilities via JS Bridge.</p>
<figure>
<img alt="data flow of MiniApp when an API is called" src="data_flow.png" width="600">
<figcaption>
Data flow of MiniApp when an API is called
</figcaption>
</figure>
<p>Worker establishes connection with each render, transferring the need-to-be-rendered data to render for further processing.</p>
<p>If an event is triggered by one component in a MiniApp page, this page’s render will send the event to worker for further processing. At the same time, the render can receive the data sent from worker for re-rendering the MiniApp page.</p>
<p>The rendering can be considered as stateless, and all the states are stored in the worker.</p>
<p>The benefits of separating the View Layer and the Logic Layer include:</p>
<ul>
<li>Convenient for data sharing and interaction among multiple MiniApp pages.</li>
<li>Same context within a life circle of MiniApp can provide a similar coding experience for the developers with native app developement background.</li>
<li>Separation and parallel implementation of render and JS worker can prevent the situation where a JS execution impacts or slows down the page rendering, which can help enhance the performance of rendering.</li>
</ul>
</section>
<section id="api_and_component">
<h2>Rich APIs and Components</h2>
<p>MiniApp platform provides many components to developers build complex UI, including basic components like View, Form, Image, and high-level complex component like Maps.</p>
<p>MiniApp vender also offer a number of APIs for developers to get access to capabilities of the Web and the native, including basic APIs such as UI display APIs, Image API, and those complex ones like Account API, Map API, Payment API.</p>
<p>APIs are usually used with components. When user clicks certain component on MiniApp page, it will call the related API to implement user’s command and refresh the current MiniApp page if needed.</p>
</section>
<section id="constructor">
<h2>MiniApp Constructor</h2>
<p>In order to obtain similar user experiences to native apps, MiniApp resources are usually packaged together. After downloading and installing a MiniApp package, all static page templates/CSS/JavaScript files need to present app pages are already exist on users' machine. These resources are always available without any redundant downloads until next update.</p>
<p>A MiniApp package is a compressed format (e.g. zip) archive, including:
<ul>
<li>one configuration document, located at the root directory of the package. The config file should include:
<ul>
<li>general description of the entire MiniApp.</li>
<li>description of pages and their corresponding paths, for the purpose of page locating and opening.</li>
</ul>
<li>one app-level logic file, containing JavaScript codes, deals with app-level lifecycle callbacks.</li>
<li>one or multi page files, containing templates codes for page structor, css codes for page style, and JavaScript codes for page logic.</li>
<li>support digital signature for validation.</li>
</li>
</ul>
<p>For the purpose of locating a sepecific MiniApp while searching and executing, a MiniApp must have a package name or an ID on the platform. An icon is also required for user recognization.</p>
</section>
<section>
<h2>MiniApp Widgets</h2>
<p>In addition to being presented in the form of an MiniApp page, MiniApp can also be displayed in the form of information fragment, that is, a MiniApp widget. In this form, developers can put their service and/or content to various host scenarios, called host environment, such as assistants, search page, etc.. This feature connects services of the MiniApp with the scenario, providing users with more convenience.</p>
<p>For example, when a user purchases a train ticket for trip, the MiniApp widget on smart assistant shows the train's latest status immediately. The user can click on this widget and jump to a full-screen MiniApp page for more detailed information.</p>
<figure>
<img alt="Widget from home screen to MiniApp" src="widget.png" width="600">
<figcaption>
Widget from home screen to MiniApp
</figcaption>
</figure>
<p>Same as MiniApp page, widget is also described by URI scheme. The host environment specifies the MiniApp package and the corresponding widget to be loaded through URI path, and passes data to the widget through URI query params. After the widget is loaded, it is displayed and rendered in the host environment. Data from the host and widget, as well as data from different widgets are isolated to ensure security and independence.</p>
<p>In many scenarios, a widget can open a MiniApp page for more complicated operations. In such cases, widgets often need to share data with its corresponding MiniApp, e.g. maintain a consistent login status. Therefore, the data of the widget and the MiniApp can be accessed from each side. In other word, MiniApp widget and page have same data access rights.</p>
<figure>
<img alt="widget interaction" src="widget_interaction.png" width="600">
<figcaption>
MiniApp widget interaction
</figcaption>
</figure>
<p>One of the goals of the widget is to let the user forget the traditional app concept and truly meet the user's needs in the form of service. So in addition to all app invocation paths, widgets can also be triggered by different methods on different scenarios, such as text keywords, voice analysis, picture recognition, scan code, event intent.</p>
</section>
<section>
<h2>Single-Instance, Multi-Entries</h2>
<p>There are multiple entrances to discover, open and access MiniApps. Unlike Web in multi WebView, only one instance will be created for the same MiniApp, so MiniApp keeps its status and data in a consistent manner globally. For example, after one user opens and logs in a MiniApp through the entrance of QR code for the first time, the user will remain logged in next time when the user returns from another entrance like MiniApp store.</p>
<p>The entries for MiniApps include, but not limit to:</p>
<ul>
<li>MiniApp store</li>
<li>Search Engine</li>
<li>Smart Assistant</li>
<li>QR code</li>
<li>SMS/text</li>
<li>Physical Object(with AI)</li>
<li>Browser</li>
<li>Calender items</li>
<li>Voice message(with AI)</li>
</ul>
</section>
<section>
<h2>Performance and User Experience</h2>
<p>MiniApps try to improve their performance and user experience with a few mechanisms that have been proved to be effective through practice.
<dl>
<dt>Packaging</dt>
<dd><p>With <a href="#constructor">MiniApp's constructor</a>, user only needs to download the package when the MiniApp is first opened, and then the static resources(pages/JavaScript/CSS) in the MiniApp needn't be downloaded again, so that the loading and jumping of the following pages can be more quickly responded. This feature improves user operation experience and save network traffic.</p>
<p>Meanwhile, the MiniApp has a pre-download mechanism, which can download the MiniApp packages in advance, or pre-downloads separately for the first page, and perform streaming decompression in parallel during download to minimize the time-consuming of MiniApp startup phase and balance the loss of the first page performance when openning first time.</p>
</dd>
<dt>Multiple Rendering Views</dt>
<dd><p>The MiniApp uses native page stack management between render views, and the page switching is driving by native code. Therefore, the gesture operation in the page, the switching between pages can achieve the exactly same smooth experience as Native.</p>
<p>Becase of the isolation of View layer and Logic layer, the View layer can be rendered independently. Without being blocked by JavaScript logic code, the rendering speed of the page can be greatly improved.</p>
</dd>
<dt>Pre-built and reuse of runtime environments</dt>
<dd>
<p>MiniApp's runtime environment is usually pre-built before launching a mini-app, thus reducing the time to launch a MiniApp. Pre-built content includes rendering views, static resources, developer defined prefetch requests, and MiniApps runtime container. After a MiniApp is activated, it will take over the pre-built rendering view, then we continue to pre-built a new render view into the cache pool for the next one. There is a limit on render view quantity, when any render view gets closed or the quantity limit is exceeded, the oldest opened render view will be destroyed. When the MiniApp application exit, the runtime will be destroyed and the application environment and resources can be reused.</p>
</dd>
<dt>Pre-defined Component and API</dt>
<dd>
<p>MiniApp platforms provides very rich <a href="#api_and_component">components and APIs</a>, these components and APIs are usually well designed and able to help ensure the performance of the general work from developers.</p>
</dd>
<dt>JavaScript framework presets and hot reload</dt>
<dd>
<p>MiniApp's runtime environment contains two major parts, the basic capabilities provided by Native code, and a framework, include developer API and some components, implemented by JavaScript. The JavaScript framework is built in native Apps, and will be loaded into the MiniApp runtime environment in advance before executing MiniApp. The JavaScript framework can be hot reloaded (reload during usage), which brings lots of possiblities to improve performance.</p>
</dd>
</dl>
</section>
</section>
<section>
<h2>MiniApp Landscape</h2>
<p>This section describes a few current mainstream MiniApp or relevant Platforms.</p>
<ul>
<li>Alipay Mini Program
<p>Alipay Mini Program runs on top of Alipay Native App, which is a hybrid solution of Web and Native. Alipay Mini Program relies on Web technologies as CSS and JavaScript. Meanwhile, it integrates the functionalities of Alipay Native App as payment, credit service, face authentication, etc.</p>
<p>Now there have been more than 1,000,000 Mini Programs running on Alipay Native App and 230 million DAU (Daily Active User). The user scenarios include retails, transportation, medical services, etc.</p>
</li>
<li>Baidu Smart Mini Program
<p>Baidu Smart Mini Program refers to an open ecological product that intelligently connects people to information and services, which based on Baidu APP and other partners’ platforms. Through Baidu’s AI abilities, and by understanding all contents in Smart Mini Programs, we connect user and Smart Mini Program accurately. With Baidu’s search and information flow dual engine, users can achieve an APP-like experience within Smart Mini Programs. As of July 2019, we have 150,000+ Smart Mini Programs and 270 million MAU.</p>
<p>Baidu Smart Mini Program is open-sourced within our open source alliance, which has more than 30 cooperators, covered super APPs, mobile OS, car OS, voice-control speakers and TV.</p>
</li>
<li>Quick Apps (Quick App Alliance including Xiaomi and Huawei)
<p>Quick App is a MiniApp standard developed by 12 top mobile phone manufacturers in the Quick App Alliance, covering over 200 million MAU. Developers can achieve one-time development and run on all hardware vendors' platforms. Quick Apps, which are deeply integrated in the operating system, can be obtained in multiple scenarios of the mobile phone system, with just one click. By introducing a native rendering path, an effective combination of front-end development and native performance experience is achieved.</p>
<p>Quick Apps can run in two forms: Quick App page form like native app page and a widget form that presents informations in the scene. The two are adapted to different user needs, connecting the system and the MiniApp into a whole in multiple forms.</p>
</li>
<li>360 PC MiniApp
<p>MiniApps on PC is still in an early exploration stage. 360 PC MiniApp is a light application running in their PC browser. Compared to the tranditional webpages, it's served with more functionalities and easier interaction with the PC operation system.</p>
<p>PC miniapps are only available to those validated as an enterprise account, most of the features are under tough regulartions, so that they can be considered as highly trusted web contents.</p>
</li>
<li>PWAs
<p>PWAs are the latest term to summarize modern web applications. As a counterpart of native apps, a PWAs app looks and feels like a native app, and can be installed to home screen / lanucher / start menu; it can send push notification to re-engage user; it can be used when offline and behaves under poor network condition; it works with devices of wide ranging capabilities and it's still evolving to works with new capabilities defined by open web standards; payment can be made by user inside PWAs apps; and PWAs apps are search-engine-friendly and work perfectly with hyper-links. PWAs are successful on both the technical aspect and business aspect (widely adopted by many web sites, esp. consumer facing ones).</p>
</li>
</section>
</section>
<section>
<h2>Working with the Web</h2>
<p>This section selects some typical use cases and proposes a few APIs that MiniApps would like to have support from the Web.</p>
<section>
<h2>Application Lifecycle</h2>
<section>
<h2>Hybrid Rendering</h2>
<p>MiniApp is a hybrid solution of Web rendering and Native rendering. It'd be great if there is a good way to combine the rendering results from the Web and from the Native.</p>
<figure>
<img alt="Rendering results coming from both the Web and the Native" src="rendering.png" width="600">
<figcaption>
Rendering results coming from both the Web and the Native
</figcaption>
</figure>
<p>Poposal: WebView to provide a standardized API to help integrate the native rendering result into WebView rendering result.</p>
</section>
<section>
<h2>Transition Animation</h2>
<p>MiniApp would like to provide transition animation during page switching, so that users can have similar experience as when they are using a Native App, but it's almost impossible to do that now.</p>
<p>Poposal: WebView to expose an API to call add transition animation during MiniApp page switching.</p>
</section>
<section>
<h2>Standardise the Package Constructor of MiniApp</h2>
<p>MiniApp can form a package and parsing convention for multiple MiniApp hosting platforms through a standardized distribution format. Currently, each MiniApp hosting platform provides different development tools (different packaging methods), and the MiniApp is parsed differently in different MiniApp hosting environments.</p>
<p>Poposal: The MiniApp is actually a packaged (compressed) collection of files during the distribution process. We can describe a MiniApp (.ma) with a uniform file suffix and specify how to create the .ma file and how to parse the .ma file.</p>
</section>
<section>
<h2>Standardise the navigation to a MiniApp page</h2>
<p>For a hot page in a MiniApp, it may be referenced in another MiniApp, and it is expected to be accurately evoked when the user visits.</p>
<p>Poposal: Define a standardized protocol (URI scheme) to access MiniApp.</p>
</section>
<section>
<h2>MiniApp Widgets</h2>
<p>Like Android widgets or apple dashboard, users can directly get information and/or finish their task by a MiniApp widget without opening any web or app pages. A MiniApp widget can be displayed in a environment outside of web browsers, such as desktop or dashboard.</p>
<p>Poposal:
<ul>
<li>A MiniApp widget can be displayed within a host environment, which could be either webview or a native app page. The host environment loads a widget with its corresponging URI path, which describes package and widget page. </li>
<li>A MiniApp widget can access local data or data from server. Meanwhile, a MiniApp widget can communicate with MiniApp in same package.</li>
<li>A MiniApp widget should be interactive, meaning that it should be responsive to any user behaviors/interactions. A MiniApp widget should have the ability to open a web or app page.</li>
</ul>
</p>
</section>
</section>
<section>
<h2>Performance and Tuning</h2>
<section>
<h2>Define an event of time to interactive in MiniApp</h2>
<p>MiniApp needs to know when the MiniApp page Time to Interactive (TTI) has been completed.</p>
<p>Poposal: A standardized event to notify that the MiniApp page Time to Interactive has been completed.</p>
</section>
</section>
<section>
<h2>Graphics and Media</h2>
<section>
<h2>3D Model Element</h2>
<p>3D models become more and more popular thanks to its rich details, and combined with AR, it will provide a much better user experience than 2D. The business cases might include online shopping, advertisement, education, etc. However, current web lacks of a standard and convenient way to deal with 3D model. In this document, we propose to define a HTML tag to directly handle 3D model, similar to the way we handle audio, video, image with corresponding HTML tags:
<ul>
<li>360 view
<p>User can view a 3D model in different angles via gestures. And the 3D model can be zoom in/out as well. It can be viewed in full screen, or it can be embedded in a HTML page, shown together w/ other HTML contents.</p>
</li>
<li>View with AR
<p>User can place the 3D model in the real world environment with camera. User can specify different location to place the model.</p>
</li>
</ul></p>
<p>Poposal: A <code><xmodel></code> Element to specify a 3D model in the web and to power interactive 3D contents with AR.</p>
</section>
<section>
<h2>Face Tracking</h2>
<p>Face tracking can be used in many 3D scenrio.
<ul>
<li>Face Effects in Live Video
<p>Add effects on the face in live video. These effects include full screen filter, face reshape and makeup, 2d sticker, 3d headdress, etc. Most of these effects depend heavily on the real time face tracking from video source.</p>
</li>
<li>Gaming
<p>Game developers can design game strategies based on the tracked face. Like triggering a specific game logic when eye is blinked, or check if the dropping fruit is in the opened mouth.</p>
</li>
<li>Virtual Makeup
<p>Let users try lipsticks, eye shadows, glasses, hats on the product page to help them make the decision.</p>
</li>
</ul>
</p>
<p>Poposal: A Face Tracking API use a video element as input and updates face tracking output every frame, which includes:
<ul>
<li>Bounding box of each face
</li>
<li>4x4 pose matrix of each face
</li>
<li>Normalized (x, y) landmarks points.
</li>
<li>ace geometry data including vertices, normals, texture coordinates.
</li>
</ul>
</p>
</section>
<section>
<h2>Hand gestures tracking and recognition</h2>
<p>Hand gestures can be used in video effect and AR/VR games scenario which can make apps more impressive and interactive.</p>
<p>Poposal: A high level API to track hands movement, get hands outline.</p>
</section>
<section>
<h2>Low level AR APIs based on ARCore and ARKit</h2>
<p>There are a few AR APIs in MiniApps we would to migrate to the Web, as they help to provide better AR experience in gaming, 3d model preview, interactive ads.</p>
<p>Poposal: Provide low level AR APIs based on ARCore and ARKit, which includes:</p>
<ul>
<li>Camera view matrix for world tracking
<p>Provides the 4x4 view matrix of the spatial location and orientation of the mobile phone, which can be used to update the camera matrix in their 3D virtual world in real time by developers. Thereby the position of the real world can be correlated with the position of the object in the virtual world.</p>
</li>
<li>Plane detection and tracking
<p>Detect planes in the real world and track these planes in real-time. Provide the 4x4 transform matrix which represent the center position and orientation of each plane. It can be used for placing 3D virtual object on the ground/desktop.</p>
</li>
<li>Anchor
<p>Anchor defines a fixed position and orientation in the real world. Developers can create an anchor from a 4x4 transform matrix, which can be get by hit test. This matrix will be updated each frame to ensure that the virtual object corresponding to the matrix can be fixed in one position and direction in the real scene.</p>
</li>
<li>Hit test
<p>Get a 4x4 transform matrix representing a position and orientation in the real world space corresponding to the screen position to implement functions such as clicking and placing virtual objects.</p>
</li>
</ul></p>
<figure>
<img alt="Better support for AR" src="ar_support.png" width="600">
<figcaption>
APIs to better support AR
</figcaption>
</figure>
</section>
</section>
</section>
<section>
<h2>Security and Privacy Consideration</h2>
<p>MiniApp utilizes HTTPs to support secure connection. Multiple MiniApps within same host environment are independent with each other.</p>
<p>User interactions within MiniApp needs different level of user permissions:
</p>
<table>
<tbody><tr>
<th>Permission</th>
<th>User Interactions</th>
</tr>
<tr>
<td>default(no extra action needed)</td>
<td>Page sharing, clipboard, vibration, compass, motion sensors, map, screen brightness, screen capture, battery status</td>
</tr><tr>
<td>permission on first-time usage</td>
<td>Geolocation, camera(qr code), network status, Bluetooth, NFC</td>
</tr><tr>
<td>permission on every usage</td>
<td>Contacts, file-apis, add to home screen, photo picker, phone call</td>
</tr><tr>
<td>request password</td>
<td>Payment</td>
</tr><tr>
<td>Validate with token</td>
<td>Push</td>
</tr><tr>
<td>Callback/messaging</td>
<td>Password-free Payment</td>
</tr>
</tbody></table>
</section>
<section>
<h2>Way Forward in W3C</h2>
<p>To meet the use cases and requirements of MiniApps, and make the Web standards better support the MiniApp, we hope to include the following work in W3C:</p><ul>
<li>set up a group to coordinate the MiniApp related standardization in W3C as well as to collaborate with other related W3C groups.
</li>
<li>explore innovation of user agent and enrich the Web.
</li>
<li>horizontal review (security, privacy, i18n and a11y).
</li>
</ul>
<p>In details, the following technical work has been discussed:</p><ul>
<li>further review the gap between current MiniApp APIs and Web APIs, complete the gap analysis.
</li>
<li>draft a roadmap for MiniApp standards based on the use cases and requirements selected by the group.
</li>
<li>develop specifications for features among current vendors. Target features include but not limited to:
<ul>
<li>package constructor</li>
<li>MiniApp URI scheme</li>
<li>hybrid rendering API</li>
<li>3D model tag</li>
<li>face tracking API </li>
<li>Widget</li>
</ul>
</li>
<li>design future Web APIs to be useful for both web and MiniApp environments.</li>
</ul>
</section>
<section>
<h2>Glossary</h2>
<table>
<tbody><tr>
<th>Chinese</th>
<th>English</th>
<th></th>
</tr>
<tr>
<td>小程序</td>
<td>Mini Program</td>
<td>one format of MiniApp running within Native Apps</td>
</tr><tr>
<td>快应用</td>
<td>Quick App</td>
<td>a MiniApp standard developed by 12 mobile phone manufacturers in Quick App alliances</td>
</tr><tr>
<td>渲染环境</td>
<td>rendering view</td>
<td>native view or webView</td>
</tr>
<tr>
<td>负一屏</td>
<td>smart assistant</td>
<td>A smart assistant to provide service for convenience, usually at left of the home screen</td>
</tr><tr>
<td>热更新</td>
<td>hot reload</td>
<td>no need to be re-installed when fixing or updating feature. In MiniApp, because of pratial of framework is realized by JavaScript, so MiniApp runtime can be hot reloaded.</td>
</tr>
</tbody></table>
</section>
<section class="appendix">
<h2>
Gap Analysis
</h2>
<p>
Please look at <a href="comparison.html">the comparison table of APIs in MiniApps, the W3C specs, and PWA.next</a>.
</p>
</section>
<section class="appendix">
<h2>
Acknowledgments
</h2>
<p>
Many thanks to Guanyu Liu(Qihoo 360), Yi Shen(Baidu), Hongguan Dong(Xiaomi), He Du(Xiaomi), Yifeng Xia(China Mobile), Xiaoqian Wu(W3C) who also contribute to this document.
</p>
</section>
</body>
</html>