diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6433079..2fde3ec 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,15 @@ -# MiniApps Ecosystem Community Group +# MiniApp Standardization -This repository is being used for work in the W3C MiniApps Ecosystem Community Group, governed by the [W3C Community License Agreement (CLA)](https://www.w3.org/community/about/agreements/cla/). To make substantive contributions, you must join the CG. +This repository is being used for work in the MiniApps Working Group and the W3C MiniApps Ecosystem Community Group. Some documents are intended to become part of Recommendation-track documents, and are governed by the: + + * [W3C Patent Policy](https://www.w3.org/Consortium/Patent-Policy-20200915/) + * [Software and Document License](https://www.w3.org/Consortium/Legal/copyright-software) + +To make substantive contributions to these specifications, you must either participate in the relevant W3C Working Group or make a non-member patent licensing commitment. + +Some documents are still incubated in the Community Group, and are governed by the [W3C Community License Agreement (CLA)](https://www.w3.org/community/about/agreements/cla/). + +To make substantive contributions, you must join the CG. If you are not the sole contributor to a contribution (pull request), please identify all contributors in the pull request comment. diff --git a/LICENSE.md b/LICENSE.md index a792aa8..2c006ec 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,9 +1,5 @@ -All Reports in this Repository are licensed by Contributors -under the -[W3C Software and Document License](https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document). +All Reports in this Repository are licensed by Contributors under the [W3C Software and Document License](https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document). -Contributions to Specifications are made under the -[W3C CLA](https://www.w3.org/community/about/agreements/cla/). +Contributions to Specifications are made under the [W3C Software and Document License](https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document) or the [W3C CLA](https://www.w3.org/community/about/agreements/cla/). -Contributions to Test Suites are made under the -[W3C 3-clause BSD License](https://www.w3.org/Consortium/Legal/2008/03-bsd-license.html) +Contributions to Test Suites are made under the [W3C 3-clause BSD License](https://www.w3.org/Consortium/Legal/2008/03-bsd-license.html). diff --git a/Meetings/2021-04-CJK/agenda.html b/Meetings/2021-04-CJK/agenda.html new file mode 100644 index 0000000..000af98 --- /dev/null +++ b/Meetings/2021-04-CJK/agenda.html @@ -0,0 +1 @@ + diff --git a/Meetings/2021-04-CJK/agenda_ja.html b/Meetings/2021-04-CJK/agenda_ja.html new file mode 100644 index 0000000..bff76c1 --- /dev/null +++ b/Meetings/2021-04-CJK/agenda_ja.html @@ -0,0 +1 @@ + diff --git a/Meetings/2021-04-CJK/agenda_zh.html b/Meetings/2021-04-CJK/agenda_zh.html new file mode 100644 index 0000000..e668a3a --- /dev/null +++ b/Meetings/2021-04-CJK/agenda_zh.html @@ -0,0 +1 @@ + diff --git a/Meetings/2021-04-CJK/index.html b/Meetings/2021-04-CJK/index.html new file mode 100644 index 0000000..49c5c61 --- /dev/null +++ b/Meetings/2021-04-CJK/index.html @@ -0,0 +1 @@ + diff --git a/Meetings/2021-04-CJK/index_ja.html b/Meetings/2021-04-CJK/index_ja.html new file mode 100755 index 0000000..74b9ec3 --- /dev/null +++ b/Meetings/2021-04-CJK/index_ja.html @@ -0,0 +1 @@ + diff --git a/Meetings/2021-04-CJK/index_zh.html b/Meetings/2021-04-CJK/index_zh.html new file mode 100755 index 0000000..31723e2 --- /dev/null +++ b/Meetings/2021-04-CJK/index_zh.html @@ -0,0 +1 @@ + diff --git a/Meetings/CG.md b/Meetings/CG.md new file mode 100644 index 0000000..3352551 --- /dev/null +++ b/Meetings/CG.md @@ -0,0 +1,51 @@ +# MiniApps Ecosystem CG Meetings + +This document contains links to meeting minutes of the CG. + +## 2022 + +* [17 March 2022 TeleConf](https://www.w3.org/2022/03/17-miniapp-minutes.html) +* [17 February 2022 TeleConf](https://www.w3.org/2022/02/17-MiniApp-minutes.html) +* [13 January 2022 TeleConf](https://www.w3.org/2022/01/13-miniapp-minutes.html) + +## 2021 + +* [16 December 2021 TeleConf](https://www.w3.org/2021/12/16-miniapp-minutes.html) +* [18 November 2021 TeleConf](https://www.w3.org/2021/11/18-MiniApp-minutes.html) +* [28 October 2021 TPAC vF2F](https://www.w3.org/2021/10/28-MiniApp-minutes.html) +* [19 October 2021 TPAC Breakout Session](https://www.w3.org/2021/10/18-miniapptools-minutes.html) +* [16 September 2021 TeleConf](https://www.w3.org/2021/09/16-miniapp-minutes.html) +* [19 August 2021 TeleConf](https://www.w3.org/2021/08/19-miniapp-minutes.html) +* [15 July 2021 TeleConf](https://www.w3.org/2021/07/15-miniapp-minutes.html) +* [17 June 2021 TeleConf](https://www.w3.org/2021/06/17-miniapp-minutes.html) +* [20 May 2021 TeleConf](https://www.w3.org/2021/05/20-MiniApp-minutes.html) +* [22 April 2021 TeleConf](https://www.w3.org/2021/04/22-miniapp-minutes.html) +* [8 April 2021 CJK Meeting](https://www.w3.org/2021/03/miniapp-cjk/index.html) ([minutes](https://www.w3.org/2021/04/08-MiniApp-minutes.html)) +* [25 March 2021 TeleConf](https://www.w3.org/2021/03/25-miniapp-minutes.html) +* [25 Feb 2021 TeleConf](https://www.w3.org/2021/02/25-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2021Mar/0001.html)) +* [14 January 2021 TeleConf](https://www.w3.org/2021/01/14-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Member/internal-miniapps/2021Jan/0001.html)) + +## 2020 + +* [10 December 2020 TeleConf](https://www.w3.org/2020/12/10-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Dec/0000.html)) +* [19 November 2020 TeleConf](https://www.w3.org/2020/11/19-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Nov/0000.html)) +* [29 October 2020 TPAC Breakout Session](https://www.w3.org/2020/10/29-MiniApp-Standardization-minutes.html) +* [15 October 2020 TeleConf](https://www.w3.org/2020/10/15-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Oct/0003.html)) +* [10 September 2020 TeleConf](https://www.w3.org/2020/09/10-miniapp-minutes.html) +* [26 August 2020 TeleConf on manifest](https://www.w3.org/2020/08/26-manifest-minutes.html) +* [6 August 2020 TeleConf](https://www.w3.org/2020/08/06-Miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Aug/0001.html)) +* [30-31 July 2020 Virtual Meeting](https://www.w3.org/2020/07/miniapp-virtual-meeting/index.html) ([day 1](https://www.w3.org/2020/07/30-miniapp-minutes.html), [day 2](https://www.w3.org/2020/07/31-miniapp-minutes.html)) +* [9 July 2020 TeleConf](https://www.w3.org/2020/07/09-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jul/0001.html)) +* [18 June 2020 TeleConf - draft WG charter](https://www.w3.org/2020/06/18-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jun/0001.html)) +* [11 June 2020 TeleConf](https://www.w3.org/2020/06/11-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jun/0000.html)) +* [14 May 2020 TeleConf](https://www.w3.org/2020/05/14-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020May/0001.html)) +* [9 April 2020 TeleConf](https://www.w3.org/2020/04/09-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Apr/0000.html)) +* [12 March 2020 TeleConf](https://www.w3.org/2020/03/12-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Mar/0001.html)) +* [13 Feb 2020 TeleConf](https://www.w3.org/2020/02/13-MiniApp-minutes.html) +* [9 Jan 2020 TeleConf](https://www.w3.org/2020/01/09-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jan/0000.html)) + +## 2019 + +* [5 Dec 2019 TeleConf](https://www.w3.org/2019/12/05-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Dec/0000.html)) +* [7 Nov 2019 TeleConf](https://www.w3.org/2019/11/07-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Nov/0000.html)) +* [17 Oct 2019 TeleConf](https://www.w3.org/2019/10/17-MiniApp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Oct/0002.html)) diff --git a/Meetings/Meetings.md b/Meetings/Meetings.md index 05f9798..ccac81b 100644 --- a/Meetings/Meetings.md +++ b/Meetings/Meetings.md @@ -1,20 +1,3 @@ -# MiniApps Ecosystem CG Meetings +# Meetings -This document contains links to meeting minutes of the CG. - -## 2020 - -* [18 June 2020 TeleConf - draft WG charter](https://www.w3.org/2020/06/18-miniapp-minutes.html) ([Summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jun/0001.html)) - -* [11 June 2020 TeleConf](https://www.w3.org/2020/06/11-miniapp-minutes.html) ([Summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jun/0000.html)) -* [14 May 2020 TeleConf](https://www.w3.org/2020/05/14-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020May/0001.html)) -* [9 April 2020 TeleConf](https://www.w3.org/2020/04/09-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Apr/0000.html)) -* [12 March 2020 TeleConf](https://www.w3.org/2020/03/12-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Mar/0001.html)) -* [13 Feb 2020 TeleConf](https://www.w3.org/2020/02/13-MiniApp-minutes.html) -* [9 Jan 2020 TeleConf](https://www.w3.org/2020/01/09-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2020Jan/0000.html)) - -## 2019 - -* [5 Dec 2019 TeleConf](https://www.w3.org/2019/12/05-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Dec/0000.html)) -* [7 Nov 2019 TeleConf](https://www.w3.org/2019/11/07-miniapp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Nov/0000.html)) -* [17 Oct 2019 TeleConf](https://www.w3.org/2019/10/17-MiniApp-minutes.html) ([summary](https://lists.w3.org/Archives/Public/public-miniapps/2019Oct/0002.html)) +See [WG Meetings](https://github.com/w3c/miniapp/blob/gh-pages/Meetings/WG.md) and [CG Meetings](https://github.com/w3c/miniapp/blob/gh-pages/Meetings/CG.md). diff --git a/Meetings/WG.md b/Meetings/WG.md new file mode 100644 index 0000000..faecdc0 --- /dev/null +++ b/Meetings/WG.md @@ -0,0 +1,27 @@ +# MiniApps WG Meetings + +This document contains links to meeting minutes of the WG. + +## 2022 + +* [28 April 2022 TeleConf](https://www.w3.org/2022/04/28-MiniApp-minutes.html) +* [24 March 2022 TeleConf](https://www.w3.org/2022/03/24-miniapp-minutes.html) +* [24 February 2022 TeleConf](https://www.w3.org/2022/02/24-miniapp-minutes.html) +* [20 January 2022 TeleConf](https://www.w3.org/2022/01/20-miniapp-minutes.html) + +## 2021 + +* [16 December 2021 TeleConf](https://www.w3.org/2021/12/16-miniapp-minutes.html) +* [25 November 2021 TeleConf](https://www.w3.org/2021/11/25-MiniApp-minutes.html) +* [28 October 2021 TPAC vF2F](https://www.w3.org/2021/10/28-MiniApp-minutes.html) +* [19 October 2021 TPAC Breakout Session](https://www.w3.org/2021/10/18-miniapptools-minutes.html) +* [23 September 2021 TeleConf](https://www.w3.org/2021/09/23-MiniApp-minutes.html) +* [26 August 2021 TeleConf](https://www.w3.org/2021/08/26-miniapp-minutes.html) +* [29 July 2021 TeleConf](https://www.w3.org/2021/07/29-miniapp-minutes.html) +* [24 June 2021 TeleConf](https://www.w3.org/2021/06/24-MiniApp-minutes.html) +* [27 May 2021 TeleConf](https://www.w3.org/2021/05/27-miniapp-minutes.html) +* [29 April 2021 TeleConf](https://www.w3.org/2021/04/29-MiniApp-minutes.html) +* [8 April 2021 CJK Meeting](https://www.w3.org/2021/03/miniapp-cjk/index.html) ([minutes](https://www.w3.org/2021/04/08-MiniApp-minutes.html)) +* [1 April 2021 TeleConf](https://www.w3.org/2021/04/01-miniapp-minutes.html) +* [4 March 2021 TeleConf](https://www.w3.org/2021/03/04-miniapp-minutes.html) +* [27 January 2021 Virtual Meeting (in Chinese)](https://www.w3.org/2021/01/27-MiniApps-WG-session.html) diff --git a/README.md b/README.md index 5a3d778..97f384f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,20 @@ # MiniApp Standardization -* [CG homepage](https://www.w3.org/community/miniapps/) -* [CG Specs](https://github.com/w3c/miniapp/tree/gh-pages/specs) +## MiniApps Working Group + +* [WG Homepage](https://www.w3.org/2021/miniapps/) +* [WG Specs](https://github.com/w3c/miniapp/tree/gh-pages/specs#wg-documents) +* [WG Charter](https://www.w3.org/2021/01/miniapps-wg-charter.html) +* [WG Meeting Minutes](https://github.com/w3c/miniapp/blob/gh-pages/Meetings/WG.md) +* [WG Calendar](https://www.w3.org/groups/wg/miniapps/calendar) + +## MiniApps Ecosystem Community Group + +* [CG Homepage](https://www.w3.org/community/miniapps/) +* [CG Specs](https://github.com/w3c/miniapp/tree/gh-pages/specs#cg-documents) * [CG Charter](https://w3c.github.io/miniapp/charters/cg.html) -* [CG Meetings](https://github.com/w3c/miniapp/blob/gh-pages/Meetings/Meetings.md) +* [CG Meeting Minutes](https://github.com/w3c/miniapp/blob/gh-pages/Meetings/CG.md) +* [CG Calendar](https://www.w3.org/groups/cg/miniapps/calendar) ## Other documents diff --git a/charters/cg.html b/charters/cg.html index c02f269..c3a54f8 100644 --- a/charters/cg.html +++ b/charters/cg.html @@ -74,7 +74,7 @@

Last Modified:
- 5 December 2019 + 16 October 2020

@@ -91,7 +91,7 @@

The MiniApp Ecosystem Community Group aims to discuss proposals for MiniApp features that would benefit the interoperability and robustness of MiniApp ecosystem, including:

Basic architecture and essential functions of MiniApp such as the URI scheme, widget, application lifecycle and event, as well as Manifest; +
Basic architecture and essential functions of MiniApp such as addressing, widget, application lifecycle and event, as well as Manifest;
Elements and APIs that would enhance the interoperability among different MiniApp platforms, including UI elements, Device API, and those advanced APIs such as Account API and Map API;
Coordination with current W3C efforts, especially PWA, on the commonality of Web features;

Carry out horizontal review for accessibility, internationalization, privacy, and security for MiniApp specifications; @@ -108,10 +108,11 @@

Based on the MiniApp Standardization White Paper as well as previous discussion in W3C Chinese Web Interest Group, the following projects are proposed as initial standardization exploration of MiniApp.

URI scheme -
Widget
Application life cycle and events
Manifest +
Packaging +
Addressing +
Widget

New projects or status changes are communicated to the group through the public mailing list. Chairs and editors should publish status updates to the group public mailing list to allow group participants to monitor progress without having to directly watch every repo.

diff --git a/charters/wg-2020.html b/charters/wg-2020.html index 2d61dca..5872071 100644 --- a/charters/wg-2020.html +++ b/charters/wg-2020.html @@ -33,7 +33,7 @@

- Goals + Mission

Scope @@ -76,12 +76,18 @@

The mission of the MiniApps Working Group is to produce specifications that facilitate the development of interoperable and robust MiniApps. -
-
- Join the - MiniApps Working Group. + "https://www.w3.org/2021/miniapps/">MiniApps Working Group is to produce specifications that facilitate the development of interoperable and robust MiniApps.
+ +
+
Join the MiniApps Working Group.
+
+ +
This proposed charter is available + on GitHub. + + Feel free to raise issues. +
@@ -89,24 +95,23 @@
End date
- @@ -115,27 +120,43 @@

- TBD + 2023-01-20

Chairs - TBD + + Qing An (Alibaba), Zitao Wang (Huawei), Dan Zhou (Baidu)

Team Contact
- (FTE %: 10) - Fuqiao Xue + Fuqiao Xue (0.2 FTE)

Teleconferences: topic-specific calls may be held
- Face-to-face: 1 or 2 per year (only as needed) + Face-to-face: at least 1 per year

-
- Scope +
+ Mission
-
MiniApp as a new form of mobile application, leveraging both Web technologies (especially CSS and JavaScript) as well as capabilities of native applications, is gaining more and more popularity in Asian countries such as China. To enhance the interoperability between different MiniApp platforms (including super applications and native operating systems), main stream MiniApp vendors has been working together in W3C Chinese Web Interest Group since May 2019 and published a MiniApp Standardization White Paper in September 2019 as the initial standardization exploration for MiniApp technologies. As more global companies get interested in joining the MiniApp related discussion, the MiniApps Ecosystem Community Group was proposed and approved during TPAC 2019 so that global Web community can join the discussion.
-
- During the exploration phase, potential standard requirements are identified due to the different nature of MiniApp comparing to the typical web environment. For instance, the hosting platform may not be a browser and the application construction is not based on web pages. Therefore different but relevant technologies are used for UI configuration and rendering, resource packaging and the API access to local system capabilities. Such cases have not be covered by existing Web standards such as Web Packaging, Web App Manifest, and Web APIs. -
+ MiniApp as a new form of mobile application, leveraging both Web technologies (especially CSS and JavaScript) as well as capabilities of native applications, is gaining more and more popularity in the globe. To enhance the interoperability between MiniApp platforms and the Web, and between different MiniApp platforms (applications or operating systems that are hosts to MiniApps), mainstream MiniApp vendors and related stakeholders have been working together in W3C Chinese Web Interest Group since May 2019 and published a MiniApp Standardization White Paper in September 2019 as the initial standardization exploration for MiniApp technologies. As more global companies get interested in joining the MiniApp related discussion, the MiniApps Ecosystem Community Group was proposed and approved during TPAC 2019 so that the global Web community can join the discussion.
-
The MiniApps Working Group aims to work on specifications incubated in the MiniApps Ecosystem Community Group for MiniApp features that would benefit the interoperability and robustness of MiniApp ecosystem, including:
+
+ During the exploration phase, potential standard requirements have been identified due to the unique nature of MiniApp in comparison to the typical Web environment. Substantial research work and joint discussion with related W3C groups have been conducted to clarify the requirements and possible solutions for MiniApp standardization. For instance, the hosting platform may or may not be a browser, and the application construction may or may not be based on web resources. Therefore different but relevant technologies are used for UI configuration and rendering, resource packaging, and the API access to local system capabilities. Such cases have not been fully covered by existing Web standards such as Web Packaging, Web App Manifest, or Web APIs. +
+
The MiniApps Working Group aims to harmonize the heterogeneous MiniApp ecosystem, enabling interoperability among the different MiniApp platforms, maximizing the convergence of MiniApps and the World Wide Web, reducing the development costs and facilitating the adoption of this technology.
+
+
+
+ Scope +
+
The work will be based on the specifications incubated in the MiniApps Ecosystem Community Group for MiniApp features, which include the following:

-
Basic architecture and essential functions of MiniApp such as the URI scheme, widget, application lifecycle and event, manifest, and packaging; -
Components, APIs, and a template mechanism that would enhance the interoperability among different MiniApp platforms, such as UI components, Device APIs, Account API etc.; -
Coordination with other W3C efforts, especially Progressive Web Apps, on the commonality of Web features. +
Basic architecture and essential functions of MiniApp such as the Manifest, Packaging, Addressing, and Lifecycle, as indicated in the Deliverables section; +
MiniApp UI components (encapsulated reusable code for rendering a part of the UI), component-associated APIs, and a page layout template mechanism that would enhance the interoperability among different MiniApp platforms and the Web. Other components and APIs may be included by rechartering the WG scope as the incubation result from the MiniApp Community Group. +
Coordination with other W3C efforts, especially security, privacy, accessibility, internationalization and other Webapp APIs including Progressive Web Apps, on the commonality of the Web.
+ +
+ Out of Scope +
+
The Working Group will not:
+
+
Define new CSS functionality, syntax, processing or rendering models.
+
Define any specification that overlaps the existing normative specifications for browser-based APIs without a concrete plan to work with existing working groups.
+
Define changes to the existing HTML markup language and to the Document Object Model (DOM) specifications.
+

@@ -150,63 +171,48 @@

- MiniApp URI Scheme -
-
-
- This specification defines the MiniApp URI scheme syntax and the process to dereference the MiniApp URI scheme. -
-
- Draft state: In progress in MiniApp CG -
-
- Adopted Draft: https://w3c.github.io/miniapp/specs/uri/ -
-
-
- MiniApp Lifecycle + MiniApp Manifest

- This specification defines the MiniApp lifecycle events and the process to manage MiniApp and each page's lifecycle. + This specification defines a JSON-based manifest document that enables developers to set up descriptive information, window styling, page routing, feature policies, and other information of a MiniApp. The MiniApp Manifest specification will follow the recommendations of the Web Platform Design Principles to extend the Web App Manifest.

- Draft state: In progress in MiniApp CG + Draft state: In progress in MiniApp CG

Adopted Draft: https://w3c.github.io/miniapp/specs/lifecycle/ + "https://w3c.github.io/miniapp/specs/manifest/">https://w3c.github.io/miniapp/specs/manifest/

- MiniApp Manifest + MiniApp Packaging

- This specification defines a JSON-based manifest file that enables developers to set up basic information, window style, page route and other information of a MiniApp. + This specification defines the standardized MiniApp package structure and its construction method. The MiniApp package file includes all the application assets such as document templates, components, stylesheets, scripts, internationalization resources, security resources, and the manifest file. The MiniApps Working Group aims at defining a MiniApp package format to be processed by various runtime environment.

- Draft state: In progress in MiniApp CG + Draft state: In progress in MiniApp CG

Adopted Draft: https://w3c.github.io/miniapp/specs/manifest/ + "https://w3c.github.io/miniapp/specs/packaging/">https://w3c.github.io/miniapp/specs/packaging/

- MiniApp Packaging + MiniApp Lifecycle

- This specification defines the standardized MiniApp package structure. + This specification defines the MiniApp lifecycle events and the process that enables developers to manage the lifecycle events of both MiniApp application lifecycle and each MiniApp page's lifecycle. MiniApp application lifecycle includes a set of events, including application initialization, application running in foreground, application running in background. MiniApp page lifecycle includes a set of events, including page loading, page first rendering ready, page running in foreground, page running in background and page unloading. Whenever possible, the specification should provide a mapping to existing Web specifications such as Service Workers and Page Visibility.

- Draft state: In progress in MiniApp CG + Draft state: In progress in MiniApp CG

Adopted Draft: https://w3c.github.io/miniapp/specs/packaging/ + "https://w3c.github.io/miniapp/specs/lifecycle/">https://w3c.github.io/miniapp/specs/lifecycle/

@@ -214,7 +220,7 @@
New Recommendation-track deliverables

- The Working Group may work on additional in-scope Recommendation-track deliverables without preparing an updated Charter. + If additional in-scope Recommendation-track deliverables need to be added to the Charter before the Charter expires, the Working Group will prepare an updated Charter that differs only in deliverables.

The Working Group will not adopt new proposals until they have matured through the MiniApps Ecosystem Community Group. @@ -223,6 +229,21 @@
Other Deliverables

+
+ MiniApp Addressing +
+
+
+ This document defines a MiniApp URI Deep Link solution that will work across various MiniApp platforms, with reference to existing URI standard work in W3C and related standard bodies. +
+
+ Draft state: In progress in MiniApp CG +
+
+ Adopted Draft: https://w3c.github.io/miniapp/specs/uri/ +
+

MiniApp Widget Requirements
@@ -268,7 +289,7 @@
- MiniApp URI Scheme + MiniApp Manifest Q1 2021 @@ -285,10 +306,10 @@
- MiniApp Lifecycle + MiniApp Packaging - Q1 2021 + Q2 2021 Q4 2021 @@ -302,7 +323,7 @@
- MiniApp Manifest + MiniApp Lifecycle Q1 2021 @@ -319,19 +340,31 @@
- MiniApp Packaging + MiniApp Addressing + + + Q1 2021 + + + + + + + + + + + + Widget Requirement Q1 2021 - Q4 2021 - Q3 2022 - Q4 2022 @@ -346,27 +379,19 @@
Success Criteria

- To advance to Proposed Recommendation, each specification must have - two independent implementations of all defined features. + To advance to Proposed Recommendation, each specification must have two independent implementations of all defined features.

- Comprehensive test suites will be developed for each specification to - ensure interoperability, and the group will create interoperability - reports. The group will also maintain errata as required for the - continued relevance and usefulness of the specifications it produces. + Comprehensive test suites will be developed for each specification to ensure interoperability, and the group will create interoperability reports. The group will also maintain errata as required for the continued relevance and usefulness of the specifications it produces.

- Each specification must contain a section on accessibility that - describes the benefits and impacts, including ways specification - features can be used to address them, and recommendations for - maximising accessibility in implementations. + Each specification must contain a section on accessibility that describes the benefits and impacts, including ways specification features can be used to address them, and recommendations for maximizing accessibility in implementations.

- Each specification must detail all known security and privacy - implications for implementers, Web authors, and end users. + Each specification must detail all known security and privacy implications for implementers, Web authors, and end users.

- APIs shall be demonstrated to be implementable securely before released. + APIs shall be demonstrated to be implementable securely before released.

@@ -382,8 +407,8 @@
review for accessibility, internationalization, performance, privacy, and security with the relevant Working and Interest Groups, and with the TAG. Invitation for review must be - issued during each major standards-track document transition, + "Technical Architecture Group">TAG. The WG will seek input into accessibility user requirements. + Invitation for review must be issued during each major standards-track document transition, including FPWD. The Working Group is encouraged to engage collaboratively with the horizontal review @@ -407,18 +432,12 @@

The MiniApps Ecosystem Community Group will provide the seed specifications to begin the standards process. In addition, the MiniApps Working Group plans to partner closely with the MiniApps Ecosystem Community Group to incubate new features - in particular, incubation of features that are out of current scope for the working group will happen in the Community Group, and then be followed by future WG rechartering to include them in scope.
-
- DID Working Group -
-
- The Decentralized Identifier Working Group works on the DID URI scheme, which may contain text the MiniApp URI Scheme specification can learn from or reuse. -

Web Application Security Working Group

- The Web Application Security Working Group is developing guidance on APIs that expose sensitive information, and an API to manage permissions, both of which matter to this group's specifications. + The Web Application Security Working Group is developing an API to manage permissions, which is related to this group's specifications, such as the permission information in the manifest.

Web Applications Working Group @@ -438,6 +457,18 @@

The Web Performance Working Group develops the Page Visibility specification, whose features are related to those in the MiniApp Lifecycle specification.
+
+ Service Workers Working Group +
+
+ The Service Workers Working Group develops the Service Workers specification, whose features are related to those in the MiniApp Lifecycle specification. +
+
+ Cascading Style Sheets (CSS) Working Group +
+
+ The CSS Working Group develops mechanisms for adding style to components in Web applications, which is related to the potential UI component standardization in the group. +

@@ -452,8 +483,8 @@
WHATWG

- The WHATWG maintains the URL Living Standard, which some of the - specifications in this WG’s scope extend. + The WHATWG maintains the HTML and DOM Standards, which are related to + the UI components work in this WG.

@@ -519,14 +550,15 @@

- TBD + 2023-01-20
Chairs	- TBD +	+ Qing An (Alibaba), Zitao Wang (Huawei), Dan Zhou (Baidu)
Team Contact - (FTE %: 10)	- Fuqiao Xue + Fuqiao Xue (0.2 FTE)
Teleconferences: topic-specific calls may be held - Face-to-face: 1 or 2 per year (only as needed) + Face-to-face: at least 1 per year

Information about the group (for example, details about deliverables, issues, actions, status, participants) is available from the MiniApps Working Group home page. + "https://www.w3.org/2021/miniapps/">MiniApps Working Group home page.

The Working Group’s Teleconferences focus on discussion of particular - specifications, and are conducted on an as-needed basis. + specifications, and are conducted on an as-needed basis. The minimum time + required for notice of an ad-hoc teleconference should be 3 working days.

- This group primarily conducts its technical work on the public-miniapps-wg@w3.org and on GitHub issues. Other communication tools are allowed if considerable number of the group participants decide to embrace them. The public is invited to review, discuss and contribute to this work. + This group primarily conducts its technical work on the public-miniapps-wg@w3.org and on GitHub issues. Other communication tools are allowed if 80% of the group participants decide to embrace them. Any decision to use other communication tools must be reevaluated if further W3C Members join the Working Group. The public is invited to review, discuss and contribute to this work.

The group uses a Member-confidential mailing list for administrative @@ -584,7 +616,7 @@

This Working Group operates under the W3C Patent Policy - (5 February 2004 Version updated 1 August 2017). To promote the + (15 September 2020). To promote the widest adoption of Web standards, W3C seeks to issue Recommendations that can be implemented, according to this policy, on a Royalty-Free basis. For more information about disclosure obligations for this @@ -643,17 +675,21 @@

- Initial + Initial Charter - TBD + 19 January 2021 - TBD + 20 January 2023 - N/A +
+
2021-10: Yongjing Zhang stepped down, Zitao Wang appointed as co-chair.
+
2021-11: Anqi Li stepped down, Qing An appointed as co-chair.
+
2022-03: Ming Zu stepped down, Dan Zhou appointed as co-chair.
+
@@ -666,7 +702,7 @@

- 目标 + 使命

范围 @@ -74,11 +74,15 @@

这是用于讨论的MiniApps工作组章程中文版草案，正式版本为英文版，请参见这里。

- MiniApps工作组的任务是制定规范，以促进可互操作且功能强大的MiniApps的开发。 -
-
- 加入MiniApps工作组 + MiniApps工作组的任务是制定规范，以促进可互操作且功能强大的MiniApps的开发。
+
+
加入MiniApps工作组
+
+ +
章程的草案可在GitHub上找到，欢迎随时提issue。 +
+ @@ -86,24 +90,27 @@
结束日期
- @@ -113,27 +120,53 @@

- TBD + 2023-01-20

小组主席 - TBD + + 安勍（阿里巴巴） +
+ 王子韬（华为） +
+ 周丹（百度）

- W3C联络人
- (FTE %: 10) + W3C联络人 - 薛富侨 + 薛富侨（0.2 FTE）

电话会议：根据需要
- 面对面会议：小组面对面会议可以在参与者同意的情况下安排，通常每年约一到两次。 + 面对面会议：每年至少一次

+

- TBD + 2023-01-20
小组主席	- TBD +	+ 安勍（阿里巴巴） + + 王子韬（华为） + + 周丹（百度）
- W3C联络人 - (FTE %: 10) + W3C联络人	- 薛富侨 + 薛富侨（0.2 FTE）
电话会议：根据需要 - 面对面会议：小组面对面会议可以在参与者同意的情况下安排，通常每年约一到两次。 + 面对面会议：每年至少一次

+ 使命 +

+ +

MiniApp作为一种新的移动应用形式，利用Web技术（尤其是CSS和JavaScript）以及原生应用的功能，在全球范围内越来越受欢迎。为了增强不同MiniApp平台（又称为超级应用或宿主应用）之间的互操作性，主流MiniApp平台提供商自2019年5月以来一直在W3C中文Web兴趣组中合作，并于2019年9月发布了MiniApp标准化白皮书作为初步的标准化探索。随着越来越多的全球公司对加入MiniApp相关讨论感兴趣，MiniApps生态社区组在TPAC 2019期间被提议成立，以便全球Web社区可以加入讨论。

+ +

+ 在探索阶段，由于MiniApp与典型的Web环境相比具有独特的性质，因此确定了潜在的标准要求。MiniApps生态社区组已经进行了大量的研究工作并与W3C相关小组进行了联合讨论，以阐明MiniApp标准化的要求和可能的解决方案。例如，宿主平台可能不是浏览器，而应用的构造也可能不是基于Web上的资源。因此，MiniApp与典型的Web环境在UI配置、渲染、资源打包以及对本地系统功能的API访问中使用了不同但相关的技术。现有的Web标准（如Web Packaging、Web App Manifest和Web API）则未涵盖此类情况。 +

+ +

MiniApps工作组旨在协调多样化的的MiniApp生态系统，实现不同MiniApp平台之间的互操作性，最大程度地实现MiniApps与万维网的融合，降低开发成本并促进该技术的采用。

范围

MiniApp作为一种新的移动应用程序形式，利用Web技术（尤其是CSS和JavaScript）以及原生应用的功能，在中国等亚洲国家越来越受欢迎。为了增强不同MiniApp平台（又称为超级应用或宿主应用）之间的互操作性，主流MiniApp供应商自2019年5月以来一直在W3C中文Web兴趣组中合作，并于2019年9月发布了MiniApp标准化白皮书作为初步的标准化探索。随着越来越多的全球公司对加入MiniApp相关讨论感兴趣，MiniApps生态社区组在TPAC 2019期间被提议成立，以便全球Web社区可以加入讨论。

- 在探索阶段，由于MiniApp与典型的Web环境相比具有不同的性质，因此确定了潜在的标准要求。例如，宿主平台可能不是浏览器，而应用的构造也可能不基于Web。因此，MiniApp与典型的Web环境在UI配置、渲染、资源打包以及对本地系统功能的API访问中使用了不同但相关的技术。现有的Web标准（如Web Packaging、Web App Manifest和Web API）则未涵盖此类情况。 -

工作组的工作将基于MiniApps生态系统社区组针对MiniApp功能而制定的规范，包括：

MiniApps工作组将正式开发在MiniApps生态社区组孵化的规范，这些规范将有利于MiniApp生态系统的互操作性和健壮性，包括：

MiniApp的基本架构和基本功能，例如URI scheme、widget、lifecycle、manifest和packaging； -
可以增强不同MiniApp平台之间的互操作性的组件、API和模板机制，如UI组件、设备API以及账号API等； -
与渐进式Web应用（PWA）等其他W3C工作合作，在Web功能的通用性方面进行协调。 +
MiniApp的基本架构和基本功能，例如Manifest、Packaging、Addressing和Lifecycle，详情见交付文档； +
可以增强不同MiniApp平台之间以及MiniApp平台和Web之间的互操作性的MiniApp UI组件（封装的可重用代码，用于呈现UI的一部分）和与组件相关的API和页面布局模板机制。工作组可以通过修订章程从MiniApp社区组的孵化结果包含其他组件和API的规范。 +
在Web的通用性上与其他W3C的工作进行协调，尤其是安全性、隐私、信息无障碍、国际化和其他Web API（包括渐进式Web应用，即PWA）。

+ + +

+ 超出范围 +

以下工作不在工作组的工作范围内：

+ 定义新的CSS功能、语法、处理或渲染模型。 +
+ 在没有具体计划与现有工作组一起工作的情况下，定义与W3C现有规范性文档重叠的任何浏览器API。 +
+ 定义对HTML标记语言和文档对象模型（DOM）规范的更改。 +

@@ -147,63 +180,48 @@

- MiniApp URI Scheme -
-
-
- This specification defines the MiniApp URI scheme syntax and the process to dereference the MiniApp URI scheme. -
-
- 草稿状态：在MiniApp CG中孵化 -
-
- Adopted Draft: https://w3c.github.io/miniapp/specs/uri/ -
-
-
- MiniApp Lifecycle + MiniApp Manifest

- This specification defines the MiniApp lifecycle events and the process to manage MiniApp and each page's lifecycle. + This specification defines a JSON-based manifest document that enables developers to set up descriptive information, window styling, page routing, feature policies, and other information of a MiniApp. The MiniApp Manifest specification will follow the recommendations of the Web Platform Design Principles to extend the Web App Manifest.

- 草稿状态：在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化

Adopted Draft: https://w3c.github.io/miniapp/specs/lifecycle/ + "https://w3c.github.io/miniapp/specs/manifest/">https://w3c.github.io/miniapp/specs/manifest/

- MiniApp Manifest + MiniApp Packaging

- This specification defines a JSON-based manifest file that enables developers to set up basic information, window style, page route and other information of a MiniApp. + This specification defines the standardized MiniApp package structure and its construction method. The MiniApp package file includes all the application assets such as document templates, components, stylesheets, scripts, internationalization resources, security resources, and the manifest file. The MiniApps Working Group aims at defining a MiniApp package format to be processed by various runtime environment.

- 草稿状态：在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化

Adopted Draft: https://w3c.github.io/miniapp/specs/manifest/ + "https://w3c.github.io/miniapp/specs/packaging/">https://w3c.github.io/miniapp/specs/packaging/

- MiniApp Packaging + MiniApp Lifecycle

- This specification defines the standardized MiniApp package structure. + This specification defines the MiniApp lifecycle events and the process that enables developers to manage the lifecycle events of both MiniApp application lifecycle and each MiniApp page's lifecycle. MiniApp application lifecycle includes a set of events, including application initialization, application running in foreground, application running in background. MiniApp page lifecycle includes a set of events, including page loading, page first rendering ready, page running in foreground, page running in background and page unloading. Whenever possible, the specification should provide a mapping to existing Web specifications such as Service Workers and Page Visibility.

- 草稿状态：在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化

Adopted Draft: https://w3c.github.io/miniapp/specs/packaging/ + "https://w3c.github.io/miniapp/specs/lifecycle/">https://w3c.github.io/miniapp/specs/lifecycle/

@@ -211,7 +229,7 @@

新的规范性文档

- 工作组可以在不更新章程的情况下开发和发布新的在章程范围内的规范性文档。 + 如果在章程到期之前需要向章程中添加其他在章程范围内的规范性文档，工作组将准备一份仅在交付文档章节有所不同的新章程。

工作组不会采用未经MiniApps生态社区组孵化的提案。 @@ -220,6 +238,21 @@

其他交付文档

+ MiniApp Addressing +

+ This document defines a MiniApp URI Deep Link solution that will work across various MiniApp platforms, with reference to existing URI standard work in W3C and related standard bodies. +

+ 草稿状态：在MiniApp CG中孵化 +

+ Adopted Draft: https://w3c.github.io/miniapp/specs/uri/ +

MiniApp Widget Requirements

This document describes the requirements for MiniApp widgets, a special form of MiniApp pages.

- 草稿状态：在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化

Adopted Draft: - MiniApp URI Scheme + MiniApp Manifest Q1 2021 @@ -282,10 +315,10 @@

- MiniApp Lifecycle + MiniApp Packaging - Q1 2021 + Q2 2021 Q4 2021 @@ -299,7 +332,7 @@
- MiniApp Manifest + MiniApp Lifecycle Q1 2021 @@ -316,19 +349,31 @@
- MiniApp Packaging + MiniApp Addressing + + + Q1 2021 + + + + + + + + + + + + Widget Requirement Q1 2021 - Q4 2021 - Q3 2022 - Q4 2022 @@ -365,7 +410,7 @@
W3C小组

- 对于所有规范，该工作组将对相关工作组、兴趣组和 TAG的发起信息无障碍、国际化、性能、隐私和安全性的横向审阅请求。在进入包括FPWD在内的每个标准的主要阶段之前，都必须发出审阅邀请。在每个规范的制定过程中，鼓励工作组与横向审阅小组合作。建议工作组至少在进入CR之前至少3个月进行审查，并鼓励在审查后规范中发生重大更改时主动通知横向审阅小组。 + 对于所有规范，该工作组将对相关工作组、兴趣组和TAG的发起信息无障碍、国际化、性能、隐私和安全性的横向审阅请求。工作组还会征询关于可访问性用户需求的意见。在进入包括FPWD在内的每个标准的主要阶段之前，都必须发出审阅邀请。在每个规范的制定过程中，鼓励工作组与横向审阅小组合作。建议工作组至少在进入CR之前至少3个月进行审查，并鼓励在审查后规范中发生重大更改时主动通知横向审阅小组。

根据W3C流程文档，将与以下小组进行其他技术协调： @@ -377,17 +422,11 @@

MiniApps生态社区组将孵化规范，以开始标准流程。此外，MiniApps工作组计划与MiniApps生态社区组密切合作，以开发新功能，尤其是在社区组中进行工作组当前范围之外的功能的孵化，并且在将来的工作组章程中将其包括在内。
-
- DID工作组 -
-
- DID工作组在开发DID URI Scheme，该方案可能包含MiniApp URI方案规范可以从中学习或重用的文本。 -

Web应用安全工作组

- Web应用程序安全工作组正在开发有关暴露敏感信息的API以及用于管理权限的API，这两者均对该组的规范至关重要。 + Web应用安全工作组正在开发用于管理权限的API，这与该组的规范相关，如manifest中的权限信息。

Web平台孵化社区组 @@ -407,6 +446,18 @@

Web性能工作组开发了页面可见性（Page Visibility）规范，其功能与MiniApp Lifecycle规范中的特性有关。
+
+ Service Workers工作组 +
+
+ Service Workers工作组开发了Service Workers规范，其功能与MiniApp Lifecycle规范中的功能有关。 +
+
+ CSS工作组 +
+
+ CSS工作组开发了向Web应用中的组件添加样式的机制，这与该组中潜在的UI组件标准化有关。 +

@@ -420,7 +471,7 @@

WHATWG
- WHATWG维护着URL持续更新标准，而MiniApps工作组的工作在该标准的基础上进行了扩展。 + WHATWG维护与该工作组中的UI组件相关的HTML和DOM标准。

@@ -459,13 +510,13 @@

该工作组的技术讨论是公开进行的：电话会议和面对面会议的会议记录将被存档以供公众查看，技术讨论和问题跟踪将以一种由一般公众可参与的方式进行。规范的工作草案和编辑草案将在公开的repo上开发，并可以允许公众直接贡献。但是，会议本身并不开放给公众参与。

- 可从MiniApps工作组主页上获得有关该组的信息（例如，有关交付文档、问题、行动、状态、参与者的详细信息等）。 + 可从MiniApps工作组主页上获得有关该组的信息（例如，有关交付文档、问题、行动、状态、参与者的详细信息等）。

- 工作组的电话会议着重讨论特定的规范，并根据需要进行。 + 工作组的电话会议着重讨论特定的规范，并根据需要进行。召开临时电话会议时，主席须提前至少3个工作日通知。

- 该小组主要在public-miniapps-wg@w3.org和GitHub issues上进行技术工作。如果相当数量的小组参与者决定接受其他交流工具，则可以使用其他交流工具。公众可以审阅、讨论小组的工作，并为小组的工作做出贡献。 + 该小组主要在public-miniapps-wg@w3.org和GitHub issues上进行技术工作。如果超过80%的小组参与者决定接受其他交流工具，则可以使用其他交流工具。如果新的W3C会员加入工作组，则必须重新评估使用其他交流工具的决定。公众可以审阅、讨论小组的工作，并为小组的工作做出贡献。

该小组将会员邮件列表用于内部管理目的，并由小组主席和参与者酌情决定何时使用。 @@ -496,7 +547,7 @@

专利政策

- 该工作组根据W3C专利政策（2004年2月5日版本，2017年8月1日更新）运作。为了促进Web标准的最广泛采用，W3C试图发布可以根据此政策在免专利使用费的基础上实现的正式推荐标准。有关小组的专利披露义务的更多信息，请参见W3C专利政策实施。 + 该工作组根据W3C专利政策（2020年9月15日版本）运作。为了促进Web标准的最广泛采用，W3C试图发布可以根据此政策在免专利使用费的基础上实现的正式推荐标准。有关小组的专利披露义务的更多信息，请参见W3C专利政策实施。

@@ -538,16 +589,20 @@

- 初始章程 + 初始章程 - TBD + 2021年1月19日 - TBD + 2023年1月20日 - N/A +
+
2021年10月张永靖卸任联合主席，王子韬出任联合主席。
+
2021年11月李安琪卸任联合主席，安勍出任联合主席。
+
2022年3月祖明卸任联合主席，周丹出任联合主席。
+
@@ -560,7 +615,7 @@

MiniApp Lifecycle States	Lifecycle States defined by existing W3C specs
Application Launched	N/A
Application Shown	N/A
Application Hidden	N/A
Application Error	N/A
Page Loaded	N/A
Page Ready	N/A
Page Shown	Visible (https://w3c.github.io/page-visibility/#visibility-states)
Page Hidden	Hidden (https://w3c.github.io/page-visibility/#visibility-states)
Page Unloaded	Discarded (https://wicg.github.io/page-lifecycle/#sec-lifecycle-states)

W3C MiniApps Ecosystem Community Group. -

- 本文档由 W3C MiniApps生态社区组孵化，目前尚在编辑草稿阶段。

- -

- Background - 背景 -

- Application lifecycle mechanism provides a means to manage the lifecycle events of both global application lifecycle and page lifecycle. Developing MiniApp with knowledge of the application’s and page’s lifecycle state can lead to improved user experiences. MiniApp lifecycle includes a set of events, with which MiniApp can choose to alter its behavior based on its state. -

- 应用生命周期机制提供了一种管理生命周期事件的机制，可以管理全局应用生命周期与页面生命周期。在开发MiniApp时，了解应用与页面的生命周期状态，可以帮助提供更好的用户体验。MiniApp生命周期包括一系列事件，MiniApp可以利用这些事件来基于生命周期状态变更MiniApp的行为。 -

- -

MiniApp Global Application Lifecycle

MiniApp Global Application Lifecycle States

This spec defines what the lifecycle of a MiniApp global aplication is and adds definition to enable MiniApp to respond to four important lifecycle events commonly performed by MiniApp:

本规范规定MiniApp全局生命周期的定义，以及MiniApp重要的四个生命周期事件：

-
MiniApp initialization
-
MiniApp初始化
-
-
MiniApp running in foreground
-
MiniApp前台运行
-
-
MiniApp running in background
-
MiniApp后台运行
-
-
MiniApp error
-
MiniApp错误
-

- -

For each MiniApp, after initialized, it will be either running in the foreground or in the background.

对每一个MiniApp，在初始化后，它会运行在前台或后台。

- -

When user chooses to close the MiniApp by clicking the close button on MiniApp, or go to the mobile phone’s home screen, the MiniApp will not be destroyed immediately, but switch to be running in the background.

当用户选择点击MiniApp的关闭按键来关闭MiniApp时，或者回到手机的桌面时，MiniApp并不会被销毁，而是转为运行在后台。

- -

When user reopens the same MiniApp, MiniApp will switch from running in the background to the foreground.

当用户再次打开同一个MiniApp时，MiniApp会从后台切换为前台运行。

- -

Only when MiniApp runs in the background for more than a specific time duration (e.g., 5 minutes), or occupies too much system resources in the background, the MiniApp will be destroyed.

只有当MiniApp在后台运行了超过一段时间（比如5分钟），或者占用了太多后台系统资源，则MiniApp会被销毁。

- -

This spec formalizes four lifecycle states to support the above:

本规范定义了四个生命周期状态来支持以上的功能：

- -

-
Launched: lifecycle state for MiniApp initialization. This means that the MiniApp initialization is completed, and it is triggered only once. Through this event, developer can obtain the information of the MiniApp, such as URI, source info, etc. -
-
- Launched：MiniApp初始化的生命周期状态。代表MiniApp初始化已经完成，并且该状态只触发一次。通过这个事件，开发者可以获取MiniApp的信息，包括URI、来源信息等。 -
-
-
Shown: lifecycle state for MiniApp running in foreground. It is triggered once the MiniApp launch is completed, or once the MiniApp switches to be running in foreground from background. -
-
- Shown：MiniApp前台运行的生命周期状态。在MiniApp启动完成后触发，或者在MiniApp从后台转为前台运行时触发。 -
-
-
Hidden: lifecycle state for MiniApp running in background. It is triggered once the MiniApp switches to be running from foreground to background. -
-
- Hidden：MiniApp后台运行的生命周期状态。在MiniApp从前台转为后台运行时触发。 -
-
-
Error: lifecycle state for MiniApp error. It is triggered once the MiniApp is confronted with script error. -
-
- Error：MiniApp错误的生命周期状态。在MiniApp遇到脚本错误时触发。 -
-

- -

MiniApp Global Application Lifecycle API

- -

MiniApp global application lifecycle involves the following API:

MiniApp全局应用生命周期包含如下API：

- -

-
onLaunch(object: Object): to monitor the callback of MiniApp initialization.
-
onLaunch(object: Object)：监测MiniApp初始化的回调
-
- -
  object contains several attributes:
  -
  object包含如下属性：
  -
  - -
    - query: inputted query for current MiniApp -
    -
    - query：当前MiniApp的输入query -
    -
  - -
    - path: the page path for current MiniApp -
    -
    - path：当前MiniApp的页面路径 -
    -
  - -
    - referrerInfo: source info for current MiniApp, including MiniApp ID, and optional extra data -
    -
    - referrerInfo：当前MiniApp的来源信息，包括MiniApp ID，以及可选的其他数据 -
    -
  -
-
-
onShow(object: Object): to monitor the callback of MiniApp foreground display.
-
onShow(object: Object)：监测MiniApp前台显示的回调
-
- -
  Definition of object is same as the onLaunch(object: Object)
  -
  定义与onLaunch(object: Object)相同
  -
-
-
- onHide(): to monitor the callback of MiniApp switching to be running in the background. -
-
- onHide()：监测MiniApp转为后台运行的回调 -
-
-
- onError(error: String): to monitor the callback of MiniApp error. -
-
- onError(error: String)：监测MiniApp错误的回调 -
-

- -

MiniApp Page Lifecycle

MiniApp Page Lifecycle States

- -

This spec defines what the lifecycle of a MiniApp page is and adds definition to enable MiniApp to respond to five important page lifecycle events commonly performed by MiniApp:

本规范规定MiniApp页面生命周期的定义，以及MiniApp重要的五个页面生命周期事件：

-
MiniApp page loading
-
MiniApp页面加载
-
-
MiniApp page first rendering ready
-
MiniApp页面首次渲染完成
-
-
MiniApp page running in foreground
-
MiniApp页面前台运行
-
-
MiniApp page running in background
-
MiniApp页面后台运行
-
-
MiniApp page unloading
-
MiniApp页面关闭
-

- -

The following figure illustrates the MiniApp page lifecycle.

下图描述了MiniApp页面生命周期过程。

- -

- -

-
When user firstly opens a MiniApp, the RenderView and Worker will simultaneously start the initialization.
-
当用户第一次打开一个MiniApp时，RenderView与Worker同时启动初始化。
-
-
After Worker is initialized, it runs MiniApp global lifecycle event app.onLaunch and app.onShow to create the MiniApp instance.
-
Worker初始化完成后，它运行MiniApp全局生命周期事件app.onLaunch与app.onShow来创建MiniApp实例。
-
-
Afterwards，Worker runs MiniApp page lifecycle event page.onLoad.
-
之后，Worker运行MiniApp页面生命周期事件page.onLoad。
-
-
Then Worker sends the initial data to RenderView to start the first render.
-
Worker发送初始化数据到RenderView来启动页面首次渲染。
-
-
Once first render is completed, RenderView notifies Worker, then Worker runs MiniApp page lifecycle event page.onReady.
-
首次渲染完成后，RenderView通知Worker，之后Worker运行MiniApp页面生命周期事件page.onReady。
-
-
Afterwards, user can interact with MiniApp. RenderView can be triggered to deliver user event to Worker for further processing, then Workers returns result data to RenderView for re-render.
-
之后用户可以与MiniApp进行交互。RenderView会被触发来发送用户事件到Worker进行处理，然后Worker返回结果数据到RenderView进行再次渲染。
-
-
- If MiniApp page switch to be running in the background, Worker runs MiniApp page lifecycle event page.onHide keep alive. If MiniApp page switch to foreground, Worker runs MiniApp page lifecycle event page.onShow. -
-
- 如果MiniApp页面转为后台运行，Worker运行MiniApp页面生命周期事件page.onHide来保活。如果MiniApp页面转为前台运行，Worker运行MiniApp页面生命周期事件page.onShow。 -
-
-
- If to destroy MiniApp page, Worker runs MiniApp page lifecycle event page.onUnload. -
-
- 如果要销毁MiniApp页面，则Worker运行MiniApp页面生命周期事件page.onUnload。 -
-

- -

This spec formalizes five page lifecycle states to support the above:

本规范定义了五个页面生命周期状态来支持以上的功能：

-
Loaded: lifecycle state for MiniApp page loading. This means that MiniApp page loading is completed. At this moment, Worker has obtained initialization data. Developers can obtain the path of current MiniApp page as well as the path’s query. Also, at this moment, the system event can be monitored.
-
Loaded：MiniApp页面加载的生命周期状态。代表MiniApp页面加载已经完成。此时Worker已经获取到初始化数据，开发者能获取当前MiniApp页面路径、以及页面的query，并且此时系统事件可以被监测。
-
-
Ready: lifecycle state for MiniApp page’s first rendering. It is triggered once the MiniApp page first rendering is completed. At this moment, the page UI can be configured.
-
Ready：MiniApp页面首次渲染的生命周期状态。在MiniApp页面首次渲染完成后触发。此时页面UI可以被配置。
-
-
Shown: lifecycle state for MiniApp page display. It is triggered once the page switches to be running in foreground from background. At this moment, developers can update data and refresh page.
-
Shown：MiniApp页面显示的生命周期状态。在MiniApp从后台转为前台运行时触发。此时开发者可以更新页面。
-
-
Hidden: lifecycle state for MiniApp page running in background. It is triggered once the MiniApp page switches to be running from foreground to background.
-
Hidden：MiniApp页面后台运行的生命周期状态。在MiniApp从前台转为后台运行时触发。
-
-
Unloaded: lifecycle state for MiniApp page destroying. It is triggered once the MiniApp page is destroyed. At this moment, the registered monitoring event is destroyed.
-
Unloaded：MiniApp页面销毁的生命周期状态。在MiniApp页面被销毁时触发。此时注册的监测事件被销毁。
-

MiniApp Page Lifecycle API

MiniApp page lifecycle involves the following API:

MiniApp页面生命周期包含如下API：

-
onLoad(query: Object): to monitor the callback of MiniApp page loading.
-
onLoad(query: Object)：监测MiniApp页面加载的回调
-
- -
  query: inputted query for current MiniApp page
  -
  query：当前MiniApp的输入query
  -
-
-
onShow(): to monitor the callback of MiniApp page display.
-
onShow()：监测MiniApp页面显示的回调
-
-
onReady(): to monitor the callback of MiniApp page’s first rendering.
-
onReady()：监测MiniApp首次渲染的回调
-
-
onHide(): to monitor the callback of MiniApp page switching to be running in the background.
-
onHide()：监测MiniApp转为后台运行的回调
-
-
onUnload(): to monitor the callback of destroying MiniApp page.
-
onUnload()：监测MiniApp页面销毁的回调
-

- -

- Privacy and Security - 隐私与安全 -

- -

- onShow and onHide event enables developers to know when a MiniApp is visible. By use of onShow event, developers can choose to process and hide the sensitive data, before MiniApp page switches to be running in foreground; the onUnload event provides a notification that the page is being unloaded. -

- onShow和onHide事件会通知开发者小程序是否可见，当小程序回到前台时，提供onShow事件，开发者可以对敏感数据进行处理，同时提供onUnload事件将在页面被销毁时提示开发者。 -

- -

- Acknowledgments - 致谢 -

- 暂无 -

- - - + diff --git a/specs/local.css b/specs/local.css index 51c8ad4..185e581 100644 --- a/specs/local.css +++ b/specs/local.css @@ -16,9 +16,7 @@ h2 { margin-bottom: 0em; } -.head h2, -#abstract h2, -#sotd h2 { +:is(.head, #abstract, #sotd) h2 { margin-top: 0; } diff --git a/specs/manifest/docs/explainer.md b/specs/manifest/docs/explainer.md index 9c4af5a..e1391e2 100644 --- a/specs/manifest/docs/explainer.md +++ b/specs/manifest/docs/explainer.md @@ -1,134 +1 @@ -# MiniApp Manifest explainer - -> Note: This document serves as a supplementary explanation of the [MiniApp Manifest](https://github.com/w3c/miniapp/tree/gh-pages/specs/manifest/) spec. If there is any inconsistency with the spec, you should consider the spec to be authoritative. - -## Authors - -Shouren Lan, Zhiqiang Yu, Xiaofeng zhang, Yongjing Zhang - -## 1. Introduction - -### What is this? - -MiniApp Manifest defines a JSON-based profile file that provides developers with a centralized place to put essential information associated with a MiniApp ([What is MiniApp?](https://w3c.github.io/miniapp/white-paper/#what-is-miniapp)). In fact, every MiniApp must have a manifest file which describes essential information about MiniApp to build tools, host platform, users, and app market. - -### Why should we care? - -Manifest, as the manifest file of MiniApp, includes configuration information that is necessary for application development, release, installation and running, such as desktop display, application ID, version management, version upgrade, permission statement and UX configuration, etc. - -## 2. Manifest Design - -To ensure the overall design requirements of [MiniApp Packaging](https://w3c.github.io/miniapp/specs/packaging/), [MiniApp Widget](https://w3c.github.io/miniapp/specs/widget-req/), and [MiniApp URI Scheme](https://w3c.github.io/miniapp/specs/uri/) are met, the manifest file of MiniApp should contain basic information of the application, page routing scope, window configuration information and widget configuration information, etc. - -### Key Considerations - -#### Why is the basic metadata needed? - -* Home screen display: Show the name and icon of the application to users by `appName` and `icon`. -* Locales: Set different languages and text directions to meet the localization requirement by `lang` and `dir`. -* Version management: Show version information of MiniApp, control application and device compatibility to users by `versionName`. -* Version upgrade: Provide maintainability and security of MiniApp by `versionCode`. -* Permission statement: Declare the necessary permissions required for running MiniApp, such as geolocation, storage, camera, etc. - -#### Why are `pages` and `window` needed? - -* The [pages](https://w3c.github.io/miniapp/specs/manifest/#pages) array needs to cover all the pages included in the MiniApp and specify a reasonable page jump range and home page settings. -* The [window](https://w3c.github.io/miniapp/specs/manifest/#window) object needs to cover the basic elements of the MiniApp window, such as the status bar, navigation bar, title and window style, etc. - -#### Why is `widgets` needed? - -Widgets can be embedded in various local applications, and directly display the content that the user is most concerned about in an interactive way to better meet the user's requirements. - -## 3. Sample - -So far only a basic subset of MiniApp Manifest is specified. It will be gradually updated and supplemented according to the demands of different scenarios. - -```json -{ - "dir": "ltr", - "lang": "en-US", - "appID": "org.example.miniApp1", - "appName": "My MiniApp Demo", - "shortName": "Demo X", - "versionName": "1.0.0", - "versionCode": 1, - "description": "A Simple MiniApp Demo", - "icons": [ - { - "src": "common/icon/icon.png", - "sizes": "48x48" - } - ], - "minPlatformVersion": "1.0.0", - "pages": [ - "pages/index/index", - "pages/detail/detail" - ], - "window": { - "navigationBarTextStyle": "black", - "navigationBarTitleText": "Demo", - "navigationBarBackgroundColor": "#f8f8f8", - "backgroundColor": "#ffffff", - "fullscreen": false - }, - "widgets": [ - { - "name": "widget", - "path": "widgets/index/index", - "minPlatformVersion": "1.0.0" - } - ] -} -``` - -## 4. Relationship with Web App Manifest -The MiniApp manifest is developed in the way that it covers the most common practices in the target ecosystems like 'Mini Program' [[1]](https://smartprogram.baidu.com/developer/index.html)[[2]](https://open.alipay.com/channel/miniIndex.htm)[[3]](https://mp.weixin.qq.com/cgi-bin/wx) and [Quick App](https://www.quickapp.cn/), while trying to be aligned (compatible) as much as possible with other ongoing web standard development i.e. [Web App Manifest](https://www.w3.org/TR/appmanifest/). Therefore common elements (e.g. `dir`, `lang`) or counterparts (e.g. `shortName` vs. `short_name`) can be found in both manifest specifications. A detailed comparison given in [Appendix A](#a-miniapp-manifest-comparison-with-web-app-manifest). - -On the other hand, MiniApp manifest has different assumptions on the hosting platforms and the form of application from those of Web App Manifest, so there are aspects that are not matched: -1. **Platform difference:** MiniApp needs to cover the cases that the application hosting platforms are not based on the web/browser, such as a native OS or a hosting application running on top of the OS. The software architecture is more like a native application rather than a web application (although it leverages some web technologies). Therefore, a MiniApp manifest needs to manage the compatibility more strictly between its application version and the platform version than that in the web environment. Member attributes such as `versionName`, `versionCode` and `minPlatformVersion` are specified for that purpose, but are not necessary for a web application. And strict permission management by the `reqPermissions` attribute is also needed to control the access to local resources (sensitive data and functions) via the hosting platform. -2. **Application form difference:** A MiniApp typically consists of a set of pages and/or widgets. A MiniApp page/widget is similar to a web page in the sense of developing techniques (e.g. JS, CSS), but is different in many other ways like the life-cycle, the layout, components and system APIs. More importantly, these pages/widgets are organically composed views/activities of the MiniApp rather than independent web pages. The MiniApp manifest needs to provide means to organize and configure them into a common look and feel (e.g. navigation bar, scrolling behavior, width adaptation) by the attributes like `window`, `pages` and `widgets`. - -As both work are still under development, it worths further evaluating the possibilities of alignment from each side. From MiniApp perspective, further study could be investigating the usability of some unmapped member attributes (such as `categories`, `screenshots`) of Web App Manifest in the context of MiniApp. - - - -## A. MiniApp Manifest comparison with Web App Manifest -The following table mainly describes the comparison between the manifest attributes in Mini App and Web App. "-" in the table means that there is no such attribute in the corresponding manifest. - -[Mini App Manifest](https://w3c.github.io/miniapp/specs/manifest/)| [Web App Manifest](https://www.w3.org/TR/appmanifest/) | Comparison -:--- |:-- |:--- -dir | dir | Same -lang | lang | Same -appID |- | MiniApp only -appName |name | Same -shortName |short_name| Same -description |description| Same -icons |icons | Same -versionName |- | MiniApp only -versionCode |- | MiniApp only -minPlatformVersion |- |MiniApp only -pages |scope | Similar. `pages` lists the local URIs to the app pages of a MiniApp while the `scope` in Web App can vary from a local URL to a remote URL. -pages.[0] |start_url | Different but comparable. The first element of `pages` represents the starting page in MiniApp instead of an explicit URL. -window |- | MiniApp only. `window` contains a set of attributes for the default configuration of MiniApp pages and widgets. Most of them are unique to MiniApp except for a few that are mappable to Web App Manifest.(See below.) -window.backgroundColor |background_color |Similar. MiniApp accepts only RGB hex value for now. -window.orientation |orientation |Same -window.fullscreen |display=fullscreen |Same but in different formation (boolean vs enum). -widgets |- |MiniApp only -reqPermissions |- |MiniApp only -\- |theme_color |Web App only. (For further study in MiniApp) -\- |iarc_rating_id | Web App only. (For further study in MiniApp) -\- |related_applications | Web App only (For further study in MiniApp) -\- |prefer_related_applications | Web App only (For further study in MiniApp) -\- |categories | Web App only. (For further study in MiniApp) -\- |screenshots | Web App only. (For further study in MiniApp) -\- |shortcuts | Web App only (For further study in MiniApp) - -## References & acknowledgements - -In the process of writing the MiniApp Manifest specification, many people have given valuable comments, thank you all. - -The following name list will be continuously updated, in the order of alphabetical. - -* Chun Wang -* Changjun Yang -* ... +Moved to https://github.com/w3c/miniapp-manifest/blob/main/docs/explainer.md \ No newline at end of file diff --git a/specs/manifest/index.html b/specs/manifest/index.html index 4bcaef0..395c1f7 100644 --- a/specs/manifest/index.html +++ b/specs/manifest/index.html @@ -1,1069 +1 @@ - - - - - - MiniApp Manifest - - - - - - - - - - - -

- This specification defines a JSON-based manifest file that enables developers to set up basic information, window style, page route and other information of a MiniApp. The basic information of a MiniApp includes but is not limited to MiniApp ID, app name, version name, version code, minimum platform version, etc.; window style includes but is not limited to navigation bar, title, window background, etc.; "pages" are used to specify page route information; and "widgets" are used to describe card information. -

- 本规范定义了基于JSON格式的Manifest文件，使开发者可通过Manifest文件设置MiniApp的基本信息、窗口样式和页面路由等信息。这里，MiniApp基本信息包括但不限于MiniApp ID、名称、版本名称、版本号以及最小平台版本等；窗口样式window包括但不限于导航栏、标题和窗口背景等；pages用于指定页面路由信息；widgets用于描述卡片信息。 -

- Note: At present, only a basic subset of MiniApp Manifest is specified, and it will be gradually updated and supplemented based on different scenario requirements. -

- 备注：目前只是列出MiniApp Manifest的一个基础子集，后续会根据不同的场景需求进行渐进式更新和补充。 -

- -

- This is still a work in progress. The proposal is being incubated in the W3C MiniApps Ecosystem Community Group. -

- 本文档由 W3C MiniApps 生态社区组孵化，目前尚在编辑草稿阶段。 -

- -

Manifest

- A MiniApp manifest is a JSON document that contains put metadata associated with a MiniApp. -

- MiniApp Manifest 是一个JSON文档，其中包含与该MiniApp关联的元数据。 -

- The following table is a summary of each attribute: -

- 下表是manifest中每个属性的总结： -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Attribute - 属性 -	- Type - 类型 -	- Required - 必填 -	- Description - 描述 -
dir	string	- No - 否 -	- Text direction - 文本方向 -
lang	string	- No - 否 -	- Language tag - 语言 -
appID	string	- Yes - 是 -	- ID of the MiniApp - ID标识 -
appName	string	- Yes - 是 -	- App name - 名称 -
shortName	string	- No - 否 -	- Short name - 简称 -
description	string	- No - 否 -	- Description - 简述 -
icons	Array	- Yes - 是 -	- Application icons - 图标 -
versionName	string	- Yes - 是 -	- Version name - 版本名称 -
versionCode	number	- Yes - 是 -	- Version code - 版本号 -
minPlatformVersion	string	- Yes - 是 -	- Minimum platform version supported - 支持最小平台版本 -
pages	Array	- Yes - 是 -	- Route information - 路由信息 -
window	Object	- No - 否 -	- Window style - 窗口样式 -
widgets	Array	- No - 否 -	Widget - 卡片 -
reqPermissions	Array	- No - 否 -	Required permissions - 所需权限 -

- -

- Dictionary - 字段 -

- dir - 方向 -

- dir specifies the default base direction of the text value of the whole MiniApp as well as the localizable attributes in the manifest file such as the appName, shortName and description attributes. The value of dir can be ltr or rtl. ltr means left-to-right, rtl means right-to-left. The default value is ltr. -

- dir定义了整个MiniApp以及Manifest文件中appName、shortName和description等可本地化属性的默认主文本方向，取值类型可以为：ltr和rtl，ltr表示从左到右，rtl表示从右到左。默认值为ltr。 -

- -

- lang - 语言 -

- lang specifies the default language of the MiniApp. It's applied to all localizable attributes of the manifest. The value here MUST be a well-formed Language-Tag specified in [[BCP47]]. The default value is undefined. Implementers are encouraged to provide the accurate value that matches the manifest content. -

- lang定义了MiniApp的默认语言，适用于manifest所有可本地化属性，取值必须为[[BCP47]]所规定的合法的（well-formed）Language-Tag值。默认值未定义。开发者需要提供匹配manifest内容的准确值。 -

- -

- appID - 标识 -

- appID is the ID of MiniApp and is mainly used for the package management. It supports the update and release of MiniApp versions. The format of appID SHALL be a string started with a letter [a-zA-Z], and the remaining characters SHALL be either alphanumeric, an underscore or a dot [0-9a-zA-Z_\.]. One common practice is to use the reverse-domain-name-like convention, e.g. com.company.miniapp. -

- appID是MiniApp的唯一标识符，主要用于包管理，支撑MiniApp版本更新和发布。appID的格式是由字母起头的字符串，剩余字符为数字、字母、下划线或点[a-zA-Z_\.]。一种常见的实现方式是使用类似反向域名的命名方式，如com.company.miniapp。 -

- -

- appName - 名称 -

- appName is the name that is directly displayed to the user. It is used as the display name of MiniApp along with the desktop icon and in the context of MiniApp management. -

- appName，直接呈现给用户的名称，用于在桌面图标和MiniApp管理等处显示MiniApp的名称。 -

- -

- shortName - 简称 -

- shortName provides a short and easy-to-read name for MiniApp, and it can be used when there is insufficient space to display the full MiniApp name provided in appName. -

- shortName，为MiniApp提供简短易读的名称，可在没有足够空间显示MiniApp名称时使用。 -

- -

- description - 简述 -

- description provides a brief description for MiniApp. -

- description，为MiniApp提供简短的描述。 -

- -

- icons - 图标 -

- icons is the array of MiniApp application icons. It consists of icons with different resolutions, that can be displayed based on different types of display equipments. -

- icons，MiniApp应用图标数组。由不同分辨率的图标组成，根据显示设备类型的不同展示不同的图标。 -

- - - - - - - - - - - - - - - - - - - - - - - - -

- Attribute - 属性 -	- Type - 类型 -	- Required - 必填 -	- Description - 描述 -
src	string	- Yes - 是 -	- the source of the icon image in the format of a path string - 以路径字符串所表示的图标图片来源 -
sizes	string	- Yes - 是 -	- The applicable resolution sizes of the icon image from the above mentioned `src` - 来自以上`src`的图标图片所适用的分辨率大小 -

- - -

- versionName - 版本名称 -

- versionName is a string-type character string, and is mainly used for describing the version information. It is also the version name that is displayed to the user. The general format is "1.0.0" as specified in Semantic Versioning. It plays an important role in version control, MiniApp application and equipment compatibility. -

- versionName是一个string类型的字符串，主要用作版本信息描述，也是面向用户显示的版本名称。一般格式为："1.0.0"，详见定义Semantic Versioning，该参数在版本控制、MiniApp应用与设备兼容性等方面发挥重要作用。 -

- -

- versionCode - 版本号 -

- versionCode is a number-type value, and is mainly used for enhancing the maintainability and security of MiniApp, e.g. a lower version is not compatible with a higher version. versionCode is not displayed to the user and is incrementing according to the version iteration process. The value is a non-negative integer. Default: 1. -

- versionCode是一个number类型的数值，主要用作提高MiniApp的可维护性和安全性，比如：低版本不能覆盖高版本。此版本号不向用户显示，根据版本迭代过程进行递增。取值是非负整数。默认值：1。 -

- -

- minPlatformVersion - 平台版本 -

- minPlatformVersion is a string-type character string. It is the minimum supported version of the required platform that can ensure normal operation of MiniApp, e.g. "1.0.0". -

- minPlatformVersion是一个string类型的字符串，保证MiniApp正常运行所需平台的最小支持版本。比如："1.0.0"。 -

- -

- pages - 页面路由 -

- pages is an array of path strings used for specifying which pages are included in a MiniApp. Each item in the array represents a page route. Page route = [path + filename]. During the MiniApp development process, adding or deleting pages is done by configuring the array. When configuring the page route, there is no need to add the file name extension, since the MiniApp platform will automatically parse it. Note: the first item in the pages array stands for the homepage of a MiniApp. -

- pages数组用于指定MiniApp都包含哪些页面，数组中每一项代表一个页面路由，页面路由 = [路径 + 文件名]。MiniApp开发时新增或删除页面需在数组中进行配置，配置页面路由时文件名不需加后缀名，MiniApp平台会自动解析。备注：pages数组中第一项代表MiniApp首页。 -

- -

- window - 窗口 -

- window contains sub-attributes used for styling the status bar, navigation bar, title, window background color, etc., as shown in the following table: -

- 用于设置MiniApp的状态栏、导航条、标题和窗口背景色等样式，如下表所示： -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Attribute - 属性 -	- Type - 类型 -	- Required - 必填 -	- Default - 默认值	- Description - 描述 -
navigationBarBackgroundColor	HexColor	- No - 否 -	#000000	- Background color of the navigation bar - 导航栏背景颜色 -
navigationBarTextStyle	string	- No - 否 -	white	- Background title color, valid values: `black` and `white`. - 导航栏标题颜色，有效值：`black`和`white`。 -
navigationBarTitleText	string	- No - 否 -	-	- Title text of the navigation bar - 导航栏标题文字内容 -
navigationStyle	string	- No - 否 -	default	- Style of the navigation bar, valid values: `default` (default style) and `custom` (customized navigation bar). Note: The capsule button at the right corner is not customizable. - 导航栏样式，有效值：`default`（默认样式）和`custom`（自定义导航栏）。注意：右上角胶囊按钮不可自定义。 -
backgroundColor	HexColor	- No - 否 -	#ffffff	- Background color of the window - 窗口的背景颜色 -
backgroundTextStyle	string	- No - 否 -	dark	- Background text style, valid values: `dark` and `light`. - 背景文字样式，有效值：`dark`和`light`。 -
enablePullDownRefresh	boolean	- No - 否 -	false	- Enable pull-to-refresh - 是否开启下拉刷新 -
onReachBottomDistance	number	- No - 否 -	50	- Distance from the bottom when page pull-up bottom event is triggered. The value is a non-negative integer and the unit is in `px`. - 页面上拉触底事件触发时距页面底部距离。取值应为非负整数，单位为 `px`。 -
orientation	string	- No - 否 -	portrait	- Screen orientation settings, valid values: `portrait` and `landscape`. - 屏幕方向设置，有效值：`portrait`和`landscape`。 -
fullscreen	boolean	- No - 否 -	false	- Full screen display - 全屏显示 -
designWidth	number	- No - 否 -	750	- The baseline width of the page design in `px`, based on which the size of the components on the page would be adjusted accordingly. The value is a non-negative integer. - 以`px`为单位的页面设计基准宽度，元素大小将根据实际设备宽度来缩放。取值应为非负整数。 -
autoDesignWidth	boolean	- No - 否 -	false	- Whether the designWidth of the page is auto-calculated. When it's true, the value of the `designWidth` is ignored, and the baseline width is determined by the system automatically according to the pixel density of the screen. - 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 -

- -

- window inherits the text direction and language configuration from dir and lang. -

- window的文字方向和语言设置继承自dir和lang. -

- -

- widgets - 卡片 -

- Widgets are a part of a MiniApp. Specifically, a MiniApp package can include MiniApp Pages and Widgets concurrently. As a part of the MiniApp application, widgets share some of the Manifest fields with the MiniApp main program, e.g. dir, lang, appID, appName, shortName, icons, versionName and versionCode. However, a widget also has its private fields, as shown in the following table: -

- Widget是MiniApp的一部分。具体来说，MiniApp包中可同时包含 MiniApp Page和Widget。Widget作为MiniApp应用程序的一部分，Widget和MiniApp主体程序共用部分Manifest字段，比如：dir、lang、appID、appName、shortName、icons、versionName和versionCode。但是Widget也有自己的私有字段，如下表所示： -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Attribute - 属性 -	- Type - 类型 -	- Required - 必填 -	- Description - 描述 -
name	string	- Yes - 是 -	- Widget name - Widget名字 -
path	string	- Yes - 是 -	- Corresponding page path of Widget. It follows the same path route format as defined in `pages`. - Widget对应页面路径，采用与`pages`中相同页面路由的格式。 -
minPlatformVersion	string	- No - 否 -	- Minimum platform version supported - 支持最小平台版本 -

- -

There are certain differences between the Widget-related APIs and the MiniApp APIs, hence, the declaration of the minimum platform version may be different. If the minPlatformVersion field of a widget is not set explicitly, it is then identical to the minPlatformVersion of the MiniApp by default. -

Widget 涉及的API与MiniApp API有一定差别，因此最小平台版本声明可能不同。如不单独设置Widget的minPlatformVersion字段，则默认与MiniApp平台版本相同。 -

- reqPermissions - 所需权限 -

- reqPermissions is an array of permission objects. Each object declares a permission (such as the access to the location information, user contacts, and hardware features like camera) required for the proper running of the MiniApp. User's consent may be asked to protect user's privacy related to such permissions. Such information can also be used by an app store or a hosting platform to filter a MiniApp according to user's policy or device capabilities. The structure of a permission object is defined in the following table. -

- reqPermissions是一个权限对象的数组，其中每个对象声明了MiniApp正常运行所需的一个权限（比如对位置信息、联系人和摄像头等硬件特性的访问）。为保护权限相关的用户隐私，可能需要征得用户同意。此类权限信息还可以被应用市场或宿主平台用来根据用户策略或者设备能力来过滤MiniApp。详细的权限对象结构定义如下表。 -

- - - - - - - - - - - - - - - - - - - - - - - - -

- Attribute - 属性 -	- Type - 类型 -	- Required - 必填 -	- Description - 描述 -
name	string	- Yes - 是 -	- permission name - 权限名称 -
reason	string	- No - 否 -	- The reason to use this permission - 该权限的使用目的 -

- -

- It's for further study whether the predefined permissions, permission extension, permission groups and protection levels need to be specified. -

- -

- 预定义权限、权限扩展、权限分组和保护等级是否需要定义有待进一步研究。 -

- -

- Localizable attributes - 可本地化属性 -

- The following attributes are localizable and share the same default configuration of dir and lang if not otherwise specified. -

- 如下属性为可本地化属性。无特别规定的情况下，共享默认的dir and lang配置。 -

appName
shortName
description
window.navigationBarTitleText
widgets.name

- - - - -

- -

- Dependencies - 依赖 -

- -

- As a key part of a MiniApp package, the manifest.json file describes several important aspects of the MiniApp by referring to the resources inside the MiniApp package in different forms of files, such as the page files in the pages directory and the icon images in the common directory. Details are specified in the MiniApp Packaging specification. -

- 作为MiniApp包中的关键部分，manifest.json文件通过引用MiniApp包中的多个不同形式的资源文件描述了MiniApp应用的多个重要方面，比如引用pages目录中的页面相关文件和common目录中的图标文件。详细情况在MiniApp Packaging规范中定义。 -

- -

- The normal operation of a MiniApp relies on the proper configuration of the manifest file according to this specification and the availability of the dependent resources in the MiniApp package. Such dependency needs to be checked during both the development phase and deployment phase. -

- -

- MiniApp的正常运行依赖于根据本规范进行恰当的manifest文件配置以及MiniApp包中所依赖资源的可用性。此依赖关系需要在开发和部署阶段进行检查。 -

- - -

- -

- Conformance - 标准符合性 -

- As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative. -

- 本规范中的所有内容均为本草案的规范性内容，但明确标记为“非规范性”的部分、示例和注释除外。 -

- -

- The key word RECOMMENDED in this document - is to be interpreted as described in - BCP 14 - [[RFC2119]] [[RFC8174]] - when, and only when, they appear in all capitals, as shown here. -

- -

- 如此处所示，当且仅当以着重号标记时，建议（RECOMMENDED）才以BCP 14 [[RFC2119]] [[RFC8174]]中的说明解释。 -

- -

- Security and Privacy Considerations - 安全隐私考虑 -

- Content constraint - 内容限制 -

- As the manifest is a JSON file and will commonly be encoded using [[UNICODE]], the security considerations described in [[ECMA-404]] and [[UTR36]] apply. In order to prevent developers from including custom/unrestrained data in a manifest, implementors may use a more strict schema than that defined in JSON Schema to impose their own implementation-specific limits on the member names, types and value ranges, e.g. to guard against memory overflow, or to meet platform-specific limitations. -

- Manifest作为一个JSON文件，通常以[[UNICODE]]方式编码，因此[[ECMA-404]]和[[UTR36]]中所定义的安全措施同样适用。为了防止开发者在manifest中添加任意不受限的数据，开发者可在其具体实现中采用比JSON Schema中所定义的更加严格的schema来约束文件中的成员元素名称、类型和取值范围等，从而防止内存耗尽或满足平台特有的限制。 -

- -

- Local resource access - 本地资源访问 -

Attributes like icons, pages, widgets contain paths referring to local resources on the hosting platform. Implementors and the hosting platform should check the validity of those paths to ensure no illegal access outside the scope of the MiniApp package. On the other hand, the MiniApp itself (e.g. in JS code) may provide means to jump to external resources either on the hosting platform, or on a remote web site (e.g. through a uri). In this case, the hosting platform is responsible for providing clear indication to an end-user about such context switch.

- -

icons, pages, widgets等属性包含了宿主平台上的本地资源引用路径，开发者和宿主平台应该检查这些路径的合法性以确保没有MiniApp package之外的非法访问。另一方面，MiniApp自身（如JS代码中）可能提供跳转到其他外部资源的方式，包括宿主平台或远程网站上的外部资源（比如通过uri)。此时，宿主平台应该负责向用户提供明确的上下文切换的指示信息。

- -

- In addition, the reqPermissions attribute provides a specific means to control the access to the local software, hardware and data resources on the user's device. User's consent should be asked when it comes to privacy-related or high-level privileged resources. -

- -

- 此外，reqPermissions属性提供了具体的控制访问用户设备上的本地软硬件及数据资源的方法。当涉及隐私或者高级权限相关的资源访问时，应该征询用户的同意。 -

- -

- Integrity - 完整性 -

The integrity of the manifest document is protected by a cryptographic hash mechanism as part of the whole MiniApp package. Details are specified in the MiniApp Packaging specification.

Manifest文档的完整性作为MiniApp package的一部分被密码哈希机制所保护。详细定义见MiniApp Packaging specification。

- -

- Transparency - 信息透明 -

- It is RECOMMENDED that the hosting platform makes the necessary meta information in the manifest available to the end-user, such as appID, appName, shortName, icons, versionName, description. This is to give an end-user an opportunity to make a conscious decision to approve the installation and use of the MiniApp. This could also help to identify a spoofing MiniApp.

建议宿主平台将manifest中的必要元数据信息提供给用户，比如appID, appName, shortName, icons, versionName, description。这样可以给用户一个机会来对MiniApp的安装和使用提供清晰的判断依据，也可以帮助用户来识别伪装的恶意MiniApp。

- -

- JSON Schema - JSON语法 -

- Developers interested in validating the MiniApp manifest document can use the JSON Schema defined here. -

- -

开发者可使用此处所定义的JSON Schema来验证manifest文件。 -

- -

- Example - 样例 -

-              {
-                "dir": "ltr",
-                "lang": "en-US",
-                "appID": "org.w3c.miniapp",
-                "appName": "MiniApp Demo",
-                "shortName": "MiniApp",
-                "versionName": "1.0.0",
-                "versionCode": 1,
-                "description": "A Simple MiniApp Demo",
-                "icons": [
-                  {
-                    "src": "common/icons/icon.png",
-                    "sizes": "48x48"
-                  }
-                ],
-                "minPlatformVersion": "1.0.0",
-                "pages": [
-                  "pages/index/index",
-                  "pages/detail/detail"
-                ],
-                "window": {
-                  "navigationBarTextStyle": "black",
-                  "navigationBarTitleText": "Demo",
-                  "navigationBarBackgroundColor": "#f8f8f8",
-                  "backgroundColor": "#ffffff",
-                  "fullscreen": false
-                },
-                "widgets": [
-                  {
-                    "name": "widget",
-                    "path": "widgets/index/index",
-                    "minPlatformVersion": "1.0.0"
-                  }
-                ],
-                "reqPermissions": [
-                  {
-                    "name": "system.permission.LOCATION",
-                    "reason": "To show user's position on the map"
-                  },
-                  {
-                    "name": "system.permission.CAMERA",
-                    "reason": "To scan the QR code"
-                  }
-                ]
-              }
-

- - -

- Acknowledgments - 致谢 -

- This document refers to W3C Web App Manifest, Baidu MiniApp, WeChat MiniApp, Alipay MiniApp, ByteDance MiniApp, Quick App Specification, MiniApp Widget Specification, MiniApp Lifecycle Specification, MiniApp URI Scheme, and Semantic Versioning. We appreciate the open source efforts of these documents. -

- 本文档参考了W3C Web App Manifest，百度小程序，微信小程序，支付宝小程序，字节跳动小程序，快应用联盟规范，MiniApp Widget文件规范，MiniApp Lifecycle规范，MiniApp URI规范, Semantic Versioning规范。感谢这些文档的开源努力。 -

- - - + diff --git a/specs/packaging/docs/explainer.md b/specs/packaging/docs/explainer.md index db356c6..6266dff 100644 --- a/specs/packaging/docs/explainer.md +++ b/specs/packaging/docs/explainer.md @@ -1,87 +1 @@ -# MiniApp Package explainer - -> Note: This document serves as a supplementary explanation of the [MiniApp Packaging](https://w3c.github.io/miniapp/specs/packaging/) spec. If there is any inconsistency with the spec, you should consider the spec to be authoritative. - -## Authors - -Yongjing Zhang (Huawei) - -## 1. Introduction - -### What is this? - -A MiniApp Package is a [ZIP](https://pkware.cachefly.net/webdocs/casestudies/APPNOTE.TXT)-based container file that wraps a set of files (JS code, components, resources, configurations, styles) comprising the whole MiniApp. -It can be delivered to a hosting platform through different channels (e.g. web, app store, offline), then rendered/executed by the hosting platform. - -### Why should we care? - -A MiniApp Package contains all necessary information used by a hosting platform to check, load and execute the MiniApp properly. A standardized format is necessary so that a MiniApp package generated by different developers or tools can be deployed on different hosting platforms (e.g. super-apps, or native-os frameworks) in a compatible and consistent way. The spec shall define the following aspects to ensure interoperability: -* minimum set of files for a MiniApp to be runnable -* optional files for enhanced features -* a well-defined file and directory structure -* pre-defined file names and naming convention -* parsing and validity check mechanism -* the overall file format (and extension name) of the package -* the corresponding MIME type for internet exchange - -## 2. MiniApp Package Design -### The Package File Format -Following the common practice of mobile app packaging (such as Android APK), MiniApp package is designed as a specialized ZIP file, which has its own file extension name (`.ma` - tbd) and a dedicated MIME type (`application/miniapp-pkg+zip` - to be registered with IANA). - -It can be viewed as normal `.zip` file in some cases (a ZIP parser may open and read the MiniApp package without knowing the MiniApp Packaging spec). However, having the dedicated file extension name and MINE Type gives a way for a hosting platform or a package loader to do pre-checking or content-type negotiation before actually loading/downloading the package. - -### The Package Content -To comprise a executable MiniApp, a MiniApp package needs to support the following content (in the form of internal directories and files): -* **manifest.json**: A JSON-based file responsible for the global configuration of the MiniApp. (See [MiniApp Manifest](https://w3c.github.io/miniapp/specs/manifest/)) -* **app.js**: The main application logic and responsible to the life-cycle management (see [MiniApp Lifecycle](https://w3c.github.io/miniapp/specs/lifecycle/)) -* **app.css**: The global/default application style. -* **pages**: A directory contains all page-related resources, and may have sub-directories to group different pages. Each page may have the following associated files: - * ***.js**: The page scripts (app logic of the page) - * ***.xml**: The page layout (whether it's in XML format is under discussion) - * ***.json**: The page-specific configuration (under discussion) - * ***.css**: The page-specific style -* **common**: A directory contains common resources (images, scripts, UI components, templates) that can be (re)used by one or multiple pages/widgets. It may have sub-directories to group resources. (Details are for further study.) - -> Note: As the MiniApp Packaging spec is still under development, the content listed above is not complete yet and subject to further change. - -### Security Considerations -To ensure the integrity and trustworthiness, a MiniApp package SHOULD be protected by one or more digital signatures by the author (e.g. the MiniApp developer) and the distributors (e.g. an application store) along with certificates issued by trusted authorities. (see more in the [spec](https://w3c.github.io/miniapp/specs/packaging/#security-privacy-considerations)) - -Proven technologies such as [RFC5652](https://tools.ietf.org/html/rfc5652) (i.e. PKCS#7) can be leveraged, and the binary package archive format needs enhancement by insert the "signing block" (similar to [APK Signature Scheme v2](https://source.android.com/security/apksigning/v2)) in the basic ZIP file. - -The detailed solution is under development. - - -## 3. Sample - -One typical illustrative example of a MiniApp package is given in the [spec](https://w3c.github.io/miniapp/specs/packaging/#example-1). - -## 4. Comparison with Other Packaging Technologies - -There are already some other packaging technologies specified for different purposes, such as [Widgets (obsolete)](https://www.w3.org/TR/widgets), [WICG WebPackage (WPACK)](https://github.com/WICG/webpackage) and its [obsolete version](https://www.w3.org/TR/2015/WD-web-packaging-20150115/), and [Lightweight Packaging Format (LPF)](https://www.w3.org/TR/lpf/). They are designed based on different archive formats (e.g. ZIP, CBOR), use different signature mechanisms (e.g. [XMLDSIG](http://www.w3.org/TR/xmldsig-core1/)-based, HTTP-based) and contain different types of contents (e.g. web pages, http exchanges, digital publications). Such differences result from the diversity of the environment assumptions and the technical requirements of individual technologies. - -The MiniApp package also has its unique assumptions and requirements that cannot be addressed directly by existing technologies. It's essentially a mobile application package designed to pack all required application materials (e.g. pages, layouts, UI components, resources, scripts and configurations) to be deployed and executed by various application hosting platforms (such as "Mini Program" [[1]](https://smartprogram.baidu.com/developer/index.html)[[2]](https://open.alipay.com/channel/miniIndex.htm)[[3]](https://mp.weixin.qq.com/cgi-bin/wx) and [Quick App](https://www.quickapp.cn/)), rather than to pack web contents or digital publications to be loaded by browsers or e-book readers. The following analysis summarizes the main reasons why **existing packaging technologies cannot meet the needs of MiniApp packaging**: - -1. **[WPACK](https://github.com/WICG/webpackage):** It's intended to pack a collection of web resources in terms of HTTP exchanges (including HTTP requests, responses, signatures and other metadata), so that a browser can load them locally and recover the web transaction states securely without accessing the origin. To achieve this, a HTTP-specific signature mechanism is defined which is apparently not suitable for MiniApp that doesn't rely on HTTP exchanges. Moreover, WPACK proposes to define a new CBOR-based archive format instead of using ZIP for web-specific [reasons](https://github.com/WICG/webpackage/issues/45) that don't apply to MiniApp. For instance, ZIP resources are file-based so that are not efficient for HTTP response headers in WPACK, but can serve MiniApp very well and are already used widely in mobile application packaging implementations (e.g. Android APK, QuickApp, MiniProgram). -2. **[Web Package (obsolete)](https://www.w3.org/TR/2015/WD-web-packaging-20150115/):** It's an unfinished work as the ancestor of WPACK. It choses not to use ZIP but define a new Streamable Package Format for its specific reasons that are not seen by MiniApp. Again it's designed as closely coupled with HTTP (headers) which is not suitable for MiniApp. -3. **[Widgets (obsolete)](https://www.w3.org/TR/widgets):** It's an old implementation of Packaged Web Apps called Widgets. It's ZIP-based but has its specific constraints on file/folder structure and naming, and it uses XML-based configuration document. These constraints are not compatible with MiniApp. In addition, it uses [XMLDSIG](http://www.w3.org/TR/xmldsig-core1/) for the digital signature, which can only protect the files that are signed but not the entire package file itself. One can add/remove signature files, add other files or blocks into the ZIP package, or alter the ZIP metadata without being noticed. Such vulnerability is not acceptable by MiniApp. -4. **[LPF](https://www.w3.org/TR/lpf/):** It's a lightweight ZIP-based packaging format which contains digital publication materials. It mandates publication-specific files (i.e. `publication.json`, `index.html`) that are not needed by a MiniApp, while misses files required for a MiniApp (e.g. `manifest.json`, `app.js`). And it has not cover the security concerns (e.g. integrity protection of the whole package) that a MiniApp should address. - -A detailed comparison between MiniApp package and other packaging technologies is give in the following table: - - -Technology | Client Platform | Content | Web Dependency | Format | Digital Signature -:--- |:--- |:-- |:--- |:--- |:-- -MiniApp | Super-App, OS, or Browser* | Application-resources (e.g. app logics, page layouts, UI components – not necessarily h5-based) | No (may or may not use web resources) | ZIP-based | PKCS#7* -WPACK | Browser | Web content (HTTP exchanges) | Yes (a web origin is always assumed, even offline) | CBOR-based | HTTP header extension -WebPackage (old) | Browser | Web content | Yes (a web origin is always assumed, even offline) | Streamable Package Format (.pack) | n/a -Widgets | Browser, OS | Widget files (html start files, XML configuration, icons ...) | No (may or may not use web resources) | ZIP-based | XMLDSIG-based -LPF | e-Readers | Digital publications, configuration | No | ZIP-based | unknown* - ->Note: `*` in the table above denotes the feature that is under discussion/development. - -To summarize, although MiniApp leverages popular web front-end technologies like JS, CSS, it’s more like a native-app rather than a snapshot of a web-content collection. Existing web packaging technologies cannot cover the requirements of MiniApp, therefore a dedicated MiniApp Packaging specification needs to be developed. - - - - +Moved to https://github.com/w3c/miniapp-packaging/blob/main/docs/explainer.md \ No newline at end of file diff --git a/specs/packaging/index.html b/specs/packaging/index.html index a0b909a..1603ee7 100644 --- a/specs/packaging/index.html +++ b/specs/packaging/index.html @@ -1,219 +1 @@ - - - - - - MiniApp Packaging - - - - - - - - - -

- This specification defines the standardized MiniApp packaging construction method, which provides a standard package structure description. The MiniApp package file packages all the static page templates / CSS / JavaScript files and the manifest file. The MiniApp package file can be used in any runtime environment (user agent). -

- 本文描述了一个标准化的MiniApp包构建方式，提供一种标准的包结构描述，将小程序页面所需的所有静态页面模板、CSS 和 JavaScript 文件，和配置文件（Manifest）打包在一起，允许在任何运行时环境可使用。 -

- The Miniapp package file contains a manifest document (located in the root directory of the package). The manifest file includes an overview of the MiniApp, including page description and page path. The package file contains JavaScript code, one or more page files, including template code of page(s), CSS code for page style and JavaScript code for page logic. The MiniApp package file should support digital signature verification. -

- 小程序包资源，包含一个配置文档，位于包的根目录下。配置文件应包括整个小程序的概述（页面描述及其对应路径，用于页面定位和开启）。包含 JavaScript 代码的应用级逻辑文件，一个或多个页面文件，包含页面结构的模板代码、页面样式的 CSS 代码和页面逻辑的 JavaScript 代码。小程序包应支持数字签名验证。 -

- The MiniApp runtime environment (user agent) can identify MiniApp package files through standard package format and MIME media type. After fetching the MiniApp package file, all static page templates / CSS / JavaScript files are cached on the device through a standardized dereference step. These cached package resources are available until the next update without fetching the MiniApp package file again. In terms of launch mode, the MiniApp can be launched normally without network. The runtime environment (user agent) locates the specified startup page from the package cache path and starts the MiniApp according to the description of the manifest file. -

- 小程序运行时环境，可通过标准的文件格式、媒体类型识别小程序包文件。获取（Fetch）小程序包后，通过标准化的解引用，将所有静态页面模板、CSS 和 JavaScript 文件缓存在设备上。在下次更新之前，这些资源始终可用，无需重新获取（Fetch）小程序包文件。启动方式上，小程序无需网络也可以正常启动，运行时环境根据小程序标准配置文件的描述（manifest），从包缓存路径中定位指定的启动页面，启动小程序。 -

- -

- This is still a work in progress. The proposal is being incubated in the W3C MiniApps Ecosystem Community Group. -

- -

Packaging

Each MiniApp package is wrapped as a [[ZIP]] file. It contains, at the root level, a global configuration file (manifest.json) to describe and configure the whole MiniApp, an application logic file (app.js), and a default style file (app.css). -

- -

The MiniApp package also contains multiple page related files in the pages directory, and other common resource files in the common directory

- -

One typical illustrative example of a MiniApp package is the following:

- -

-            |___manifest.json
-            |___app.js
-            |___app.css
-            |___pages
-            |       |___page1.js
-            |       |___page1.xml
-            |       |___page1.json
-            |       |___page1.css
-            |___common
-            |       |___componentA.js
-            |       |___componentA.xml
-            |       |___componentA.css
-            |       |___componentA.json
-            |       |___example.png
-            |___i18n
-            |       |___zh-Hans.json
-            |       |___en-US.json
-

- -

root files

- The MiniApp package contains at the root level the global data and lifecycle management of the MiniApp in the form of the following files: -

- -

manifest.json is responsible for the global configuration of the MiniApp, such as the file paths of MiniApp pages and the window configuration (e.g. navigator bar, background image and color, page title, etc.). Details are specified in the Manifest specification
app.css is responsible for the global CSS style for all MiniApp pages.
app.js is responsible for the service logic of the MiniApp as well as the lifecycle management of it, such as launching, showing and hiding the MiniApp.

pages

- The pages directory contains sets of files for the display and user interaction of all MiniApp pages. Each set of files that shares the same base file name (e.g. 'page1') with different extension names describe a particular page on different aspects, such as the service logic (e.g. page1.js), the configuration (e.g. page1.json), the structure (e.g. page1.xml) and the style (e.g page1.css). Developers can choose to put all page files directly under the pages directory in a flat manner, or organize them in different sub-directories for different pages. -

- -

A .json file is responsible for the configuration of a MiniApp page.
A .xml file is responsible for the structure of a MiniApp page, similar to HTML.
A .css file is responsible for the CSS style of a MiniApp page.
A .js file is responsible for the service logic and lifecycle management (defined in MiniApp Lifecycle) of a MiniApp page.

- -

common

The common directory contains common resources such as components, multimedia resources, and utils (js files). Developers can choose to put all resource files directly under the common directory in a flat manner, or organize them in different sub-directories as needed.

- -

i18n

- The i18n directory contains multi-language configuration files to support internationalization. The name of each .json file in this directory follows the Language-Tag as defined in [[BCP47]], and represents the specific configuration for that particular language. -

- Note: - The detailed format of the .json file is to be further developed. -

- -

Security & Privacy Considerations

- -

Integrity & Trustworthiness

- To ensure the integrity and trustworthiness, a MiniApp package SHOULD be protected by one or more digital signatures by the author (e.g. the MiniApp developer) and/or distributors (e.g. an application store) along with certificates issued by trusted authorities. -

A digital signature (with a valid certificate) by the author ensures the origin of the MiniApp, so that an end user or a hosting platform can decide whether to install the MiniApp package according to the knowledge about the author (e.g. credits, blocklist, quality).

A digital signature (with a valid certificate) by a distributor ensures the integrity of the package and trustworthiness of the delivery channel, so that the end user can be protected from tampered software and can benefit from a healthier ecosystem.

- -

- Proven technologies such as [[RFC5652]] (i.e. PKCS#7) can be used as the solution of the digital signatures for MiniApp package. Further evaluation is expected regarding whether it needs to be standardized in detail (e.g. the content scope under protection, additional attributes of concern, file format of the signature block, procedures), or is left to the discretion of implementations. -

- -

Confidentiality

- There is no requirement to develop a standardized encryption mechanism for the MiniApp package to protect its confidentiality. However, it doesn't preclude an implementation from deploying some encryption mechanism for special purpose. - -

- -

IANA Considerations

- The proposed MIME type for the MiniApp package is application/miniapp-pkg+zip following the +zip Structured Syntax Suffix defined in [[RFC6839]]. It needs to be registered with IANA when this work moves to a normative phase. There is no specific fragment identifier consideration for now. -

- Note: - A temporary solution could be application/x-w3c-miniapp-pkg+zip for the sake of any early implementation. -

- - - - + diff --git a/specs/script.js b/specs/script.js index 0ebd0bd..13bd47f 100644 --- a/specs/script.js +++ b/specs/script.js @@ -5,8 +5,8 @@ void function() { var L10N = { 'en': { selector: { - '#abstract-1': 'Abstract', - '#h-sotd': 'Status of This Document', + '#abstract > h2': 'Abstract', + '#sotd > h2': 'Status of This Document', '#table-of-contents': 'Table of Contents', '.note-title': 'Note', }, @@ -22,22 +22,27 @@ void function() { 'zh-hans': { selector: { - '#abstract-1': '摘要', - '#h-sotd': '关于本文档', + '#abstract > h2': '摘要', + '#sotd > h2': '关于本文档', '#table-of-contents': '内容大纲', '.note-title': '注', }, 'fig': '图', + 'summary': '关于此文档', + dt: { 'This version:': '本版本：', + 'History:': '历史：', + 'Previous version:': '上一版：', 'Latest published version:': '最新发布草稿：', 'Latest editor\'s draft:': '最新编辑草稿：', 'Editors:': '编辑：', - 'Bug tracker:': '错误跟踪：', - 'GitHub:': 'GitHub：', - }, + 'Former editors:': '原编辑：', + 'Participate:': '协助参与：', + 'Feedback:': '反馈：', + }, dd: { 'Bug tracker:': '反馈错误（修正中的错误）', @@ -98,18 +103,29 @@ void function() { .forEach(function(s) { $$(s) .forEach(function($elmt) { - Object.assign($elmt, { textContent: l10n.selector[s] }) + Object.assign($elmt, { textContent: l10n.selector[s] }) }) }) $$('figcaption, .fig-ref') .forEach(function($elmt) { - Object.assign($elmt.firstChild, { textContent: l10n['fig'] }) - }) + Object.assign($elmt.firstChild, { textContent: l10n['fig'] }) + }) + + $$('body > div.head > details > summary') + .forEach(function($summary) { + var originalText = $summary.dataset.originalText || $summary.textContent.trim() + var text = l10n['summary'] || originalText + + if (text) { + $summary.textContent = text + $summary.dataset.originalText = originalText + } + }) - $$('h1 + h2 + dl dt') + $$('body > div.head > details > dl > dt') .forEach(function($dt) { - var originalText = $dt.dataset.originalText || $dt.textContent + var originalText = $dt.dataset.originalText || $dt.textContent.trim() var text = l10n.dt[originalText] || originalText if (text) { diff --git a/specs/uri/docs/Q&A.md b/specs/uri/docs/Q&A.md index ff51728..756b6d9 100644 --- a/specs/uri/docs/Q&A.md +++ b/specs/uri/docs/Q&A.md @@ -1,110 +1 @@ -# Questions & Answers - -> Note: This document documents Q&A during all discussions about [MiniApp URI Scheme](https://w3c.github.io/miniapp/specs/uri/) spec. - -## About syntax-host - -### 1. Why does the URI need the `host` field, do we need to download the package from another website? - -**Answer:** At present, there is such a demand for MiniApp. For example, the Open Source Alliance of Baidu Smart Program has a scenario that an alliance member user agent downloads MiniApp packages from package server provided by another user agent. - - - -### 2. In the syntax ["@" host [":" port]], is there any restriction to `host`? - -**Answer:** The host field is optional, and the value is parsed by the user agent. The host can be a null value, or it can represent some special package fetching logic, such as local debugging. - - -## About syntax-appId - -### 1. The syntax `foo@example.com` represents the username for traditional usage in URL. Is it appropriate to reuse this syntax for appId in MiniApp URIs?（by @hax) - -**Answer:** In some URI protocol, the content before `@` does indeed represent username. And those protocals are usually used to locate a specific resource related to a person's identify, such as email or ftp. - -But in MiniApp URI, there is no concept of 'user', so we needn't a real username. What's the more , appid as the identity of the MiniApp can correspond to the meaning of username relative to resources. - -Therefore, in our opinion, it is appropriate for appId to take the username component. - - -### 2. Traditionally, in an URI like "scheme://foo", `foo` represents the host like HTTP(s) URL, or the path like file URL. But with MiniApp URI, `foo` is not host or path. That means the original correspondence is changed. Is this appropriate? (by @hax) - -**Answer:** Unlike regular resources that must be obtained through the network, where to obtain the resources (network or local) is up to the user agent. - -For this feature, we have designed the MiniApp URI syntax that the host of the authority can be omitted, but appId, as the unique identifier of the MiniApp cannot be omitted. - -The MiniApp URI 'miniapp://foo' which has only appId is similar to the known URN, such as tel: + 1-816-555-0000, isbn: 0451450523. - - -**Opening question:** Judging from the syntax description of [RFC 3986](https://tools.ietf.org/html/rfc3986) specification and known URLs, we did not find the case where authority is required but host is omitted. We want your help to review whether this design complies with RFC 3986 specification. - - -## About syntax-version - -### 1. What is the relationship between version in URI and [versionName](https://w3c.github.io/miniapp/specs/manifest/#versionname) / [versionCode](https://w3c.github.io/miniapp/specs/manifest/#versioncode) in manifest? (By @hax) - -**Answer:** According to the description in the Maniafest spec, `versionName` is a semantic, optional field that can be used by the user agent or developer to show it to the user; and `versionCode` is a number that is incremented each time the MiniApp is released. Therefore, the version syntax component in the MiniApp URI can be mapped to the `versionCode` in the Manifest proposal. - - - -## About use cases - -### 1. Is `location` in [Example 1](https://w3c.github.io/miniapp/specs/uri/#example-1-use-miniapp-uri-in-a-mini-app-1-miniapp-uri) related to the HTML [Location](https://html.spec.whatwg.org/multipage/history.html#the-location-interface) interface? - -**Answer:** There is no association. It is recommended that the user agent provides MiniApp URI analysis results in the runtime environment of the MiniApp. - - - -## About security - -### 1. Does MiniApp URI has security risks? (by @hax)** - -**Answer:** The MiniApp URI Scheme may exposes the package address in some situation, which makes someone think that there may be security risk. However, for the time being, the address of the package is not secret information. That can be obtained easily by capturing the accessing, etc. Therefore, expressing the package address in the URI does not increase the security risk. - -For other possible security risks, there are more explanation in the "Security and Privacy" section. - -For the security of the entire MiniApp, not only does the provider of the package need to guarantee the security of package transmission, caching, and dereferencing, but also the user agent needs to consider the security of the use of each high-level component or API. - - - -## About accessibility - -### 1. What happens when a browser without MiniApp runtime accesses the MiniApp URI? -**Answer:** If the dereference of the MiniApp URI is not supported, then generally, the browser will let the operating system to identify it. If it cannot be identified, it will not respond or prompt. -And if the developer hopes that the MiniApp can still be called even if the MiniApp URI is running in an unsupported browser, the developer can use some known methods in the industry, such as the deep link, to call up the designated user agent which can recognize and parse MiniApp URIs. - - - - -## About dereference - -### 1. Why using the HTTPS protocol to download MiniApp package? - -**Answer:** There is no requirement on how to download packages. [This chapter](https://w3c.github.io/miniapp/specs/uri/#https) is only a practical way to describe a user scenario. User agents can also download packages using other protocols, or just obtain MiniApp packages locally. - - - -### 2. It seems the "dereferencing" process ends up with a standard HTTP(s) URL. Wouldn't using that as is make it more accessible to end-users? This would trip unless you have a runtime (which would be also presumably, be a browser) - it feels like this tripwire mechanism's main motivation is to make the user install the runtime (in which case, what does this runtime provide that the current browser does not?), which I'm not sure is something that I personally would agree with. (by @cynthia) - -**Answer:** I understand your question contains two points, - -1. Why not directly use the HTTPS protocol as the MiniApp URI? - -2. The current MiniApp URI mechanism requires a set of runtimes to parse it. Why is it necessary? What is the difference between that **runtime** and a conventional browser? - -For point 1: downloading a package through the network is just one of the ways to get a package. In addition, there are many ways to access a miniapp resource. - - -For example, after accessing the miniapp once, the miniapp package would be stored locally. Or the user agent can preset the miniapp package before the user accesses the URI for performance (as we mentioned in [§ 2.1.6 of the miniapp white paper](https://w3c.github.io/miniapp/white-paper/#performance-and-user-experience -)). Or when debugging the Miniapp, the developer can directly push the miniapp package to the user agent through a debugging tool. - - -In these cases, the user agent open miniapp locally according to the appId in MiniApp URI without having to request a package server. - -In other cases, the user agent can specify its own mapping relationship with "host" component. For example, the "bar" in "miniapp: // foo @ bar" can correspond a domain or a local directory, anyway. - - -In summary, MiniApp URI are designed to locate MiniApp resource cross-platform, regardless of how they are obtained. That cannot be expressed intuitively through HTTPS URLs only. This is why we marked [Chapter 6](https://w3c.github.io/miniapp/specs/uri/#https) non-normative, and just describes it as a user scenario. - -For point 2, the runtime make miniapp help fill the gap of the Web and the Native (like we mentioned in [miniapp white paper introduction](https://w3c.github.io/miniapp/white-paper/#what-is-miniapp)). And because the design of the MiniApp is different from traditional web applications (like we mentioned in [miniapp white paper core-features](https://w3c.github.io/miniapp/white-paper/#core-features)). Even if the miniapp packaged is downloaded by a traditional browser, it cannot be opened and run. - -And with the necessity of the MiniApp URI demonstrated above, therefore, browsers need to implement MiniApp URI specifications to correctly parse MiniApp URIs and implement MiniApp runtime related specifications (under development) to open and run MiniApps properly. +Moved to https://github.com/w3c/miniapp-addressing/blob/main/docs/Q%26A.md \ No newline at end of file diff --git a/specs/uri/docs/explainer.md b/specs/uri/docs/explainer.md index a258c7d..9730256 100644 --- a/specs/uri/docs/explainer.md +++ b/specs/uri/docs/explainer.md @@ -1,149 +1 @@ -# Minipp URI Scheme explainer - -> Note: This document serves as a supplementary explanation of the [MiniApp URI Scheme](https://w3c.github.io/miniapp/specs/uri/) spec. If there is any inconsistency with the spec, you should consider the spec to be authoritative. - -## Authors - -Dan Zhou, Shuo Wang, Qian Liu, Tengyuan Zhang - -## 1. Introduction - -### What is this? - -MiniApp URI Scheme defines the Uniform Resource Identifier of a MiniApp ([What is MiniApp?](https://w3c.github.io/miniapp/white-paper/#what-is-miniapp)). - -Applications including Web applications can use MiniApp URI Scheme to claim the MiniApp resource it's trying to reference. - -### Why should we care? - -Each MiniApp vendors, i.e. the MiniApp packaging service providers, are now using very different methods to obtain the MiniApp package. Meanwhile, every user agent has their own way to describe a MiniApp resource. This is creating difficulty to visit a MiniApp across platforms. - -For example: - - - - - - - - - - - - - - - -

User Agent	URI
Wechat App	`weixin://dl/<path>/?appid=<appId>&businessType=<businessType>`
Alipay App	`alipays://platformapi/startapp?appId=<appId>&url=<path>`
Quick App	`http://hapjs.org/app/<package>/[path][?key=value]`
	`https://hapjs.org/app/<package>/[path][?key=value]`
	`hap://app/<package>/[path][?key=value]`
Baidu App	`baiduboxxapp://swan/appKey/path?key=value`
Bytedance App	`sslocal://microapp?app_id=<appId>&start_page=pages/home/home`
Bytedance App	`snssdk143://microapp?app_id=<appId>&start_page=<path>`

- -## 2. Goals - -The MiniApp URI Scheme specification aims to provide a set of conform syntax rules to concatenate the information of a miniapp, such as id, version, package address, so that the user agents can identify, parse, and obtain the miniapp resource on any platform. - -The miniapp URI achieve this goal by the following design: - -* Identify the miniapp package resource by its id, host, port and version components. In most cases, through host and IP, a user agent can discover a miniapp package management service, then access a specific miniapp package by providing the unique ID and version of the miniapp. -* Identify the resource inside miniapp package by its path, query and fragment components. The definition of these three components is close to a HTTP url in browser. How those components can be used relies on other miniapp specs, especially, the [MiniApp Packaging specification](https://w3c.github.io/miniapp/specs/packaging/). - -### Key Considerations - -#### Why is host and port needed? - -If there is no host and port, we'd have to build a unique and centralized miniapp package manager, which is considered difficult and cannot satisfy the demand of the current development of miniapp in China. - -In addition, we expect to support a variety of ways to get miniapp packages by URI besides downloading from Internet, such as local files. In this case, the host may not be considered as a domain. - -#### Where does id come from? - -Only id uniqueness in host is required. May use some algorithm to generate a universally unique id, or there exists some third party miniapp registers. This depends on the host the miniapp belong to. - -#### Why is version components needed? - -When a user visits a web page, the page content is always up to date. This is the same for miniapp in most cases, so the version in miniapp URI usually is null. But in some cases, a user agent or user needs to access some specific versions of miniapp. So we reserve the version component. - -## 3. Non-goals - -The following titles are also important but out of the scope of the MiniApp URI Scheme draft report: - -1. the identifier of the resource within a miniapp package, which may include path, query, fragment (this may be defined in the [packaging specification](https://w3c.github.io/miniapp/specs/packaging/)); -2. the storage and management of a miniapp package; -3. how to generate the id of a miniapp package; -4. the rule to define a version number; -5. how the Web developers obtain the id and version of a miniapp package; -6. how to obtain a miniapp package (we just provide a suggested way to obtain the package as [an use case](https://w3c.github.io/miniapp/specs/uri/#https)). - -## 4. Key scenarios - -### Scenario 1 A link to a miniapp in a web page - -

figure1. the use case which link to a miniapp in a web page

- -Example code: - -```html - - -open a MiniApp - -``` - -Browsers may handle the click action of Link A inconsistently for this Web page. - -* If it is running in a web page or MiniApp page or Native App that has a miniapp runtime, the URI can be parsed properly, and it will be retrieved the resource from the *example.com*, then locate the URI path, query, fragment and other information to dereference the corresponding resource. -* If it is in a web page of or Native App that does not have a miniapp runtime, the platform can parse the URI properly but can not run the miniapp resource. To provide a smooth user experience, it may trigger other user agent to open the miniapp. - -### Scenario 2 Use MiniApp URI within a miniapp - -Similar to parsing the URLs of each parts of the context for a web page, in MiniApp's runtime context, developers also need to know all the necessary information of the URI corresponding to the current MiniApp page. These information may include, - -```javascript -console.log(location.href); // miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?k=v#bar -console.log(location.protocol); // miniapp: -console.log(location.origin); // miniapp://foo;version=1.0.1-trial@example.com:8080 -console.log(location.id); // foo -console.log(location.version); // 1.0.1-trial -console.log(location.host); // example.com -console.log(location.port); // 8080 -console.log(location.pathname); // /pages/index -console.log(location.search); // ?k=v -console.log(location.hash); // #bar -``` - -More use case of MiniApp can be found in the [MiniApp White Paper use case](https://w3c.github.io/miniapp/white-paper/#case-studies). - -## 5. Security and Privacy Considerations - -### Security - -1. Similar to other URLs, MiniApp URI may expose the host and port of a miniapp package, so there may be a risk of being scanned and attacked for the other hidden ports. Service providers are suggested to avoid the risks through authentication or other efficient means. -2. When the UA reads and dereferences the URI, there maybe security risks such as injection, hijacking, and man-in-the-middle attacks during the requests to obtain the package from the service provider. User agents are suggested to send requests using HTTPS and data encryption. Packet integrity and security validation can also help to identify and terminate abnormal URI access to tampered package files. -3. When the user agent stores the package resource locally, it is necessary to ensure the storage security of files and isolate them properly. - -### Privacy - -1. User Agent should isolate the resources of the local package. Only the current miniapp can cache or access these resources, while other miniapp or applications are not supposed to. In addition, the user agent needs to obfuscate the resource names and provide mapping for the paths of the stored files, to prevent file privacy leaks. -2. User agent should restrict the permissions of the miniapp to access certain information, miniapp can only access the user's private information (such as user address, mobile number, or email) after the user has authorized. - -## 6. Detailed design discussions - -The proposal of the URI scheme is still in an early stage. The main form of discussion are meetings and offline communication. All of the discussion has been recorded in [the Q&A document](./Q&A.md) - -## 7. the flowchart of MiniApp URI and comparison of other solution -![MiniApp URI flowchart](https://user-images.githubusercontent.com/12129112/83343149-2d774800-a329-11ea-9cfd-5a2b0fd7d626.jpg) -For more discussions, refer to https://github.com/w3c/miniapp/issues/34 https://github.com/w3ctag/design-reviews/issues/478 - -## References & acknowledgements - -In the process of writing the MiniApp URI specification, many people have given valuable comments, thank you all. - -The following name list will be continuously updated, in the order of alphabetical. - -* Hax -* Langyu Liu -* Jing Huang -* Wei Sun -* Xiaohong Deng -* Xiaoqian Wu -* Yuan Lu -* Ming Zu -* ... +Moved to https://github.com/w3c/miniapp-addressing/blob/main/docs/explainer.md \ No newline at end of file diff --git a/specs/uri/images/use-case-2.png b/specs/uri/images/use-case-2.png deleted file mode 100644 index 04f714d..0000000 Binary files a/specs/uri/images/use-case-2.png and /dev/null differ diff --git a/specs/uri/images/use-case-3.png b/specs/uri/images/use-case-3.png deleted file mode 100644 index 9c83ca8..0000000 Binary files a/specs/uri/images/use-case-3.png and /dev/null differ diff --git a/specs/uri/index.html b/specs/uri/index.html index 833fc17..e5ab309 100644 --- a/specs/uri/index.html +++ b/specs/uri/index.html @@ -1,594 +1 @@ - - - - - - MiniApp URI Scheme - - - - - - - - - - - - -

- This specification defines the MiniApp URI scheme syntax and the process to dereference the MiniApp URI scheme. The MiniApp URI scheme syntax contains specifications for specific MiniApp URI syntax components based on the URI specification. Implementing this specification enables the user agent to locate the resources of MiniApp. -

- 本规范定义了 MiniApp URI scheme 的语法，以及解引用 MiniApp URI scheme 的过程。MiniApp URI scheme 语法包含基于 URI 规范之上的 MiniApp URI 具体语法组件的规格说明。实现本规范，能使得 user agent 能够定位 MiniApp 的资源。 -

- This is still a work in progress. The proposal is being incubated in the W3C MiniApps Ecosystem Community Group. -

- 本文档由 W3C MiniApps生态社区组孵化，目前尚在编辑草稿阶段。

- -

- Introduction - 介绍 -

- The MiniApp URI scheme is a protocol that uniquely corresponds to a specific resource within a mini app. Mini apps are applications that run on the user agent and are based on Web technology combined with native application technology. The MiniApp Packaging specification defines the form of resources in the mini app, as well as the specific path in the mini app and the mapped path relationship in the MiniApp URI scheme. -

MiniApp URI scheme 是用于唯一对应一个小程序内的具体资源的协议。小程序是运行在 user agent 上的，基于 Web 技术，结合原生应用技术实现的应用。在 MiniApp Packaging 规范中定义了小程序内资源的形式，以及小程序内具体的资源路径和 MiniApp URI scheme 中的 path 映射关系。

- - -

The MiniApp URI syntax section describes the specifications and definitions of some syntax components of the URI in the mini app. Parts not covered in these specifications follow the URI specifications and are not repeated here.

MiniApp URI 的语法章节描述了 URI 的某些语法部件在小程序中的规范与含义，本规范未涉及到的部分，沿用 URI 的规范，不再在本规范中赘述。

- -

- Example of usage - 用例 -

The following is an example of MiniApp URI.

以下是一个 MiniApp URI 的例子

- -

miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?k=v#bar

- -

- Example 1: Use MiniApp URI in a mini app - 用例1：在一个小程序内使用 MiniApp URI -

- -

All parts of the MiniApp URI are accessible. For example, the user agent can expose a global location object and store the following syntax parts into the location object. The developer can then access this location object through JavaScript in the mini app runtime environment.

MiniApp URI 的各部分都是可以被访问到的。比如 user agent 可以暴露一个全局的 location 对象，并将以下语法部分存入 location 对象。那么开发者在小程序运行时环境可以通过 JavaScript 访问这个 location 对象。

- -

-              console.log(location.href); // miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?k=v#bar
-              console.log(location.protocol); // miniapp:
-              console.log(location.origin); // miniapp://foo;version=1.0.1-trial@example.com:8080
-              console.log(location.id); // foo
-              console.log(location.version); // 1.0.1-trial
-              console.log(location.host); // example.com
-              console.log(location.port); // 8080
-              console.log(location.pathname); // /pages/index
-              console.log(location.search); // ?k=v
-              console.log(location.hash); // #bar
-

- -

The user agent can also implement the URL interface. The developer can then use related properties and methods by accessing the object in the mini app runtime environment.

User agent 也可以实现 URL 接口。那么开发者在小程序运行时环境可以通过访问该对象使用相关的属性和方法。

- -

-              const url = new URL("miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?k=v#bar")
-              console.log(url.href); // miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?k=v#bar
-              console.log(url.protocol); // miniapp:
-              console.log(url.origin); // miniapp://foo;version=1.0.1-trial@example.com:8080
-              console.log(url.id); // foo
-              console.log(url.version); // 1.0.1-trial
-              console.log(url.host); // example.com
-              console.log(url.port); // 8080
-              console.log(url.pathname); // /pages/index
-              console.log(url.search); // ?k=v
-              console.log(url.hash); // #bar
-

- -

- Example 2: Open a mini app on Web page - 用例2：在 Web 页面中打开一个小程序 -

- -

-<!doctype html>
-<html>
-<a href="miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?category=book#section-3">open a MiniApp</a>
-</html>
-

- -

Embed an a element with the href attribute as the mini app URI on the web page. When a user clicks the link, the user agent receives the URI and dereferences it. Based on the host, id, version in the URI, a request is made to a specific package server that can provide mini app package upload and download services, to download and open the corresponding mini app.

在 Web 页面中嵌入一个 href 属性为小程序 URI 的 a 元素。当用户点击该链接时，user agent 会接收到该 URI，并对该 URI 解引用，根据 URI 中的 host、id、version 请求特定的能提供小程序包上传和下载服务的 package server，下载并打开对应的小程序。

- -

As shown in the following flowchart, the package is a collection of mini app resource packages, and the content and structure of the packages are defined in the packaging specification.

如下流程图，其中 package 为小程序资源包集合，包的内容和结构由包规范定义。

- -

- Open a MiniApp from web - 在 Web 中打开一个小程序 -

- -

- Example 3: Access a mini app package in a development environment - 用例3：在开发环境中访问小程序包 -

- -

The User agent can provide debugging tools for developers to place the mini app package in the user agent development environment. Developers can obtain the unique id and version number of the mini app in the development environment, such as "foo; version = 1.0.1". Developers can concatenate it into a MiniApp URI that opens the mini app:

User agent 可提供调试工具，用于开发者将小程序包放置于 user agent 开发环境中。开发者有能力获取该开发中的小程序的唯一 id 和版本号，比如 “foo;version=1.0.1”。开发者可将其拼接为能打开该小程序的 MiniApp URI：

- -

-            miniapp://foo;version=1.0.1/pages/index?k=v#bar
-

- -

When the user agent dereferences the URI, it obtains the mini app package with the specific identification "foo; version = 1.0.1" in a certain way, and then opens and runs the mini app.

当 user agent 解引用该 URI 时，会使用某种方式获取到此特定标识为 “foo;version=1.0.1” 的小程序包，并打开和运行。

- -

- Open a MiniApp in development environment - 在开发环境中打开一个小程序 -

- -

- User agent - 客户端 -

The user agent of Mini App corresponds to the native client implementing this specification. The user agent can parse the MiniApp URI protocol according to the rules of this specification, and it can also point to a certain resource of the unique and correct mini app package based on the MiniApp URI.

小程序对应的 user agent 即实现了本规范的原生客户端。 User agent 能根据本规范制定的规则解析 MiniApp URI 协议，能根据 MiniApp URI 指向唯一的、正确的小程序包的某资源。

- -

- Syntax - 语法 -

- The MiniApp URI syntax is defined using [[ABNF]], using host, port, path-abempty, query, fragment, and unreserved from [[RFC3986]]. -

- MiniApp URI 语法使用 [[ABNF]] 定义，引入 [[RFC3986]] 的 host、port、path-abempty、query、fragment 和 unreserved。 -

-            miniappuri = scheme "://" authority path-abempty ["?" query ] ["#" fragment ]
-
-            scheme     = "miniapp"
-            authority  = id [";version=" version] ["@" host [ ":" port ]]
-            id         = 1*unreserved
-            version    = *unreserved
-

- -

The following are the MiniApp URI examples that conform to this syntax rule:

以下是符合本语法规则的 MiniApp URI 示例：

- - - -

The strings of the MiniApp URI scheme must conform to the character set rules of the URI declared in [[RFC3986]].

MiniApp URI scheme 的字符串必须要符合在 [[RFC3986]] 中声明的 URI 的字符集规则。

- -

id

id is the logical identifier of the mini app under a specific host, which along with version, points to the unique mini app package of a host. There may be multiple versions of a mini app corresponding to an id under a specific host.

id 是特定的 host 下的小程序逻辑标识符，与 version 共同指向了某个 host 唯一的小程序包。在特定的 host 下，一个 id 对应的小程序可能会存在多个版本。

- -

id is a mandatory field.

id 为必填项。

- -

id consists of non-reserved characters and is not case sensitive.

id 由非保留字符组成，大小写不敏感。

- -

The host must guarantee the uniqueness of the id.

host 必须保证 id 的唯一性。

- -

Version

Version and id together represent the unique mini app package of the user agent.

version 与 id 共同表示了 user agent 下唯一的小程序包。

- -

Version is optional, and the user agent can make rules for version, to provide information such as version and development method.

version 为可选项，user agent 可以对 version 制定规则，用于提供版本、开发方式等信息。

- -

Version consists of non-reserved characters and is not case sensitive.

version 由非保留字符组成，大小写不敏感。

- -

In most usage scenarios, it is recommended that the version is null, and the version is managed by user agent and package provider.

多数使用场景下建议 version 为空，由 user agent 及 package provider 进行版本的管理。

- -

- Host and port - host 与 port -

- The semantic rules for the host and port are consistent with the host in [[RFC3986]] and the port in [[RFC3986]]. -

- host 和 port 部分的语义规则和 [[RFC3986]] 中的 host 与 [[RFC3986]] 中的 port 一致。 -

- -

- Host and port are optional. When host and port are null, the user agent that opens the URI, decides how to open the mini app with specified id as the default behavior. When host has a value, the user agent can open the mini app with specified id after obtaining the mini app package through network protocol or file protocol. -

- host 与 port 为可选项，当 host 和 port 为空时，由打开该 URI 的 user agent 决定该以什么方式作为默认行为打开指定 id 的小程序。当 host 有值时，则可以由 user agent 通过网络协议或者文件协议等方式获取小程序包后打开指定 id 的小程序。 -

- -

Path

- Path (optional) represents the path of the mini app resource to be opened. The packaging specification defines the resource form, how to locate specific resource path in the package through path, and handling of the user agent when the path value is null or the path pointed by path does not exist. -

- path 表示要打开的小程序资源的路径，可选。在包规范中定义了资源的形式，如何通过 path 定位到包内具体的资源路径，以及 path 值为空，或者 path 指向的路径不存在时 user agent 的处理。 -

- -

The semantic rules of path are consistent with the path in [[RFC3986]].

path 的语义规则和 [[RFC3986]] 中的 path 一致。

- -

- Query and fragment - query 与 fragment -

- -

See [[RFC3986]] for definitions of query and fragment.

query 与 fragment 的定义参见 [[RFC3986]]。

- -

- Dereferencing - 解引用 -

This section describes how the user agent obtains the corresponding mini app package based on MiniApp URI, as well as some error handling.

此节描述了 user agent 如何根据 MiniApp URI 获得相应的小程序包，以及一些错误的处理。

- -

The rules for dereferencing are as follows:

解引用的规则如下：

- -

-
User agent recognizes MiniApp URI. If the scheme of this URI is miniapp, the user agent considers it as a MiniApp URI and parses the syntax components according to the syntax rules specified in this specification.
-
user agent 识别 MiniApp URI。如果该 URI 的 scheme 为 miniapp，则 user agent 认为其是 MiniApp URI，并以本规范中规定的语法规则解析语法部件。
-
-
The user agent parses the syntax components of MiniApp URI according to the above syntax rules into id, version, host, port, path, query, and fragment. If the syntax parsing fails, the user agent terminates this dereferencing algorithm.
-
user agent 解析 MiniApp URI 语法部件。User agent 依据上述语法规则，将 MiniApp URI 解析为 id、version、 host、 port、 path、 query 和 fragment 语法部件。如果语法解析失败，user agent 则终止此解引用算法。
-
-
The user agent uses the host and port information as the source to obtain the mini app package with specified identification. The mapping relation between the host and the method to obtain the applet package is determined by the user agent, and the user agent handles different existence modes of host values:
-
user agent 将 host 与 port 信息作为获取指定标识的小程序包的来源。host 与小程序包获取方式间的映射关系由 user agent 确定，user agent 需要处理 host 值的不同存在方式：
-

- -

When host value is not null, the user agent determines the mini app package provider based on the values specified by host and port. The provider can be a package server that provides mini app package download service, or it can be a user agent custom decision that corresponds to a specific method to obtain the mini app package. The download process using HTTPS protocol as a download protocol is described in [[[#https]]] below.

当 host 值非空时，user agent 根据 host 与 port 指定的值确定小程序包的 provider。provider 可以是一种提供小程序包下载服务的 package server，也可以是 user agent 自定义决定对应了某种特殊的获取小程序包的方式。使用 HTTPS 协议作为下载协议的下载过程见[[[#https]]]。

- -

When host value is null, the user agent obtains the mini app package with the specified id using a default method, which can be obtained through paths such as local path, default remote path, etc.

当 host 值为空值时，user agent 将会以某种默认方式获取指定 id 的小程序包，可以是从本地路径、默认的远程路径等途径获取。

- -

-
The user agent uses id as a mini app logic identifier for a specific host. The mini app with specified id may have multiple versions for the service corresponding to the specific host and port values.
-
- user agent 将 id 作为特定 host 下的小程序逻辑标识符。在特定的 host 与 port 值对应的服务下，一个指定 id 的小程序可能会存在多个版本。 -
-
-
The user agent uses version as the version information of the mini app package with the specified id. The user agent handles different existence modes of version: For example
-
- user agent 将 version 作为指定 id 的小程序包的版本信息。User agent 需要处理 version 的不同存在方式：比如 -
-

- -

When version has a value, the version is used as the version information of the mini app package, which along with id, points to the unique mini app package of a host.

当 version 存在值时，将 version 作为小程序包的版本信息，与 id 共同指向某个 host 唯一的小程序包。

- -

When version is null, the mini app package with specified id is customized as an mini app package provider (package server or user agent), which can be the latest version or the default version of the mini app package with specified id, or the mini app package of a version that conforms to a mapping rule.

当 version 为空值时，将会以小程序包 provider （package server or user agent）自定义提供指定 id 的小程序包，可以是该指定 id 的小程序包的最新版本、或者是默认版本、或者是符合某种映射规则的版本的小程序包。

- -

In most usage scenarios, it is recommended that the version is null, and the version is managed by the user agent and package provider.

多数使用场景下建议 version 为空，由 user agent 及 package provider 进行版本的管理。

- -

-
The user agent obtains the mini app package based on the parsed provider information and the identification information of the mini app (e.g., id, version). The user agent handles different situations of the provider:
-
user agent 根据解析到的 provider 的信息及小程序的标识信息（比如id、version）获取小程序的包。User agent 需要处理provider不同的情况：
-

- -

When provider is a package server, the user agent sends an HTTPS Request with mini app identification information to the server; the final mini app package is obtained by handling the Response body returned by the package server.

当 provider 为 package server 时，user agent 向该服务器发起携带了小程序标识信息的 HTTPS Request；通过处理 package server 返回的 Response body 得到最终的小程序包。

- -

When provider is a custom method of the user agent, the user agent obtains the mini app package with specified mini app identification information through the custom method.

当 provider 为 user agent 自定义的方式时，user agent 通过该自定义方式获取指定小程序标识信息的小程序包。

- -

-
The user agent conducts corresponding processing based on the results of the obtained mini app package:
-
user agent 根据获取小程序包的结果，进行相应的处理：
-

- -

When the mini app package is obtained successfully, the following processing is performed.

当获取小程序包成功时，则进行接下来的处理。

- -

When obtaining the mini app package fails, exception handling is performed based on the cause of failure. For example, when the user agent cannot obtain the package from the host, the error code and error message are returned.

当获取小程序包失败时，则根据失败原因，做出异常处理。例如 user agent 从 host 无法获取到包时，返回错误码与错误信息。

- -

-
- The user agent locates the corresponding mini app resource based on the path, query, fragment and the method defined in MiniApp Manifest specification. -
-
- user agent 根据 path、query、fragment 以及小程序 Manifest 规范中定义的方式定位到对应的小程序资源。 -
-

- -

The user agent MUST handle any failure during dereferencing and provide appropriate information prompts.

user agent MUST 处理解引用过程中任何失败的情况，并给出合适的信息提示。

- -

- Use HTTPS as a network protocol to download MiniApp packages - 使用 HTTPS 协议作为下载小程序包的网络协议 -

- -

This section describes a use case scenario for a network protocol that uses HTTPS protocol as a request to download the mini app package.

此节描述了以使用 HTTPS 协议作为请求下载小程序包的网络协议的用例场景。

- -

Use the following URI for example:

接下来以此 URI 为例：

- -

miniapp://foo;version=1.0.1-trial@example.com:8080/pages/index?category=book#section-3

- -

Dereferencing steps are as follows:

解引用步骤如下：

- -

-
- If the URI does not conform to the syntax rules of MiniApp URI, the user agent does not respond or handle exceptions. -
-
如果 URI 不符合 MiniApp URI 语法规则，则 User agent 不做响应或进行异常处理。
-
-
- Extract host and port from MiniApp URI and concatenate them into a complete HTTPS URL: https://example.com:8080/ -
-
从 MiniApp URI 中取出 host 与 port，拼接为完整的 HTTPS URL: https://example.com:8080/
-
-
- Use GET request, version and id as request parameters. That is, https://example.com:8080/?id=foo&version=1.0.1-trial -
-
以 GET 请求将 id 和 version 作为请求参数： https://example.com:8080/?id=foo&version=1.0.1-trial
-
-
- The user agent may implement HTTP cache control; it is recommended to use gzip as the encoding scheme (HTTP accept-encoding) and send HTTPS request message. -
-
user agent may 实现 HTTP 缓存控件；推荐使用 gzip 作为编码方式（HTTP accept-encoding），发送 HTTPS 请求报文。
-
-
- If the received request is not an HTTPS request, an HTTP 403 forbidden response is returned, and the request is terminated. -
-
如果接受到请求不是 HTTPS 请求，则返回 HTTP 403禁止响应，并终止此请求。
- -
-
- If the received request fails to pass authentication, an HTTP 403 forbidden response is returned, and the request is terminated. -
-
如果接受到的请求未通过鉴权，则返回 HTTP 403禁止响应，并终止此请求。
-
-
- If the requested HTTP Method is not supported, an HTTP 501 Not Implemented response is returned, and the request is terminated. -
-
如果该请求的 HTTP Method 不被支持，则返回 HTTP 501 Not Implemented 响应并终止此请求。
-
-
- Based on the query or body carried in the requested URL, a mini app package with id “foo”, version “1.0.1” is returned. If it is not found, an HTTP 404 Not Found response is returned. -
-
根据请求 URL 所携带的 query 或者 body，返回 id 为 “foo”，version 为“1.0.1” 的小程序包。如果找不到，则返回 HTTP 404 Not Found 响应。
- -
-
- If it is successfully found, an HTTP 200 OK response is returned, and the mini app package is returned as the response body in the format specified by content-type. -
-
如果成功找到，则以 HTTP 200 OK 响应，并将小程序包以 content-type 指定的格式作为响应主体返回。
-
-
- The user agent determines whether the request is successful based on status and continues to parse the response body when status is 200. A failure exception is processed when status is not 200. -
-
user agent 根据 status 来判断请求是否成功，当 status 为 200 时，则继续解析响应体。当 status 不为 200 时，则处理失败异常。
-
-
- It is recommended to use the agreed unique identification field to reverify the package integrity. -
-
建议使用约定的唯一标识字段再次校验包的完整性。
-
-
- For downloaded mini app package, use the package format specified in the MiniApp Packaging specification to decompress. -
-
对于下载好的小程序包，使用小程序打包规范中规定的包格式进行解压缩。
-

- -

- Conformance - 标准符合性 -

- As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative. -

- 本规范中的所有内容均为本草案的规范性内容，但明确标记为“非规范性”的部分、示例和注释除外。 -

- -

There is one class of products that can conform to this specification, and that is the user agent above.

- -

- 有一类产品可以声明符合此规范，即上文中的 user agent。 -

- - -

- Security Considerations - 安全性考虑 -

-
The user agent needs to ensure the correctness of URI, avoid URI tampering and prevent phishing attacks, for example, by using the recommendations in [[UTR36]].
-
User agent 需要保证 URI 的正确性，避免 URI 篡改，防止钓鱼攻击。比如，[[UTR36]] 中的技术可用于解决一部分安全问题。
-
-
It is recommended that UA or sign signature are used to authenticate the request process on the package server side.
-
请求过程建议通过UA或者sign签名的方式，进行package server端的鉴权认证。
-
-
During the request process, it is recommended to check replay attacks using HMAC.
-
请求过程中，建议通过HMAC的方式进行防重放攻击检查。
-
-
During the request process, it is recommended to verify package integrity by abstract comparison of md5 or sha1.
-
请求过程中，建议通过md5或sha1的摘要比对方式，验证包完整性。
-
-
While parsing the Response by the user agent, it is recommended to protect the data package security through encryption and decryption.
-
user agent 解析Response过程中，建议通过加解密方式进行数据包的安全性保护。
- -
-
When the user agent stores the package resource locally, it is necessary to ensure the storage security of files, to protect against malware attacks.
-
user agent 本地存储包资源时，需要保证文件的存储安全，防止恶意软件攻击。
-

- -

- Acknowledgments - 致谢 -

The editors thank to Baidu Smart Mini Program team for reviewing this document over and over again, thank to the W3C MiniApps community group for providing a lot of valuable advice.

编辑者感谢百度智能小程序团队对本文档的反复评审，感谢 W3C 小程序社区组成员提供了宝贵的意见。

- - - + diff --git a/specs/widget-req/index.html b/specs/widget-req/index.html index 2ae1640..7c3a563 100644 --- a/specs/widget-req/index.html +++ b/specs/widget-req/index.html @@ -1,517 +1 @@ - - - - - - MiniApp Widget Requirements - - - - - - - - - - - - -

- The MiniApp Widget is a special form of MiniApp Page. Unlike a page, a widget can occupy a certain area instead of the entire screen. It is used to display key information and respond to simple user operations, such as displaying the weather at the user’s current location, or tracking the user’s current travel status and providing further actions. -

- MiniApp Widget 是 MiniApp 页面的一种特殊形式，与页面不同，Widget 可以仅占用屏幕的一个区域（而不是全部），用于为用户显示关键信息和响应简单的用户操作，例如显示用户所在地的天气，跟踪用户当前的行程状态并提供进一步的操作。 -

- In mobile operating systems, the MiniApp Widget can be used for the Intelligent Assistant and other scenarios. In some scenarios, the user can subscribe to a service and the Widget is displayed in a fixed position, while in other scenarios, the Widget can dynamically appear and disappear based on contextual requirements. -

- 在移动操作系统中，MiniApp Widget 可以被应用于智能助理等场景，某些场景下用户可以订阅和固定显示 Widget，另外一些场景下 Widget 可以根据上下文需求动态地显示和消失。 -

- As the MiniApp Widget is an integral part of MiniApp, the other relevant parts are described in other related MiniApp documents. This document mainly describes the specific requirements that need to be considered when defining the MiniApp Widget Specification as well as other dependencies. -

- 由于 MiniApp Widget 是 MiniApp 的一个组成部分，因此相关的标准部分会在 MiniApp 的其他相关文档中描述，本文档主要描述会专注于定义 MiniApp Widget 规范需要考虑的特定需求和对其他部分依赖的描述。 -

- This is still a work in progress. The proposal is being incubated in the W3C MiniApps Ecosystem Community Group. -

- 本文档由 W3C MiniApps 生态社区组孵化，目前尚在编辑草稿阶段。 -

- -

- Requirement - 需求 -

- User agent - 客户端 -

- The MiniApp Widget runs in a host environment that is called the user agent. The MiniApp Widget user agent is largely the same as the MiniApp user agent, and shall meet the following requirements: -

- MiniApp Widget 需要在一个宿主环境中运行，这个环境被称为 user agent。MiniApp Widget 的 user agent 在较大程度下与 MiniApp 的 user agent 保持一致，应该满足如下一些需求： -

- -

-
- The MiniApp Widget user agent should be able to parse the MiniApp URI and obtain the MiniApp package according to the process described in the MiniApp URI Scheme, and it shall conform to the requirements in the Dereferencing section of the MiniApp URI Scheme specification. -
-
- MiniApp Widget 的 user agent 应当能根据 MiniApp URI 规范中描述的过程解析 MiniApp URI 并获取 MiniApp 包，该过程应当符合 MiniApp URI 规范中解引用一节描述。 -
-
-
- The user agent should be able to parse the structure of the MiniApp package as described in the MiniApp Packaging specification. -
-
- User agent 应当能按照 MiniApp Packaging 规范的描述解析 MiniApp 包结构。 -
-
-
- The user agent should be able to parse the manifest file as described in the MiniApp Manifest specification, so as to load and run the MiniApp Widget. Some specific requirements related to the Widget are described in the Manifest File section of this document. -
-
- User agent 应当能按照 MiniApp Manifest 规范的描述解析 manifest 文件，以加载运行 MiniApp Widget。在本文档的 Manifest 文件一节中描述了一些与 Widget 相关的特定需求。 -
-
-
- The form of resources that the MiniApp Widget accesses in the package is consistent with a MiniApp page. Therefore, the user agent should be able to access the resource files in the MiniApp package in the same way. -
-
- MiniApp Widget 访问到包中的资源形式与 MiniApp Page 保持一致。因此，user agent 应能以同样的方式访问 MiniApp 包中的资源文件。 -
-
-
- When running the widget, the user agent should be able to provide necessary interface support. Some specific requirements related to the Widget are described in the MiniApp API section of this document. -
-
- 在运行过程中，user agent 应能提供必要的接口支持，在本文档的 MiniApp API 一节中描述与 Widget 相关的特定需求。 -
-

- Specifically, in the MiniApp Widget scenario, as the Widget itself does not occupy the complete screen space, the user agent will have some specific requirements: -

- 特定地，在 MiniApp Widget 场景下，由于 Widget 本身并不占据完整的屏幕空间，user agent 也会有一些特定的需求： -

-
- The user agent can integrate the MiniApp Widget with its own interface, to achieve a better integration experience. -
-
- User agent 可以将 MiniApp Widget 与自身界面结合在一起显示，以达到更好的融合体验。 -
-
-
To better integrate the MiniApp Widget and the user agent interface, the user agent should provide its style information to the MiniApp Widget, so as to better support the requirements such as dark mode.
-
- 为了更好地将 MiniApp Widget 与 user agent 的界面融合，user agent 应当为 MiniApp Widget 提供自身样式的信息，以更好的支持诸如深色模式等需求。 -
-
-
The user agent should be able to load and display multiple MiniApp Widgets concurrently, for example, display a relevant air ticket Widget and taxi Widget simultaneously on Intelligent Assistant. -
-
User agent 可以同时加载并显示多个 MiniApp Widget，例如在智能助理中同时显示相关的机票 Widget 和打车 Widget。 -
-
-
Some behaviors of the User agent may cause the Widget to show or hide, and in such a case, the lifecycle callback of the Widget should be triggered correctly. -
-
- User agent 的一些行为可能会导致 Widget 的展现和消失，此时应该正确触发 Widget 的生命周期回调。 -
-

- -

URI

- The MiniApp Widget URI should be consistent with the MiniApp URI Scheme, to ensure that: -

- MiniApp Widget 的 URI 规范应该与 MiniApp URI 规范保持一致，以确保： -

- -

-
- The user agent can obtain the MiniApp package containing the MiniApp Widget using the same mechanism. -
-
- User agent 能以相同的机制获取包含 MiniApp Widget 的 MiniApp 包。 -
-
-
- The user agent can locate and load the MiniApp Widget using the same mechanism as the MiniApp Page. -
-
- User agent 能以与 MiniApp Page 相同的机制定位并加载 MiniApp Widget。 -
-

- -

- Package - 包 -

- Like MiniApp, the MiniApp Widget is also distributed in the form of a package. After the user agent acquires and verifies a MiniApp package, it will acquire the Widget information contained in the package, and load and display it correctly. The form and specification of the package should be consistent with the MiniApp Packaging specification, including but not limited to file organization, compression format, filename extension, digital signature, etc. The user agent should use the same form to verify and install the MiniApp Widget package. -

- 与 MiniApp 保持一致，MiniApp Widget 同样以包的形式分发，User agent 获取到 MiniApp 包并进行校验后，获取包中包含的Widget信息，并正确地加载和显示。包的形式和规范应当与 MiniApp Packaging 规范保持一致。包括不限于文件组织形式、压缩格式、文件后缀名、数字签名等。User agent 会以同样的形式对 MiniApp Widget 的包进行校验、安装等过程。 -

- In the MiniApp Widget scenario, the specific requirements are as follows: -

- 在 MiniApp Widget 场景下，特定的需求： -

- -

-
- A MiniApp package may contain both the MiniApp Pages and Widgets. In some cases, MiniApp expects to display a Widget on the user agent, however, when the user clicks the content on the Widget, a MiniApp Page is provided as the landing page with richer content. -
-
- 一个 MiniApp 包中应该可以同时包含 MiniApp Page 和 Widget。在某些情况下，MiniApp 希望能在 user agent 上显示一个 Widget，并在用户点击Widget上的内容时，提供 MiniApp Page 作为承载更丰富内容的落地页。 -
-
-
- A MiniApp package may contain only Widgets without Pages. Some MiniApp providers just want to provide simplest functions on the Widget to meet the users’ specific needs. -
-
- 一个 MiniApp 包中应该可以只包含 Widget，不包含 Page。某些 MiniApp 的提供方只希望在 Widget 上提供最简单的功能，以满足用户的特定需求。
-

- -

- Manifest File - Manifest 文件 -

- The configuration file must be included in the MiniApp Widget package. Developers can set the basic information, style, and routing of the Widget through the Manifest file. The format of the Widget Manifest file should be consistent with that of the MiniApp Manifest file. Specifically, there will be some changes in the Widget environment. -

- MiniApp Widget 包中需要包含配置文件，开发者可通过 Manifest 文件设置 Widget 的基本信息、样式和路由等信息。Widget 的 Manifest 文件应当与 MiniApp Manifest 文件的格式保持一致。特定地，在 Widget 环境中，会有一些变化： -

- - - Widget Description - Widget 描述 - -

- The Manifest file should include a widgets property (similar to the pages property), used for designating relevant information and configuration of widget contained in MiniApp, and should include the following: -

- Manifest 文件中需要包含 widgets 字段（类似于 pages 字段），用于指定 MiniApp 中包含的 widget 的相关信息和配置，应当包含以下： -

-
- Name of the MiniApp Widget -
-
- MiniApp Widget 的名字 -
-
-
- File path of the MiniApp Widget – used for locating the file where the MiniApp Widget is located -
-
- MiniApp Widget 的文件路径，用于定位 MiniApp Widget 所在的文件 -
-
-
- Minimum platform version. Different minimum platform version declarations may exist as there may be differences between the Widget API and MiniApp API. As the Widget is loaded independently, the minimum platform version declaration can be directed for a single widget -
-
- 最小平台版本，因为 Widget 涉及的 API 与 MiniApp API 有一定差别，可能会存在不同的最小平台版本声明。且因为 Widget 是独立加载的，最小平台版本声明可以针对单个 widget 声明 -
-

- - - Field changes in Manifest file - Manifest 文件字段变化 - -

- Due to some features of the widget, some configuration information in the Manifest file will not take effect in widgets. For example, the fullScreen property of window describes whether the MiniApp Page is displayed in fullscreen, however, as the widget has no fullscreen mode, this property will be ignored. -

- 因为 widget 的一些特点，Manifest 文件中的一些配置信息，在 Widget 中不会生效。例如 window 的 fullScreen 属性，描述了 MiniApp Page 是否以全屏形式显示，由于 widget 并没有对应的形式，因此会忽略这个信息。 -

- -

Lifecycle

- The lifecycle of the MiniApp Widget should be consistent with the MiniApp Lifecyle, wherein the trigger timing of onShow/onHide lifecycle callback will have some changes. As the Widget may also show or hide when the user agent slides the Widget off the screen or conducts a collapse action, the onShow/onHide of the Widget should also be triggered correctly at this time. Due to the form of the Widget and the form it runs in the client, the Widget also needs to support some new lifecycle API: -

- MiniApp Widget 的生命周期应该与 MiniApp 的生命周期保持一致，其中 onShow/onHide 生命周期回调的触发时机会有一些变化。因为 Widget 的出现和消失也可能发生在 user agent 将 Widget 滑出屏幕或者进行折叠操作时，此时 Widget 的 onShow/onHide 也应该被正确的触发。因为 Widget 的形态和在客户端中运行的形式，Widget 也需要支持一些新的生命周期 API： -

-
- In case of changes in system language, window size, color scheme etc., the Widget needs to receive the changed information to change the interface. -
-
- 当系统语言/窗口大小/Darkmode 等发生变化时，Widget 需要接收到变化后的信息，以改变界面。 -
-
-
- The client may update the status of the Widget interface in the form of incoming data; Widget reinitialization should not be triggered at this time. -
-
- 客户端可能会通过传入数据的形式更新 Widget 界面的状态，此时不应该触发 Widget 的重新初始化。 -
-

- -

MiniApp API

- The API that developers can use in the MiniApp Widget should be consistent with the [MiniApp API specification] as much as possible, however, some APIs need to be adjusted for specific MiniApp Widget scenarios. The content in this section should be adjusted based on the [MiniApp API specification]. -

- 开发者在 MiniApp Widget 中可以使用的API 应当与 [MiniApp API 规范] 尽量保持一致，但有一些 API 需要针对 MiniApp Widget 场景进行调整，本节内容应根据 [MiniApp API 规范] 内容调整。 -

- Some APIs that could be used on MiniApp Page need to be adjusted in Widget scenario, such as: -

- 在 Widget 场景下，一些原先在 MiniApp Page 上可以使用的 API 需要调整，例如： -

-
- API with background persistence or API passively triggered, e.g. background location and push. As the Widget runs in the user agent, it does not exist as an independent unit in terms of user perception, and these APIs are prone to cause user confusion between calling the Widget and the user agent. -
-
- 具备后台持续能力或者被动触发的 API，例如持续定位和推送，因为 Widget 在 user agent 环境中运行，在用户认知上并不作为独立运行的单元存在，这些 API 易造成用户将 Widget 的调用与 user agent 混淆。 -
-
-
- API that can capture user attention and cause misunderstanding by the user, e.g. launching the camera interface. As multiple Widgets may be displayed on the same interface, if these Widgets directly call the API to open the interface concurrently, it will cause the user to misunderstand. -
-
- 会抢占用户注意力，造成用户错误认知的 API，例如打开拍照界面等，由于多个 Widget 可能会同时显示在一个界面上，如果多个 Widget 均直接调用打开界面的 API，会造成用户理解上的错误。 -
-

- -

The User agent should provide some new APIs suitable for the Widget, for example:

User agent 会提供一些适用于 Widget 的新 API，例如：

-
API to obtain the current window size (viewport width)
-
获取当前窗口大小的 API（视口宽度）
-
-
API to obtain the current user agent information, to enable the Widget to adapt to the specific user agent
-
获取当前 user agent 信息的 API，以支持 Widget 针对特定的 user agent 进行适配
-
-
Pre-authorized APIs in a batch. As there may be multiple MiniApp Widgets on the user agent concurrently, multiple APIs that dynamically obtain permission will cause user confusion. Thus, the user agent should provide pre-authorized APIs in a batch.
-
批量预授权的 API，由于 user agent 上可能同时存在多个 MiniApp Widget，出现多个动态获取权限的 API 会对用户造成困扰，user agent 应提供批量预授权的 API
-
-
Extended APIs for specific clients, e.g., request for client update to obtain the latest version of the Widget
-
特定客户端的拓展 API，例如请求客户端更新以获取到最新版本的 Widget
-

- -

- MiniApp Components - MiniApp 组件 -

- The APIs that developers can use in the Widget should be consistent with the [MiniApp component specification] as much as possible, however, some components need to be adjusted for specific Widget scenarios. The content in this section should be adjusted based on the [MiniApp component specification]. -

- 开发者在 Widget 中可以使用的API 应当与 [MiniApp 组件规范] 尽量保持一致，但有一些组件需要针对 Widget 场景进行调整，本节内容应根据 [MiniApp 组件规范] 内容调整。 -

- The behavior of some components may conflict with the behavior of the user agent, for example: -

- 一些组件的行为可能与 user agent 的行为发生冲突，例如： -

-
- If some Widgets include a relatively long scrollable list, it may conflict with the sliding up and down operation of the user agent -
-
- 某些 Widget 中如果包含较长的滚动列表，可能与 user agent 的上下滑动操作发生冲突 -
-

- -

- Data communication between MiniApp Widget and MiniApp - MiniApp Widget 和 MiniApp 之间的数据通信 -

- Under certain circumstances, the Widget needs to maintain certain data communication with MiniApp, for example: -

- 在一定情况下，Widget 需要与 MiniApp 保持一定的数据通信，例如： -

-
- If already logged in MiniApp, the same login status is maintained in the Widget. -
-
- 在 MiniApp 中已经登录，在 Widget 保持同一登录状态 -
-
-
- If a MiniApp is playing music, the Widget gets the playing status to show playback control. -
-
- MiniApp 播放音乐，Widget 获取播放状态以显示播放控件 -
-

- Therefore, the specifications should include a description of data communication between the MiniApp Widget and MiniApp. -

- 因此规范中应包含 MiniApp Widget 与 MiniApp 之间数据通信的描述。 -

- -

- References - 参考 -

Requirement For Standardizing Widgets
-
Widget related Recommendations are W3C Obsolete Recommendations
-
W3C Widget 标准废弃说明
-
- MiniApp Specifications -
- MiniApp Manifest -
- MiniApp URI Scheme -
- MiniApp Lifecycle -
- MiniApp Packaging -

- - -

- Acknowledgments - 致谢 -

TBD.

暂无。

- - - + diff --git a/w3c.json b/w3c.json index 3a464f5..ae22d94 100644 --- a/w3c.json +++ b/w3c.json @@ -1,5 +1,5 @@ { - "group": 109611 + "group": [128558, 109611] , "contacts": [ "xfq", "xueyuanjia" ] , "repo-type": "note" } diff --git a/wg/custom.css b/wg/custom.css new file mode 100644 index 0000000..66f1372 --- /dev/null +++ b/wg/custom.css @@ -0,0 +1,334 @@ +:root { + color-scheme: light dark; + + --a-normal-text: #1955a5; + +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #ddd; + --bg: #111; + + --heading-text: #f2ecde; + + --hr-text: var(--text); + + --del-text: #f44; + --del-bg: transparent; + --ins-text: #4a4; + --ins-bg: transparent; + + /* --a-normal-text: #6af; */ + --a-normal-text: var(--text); + --a-normal-underline: #555; + --a-visited-text: var(--a-normal-text); + --a-visited-underline: var(--a-normal-underline); + --a-hover-bg: rgba(25%, 25%, 25%, .2); + /* --a-active-text: #f44; + --a-active-underline: var(--a-active-text); */ + + --blockquote-border: silver; + --blockquote-bg: #181818; + --blockquote-text: var(--text); + + --dd-text: #aaa; + } +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +body { + display: flex; + flex-direction: column; + max-width: 1240px; + margin: 0 auto; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + padding: 0 0.25cm; + color: var(--text); + background-color: var(--bg); +} + +a:link, +a:visited { + text-decoration: none; + color: #0d1321; + color: var(--a-visited-text); +} + +a:hover { + color: var(--a-normal-text); +} + +dl, +h1, +h2, +ul, +p { + margin: 0; + padding: 0; + font-weight: normal; +} + +li { + list-style: none; +} + +header { + display: flex; + align-items: center; + justify-content: space-between; + margin: 2rem 0 4rem; + flex-wrap: wrap; +} + +header h1 { + font-weight: normal; + color: #0d1321; + color: var(--heading-text); + font-size: 1.7em; +} + +header p { + flex: 100%; + padding: 0 0em 0; +} + +header nav a:hover { + color: black; + color: var(--a-normal-text); + padding-bottom: 0.1cm; + border-bottom: 0.1cm solid black; + border-bottom: 0.1cm solid var(--a-normal-text); +} + +main { + margin-bottom: 4rem; +} + +nav { + flex-grow: 1; +} + +nav ul { + display: flex; + justify-content: flex-end; +} + +header nav ul li:not(:first-child) { + margin-left: 0.5cm; +} + +header li { + margin: 0; + padding: 0; +} + +main section { + display: flex; + align-items: center; + align-items: stretch; + margin-bottom: 1cm; +} + +main section>h2 { + font-size: 1.3em; + min-width: 7cm; + font-weight: bold; +} + +#specs dl, +#repos dl, +#events dl { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin: 0; + max-height: 1000vh; + transition: max-height 5s ease-in-out 0s; + overflow: hidden; +} + +#specs .status, +#repos .type { + color: #333; +} + +#specs div, +#repos div, +#events div { + flex: 1 0 35%; + margin-bottom: 0.5cm; + opacity: 1; + max-width: calc(50% - 0.4cm); + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 1s; +} + +#specs dd, +#repos dd, +#events dd { + margin: 0.1cm 0 0 0; + font-size: 0.8em; + color: #555; + color: var(--dd-text); +} + +#about { + height: 3cm; + display: flex; + align-items: stretch; + margin-bottom: 3rem; +} + +#about * { + flex: 1; + box-sizing: border-box; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +#about h2 { + color: #748cab; + background-color: #1d2d44; +} + +#about p { + padding: 1rem; + text-align: center; +} + +footer { + padding: 1cm 1cm; + border-bottom: thin solid silver; + border-top: thin solid silver; + margin-bottom: 1cm; +} + +footer ul { + align-items: stretch; +} + +footer nav ul { + justify-content: space-between; + align-items: stretch; +} + +.loading { + height: 1.5cm; +} + +#participations { + columns: 4; + column-gap: 2cm; +} + +#participations li { + margin-bottom: 0.2cm; + break-inside: avoid; +} + +@media (max-width: 700px) { + body { + padding: 0; + } + + header { + color: white; + display: flex; + margin: 0; + background: black; + padding: 0.2cm 0cm; + } + + header h1 { + flex: 1; + order: 1; + font-weight: bold; + font-size: 1em; + text-align: center; + color: white; + } + + header p { + order: 2; + font-size: 0.8em; + text-align: center; + flex: 100%; + } + + header nav { + margin-top: 0.25cm; + order: 3; + padding: 0 0.2cm; + } + + header nav ul { + padding: 0.2cm 0.2cm; + display: flex; + justify-content: space-between; + } + + header nav ul li:not(:first-child) { + margin-left: 0.3cm; + } + + header nav a:link, + header nav a:visited { + color: white; + } + + main section:first-child { + margin-top: 1cm; + } + + main section { + display: block; + padding: 0 1cm; + } + + main section h2 { + margin-bottom: 0.5cm; + } + + #specs div { + flex: 1 0 100%; + max-width: unset; + } + + main { + margin-bottom: 0; + } + + #participations { + columns: 2; + } + + footer { + padding: 0.2cm 0 0.2cm 0; + border-bottom: thin solid silver; + border-top: thin solid silver; + font-size: 0.75em; + margin-bottom: 1cm; + } + + footer nav { + padding: 0 0.2cm; + } + + #n_W3Clogo { + display: none; + } +} \ No newline at end of file diff --git a/wg/index.html b/wg/index.html new file mode 100644 index 0000000..08df68d --- /dev/null +++ b/wg/index.html @@ -0,0 +1,191 @@ + + + + + + W3C MiniApps Working Group + + + + + + + + +

+ +

MiniApps Working Group

+ +

Mission

${description}

Specs

${title} - ${latest-status}: ${description}

Group hasn't produced or inherited any specifications.

Repos

${owner.login}/${name} + (${w3c.repo-type}): +
${description}
+

Group has no repositories.

+ +

Meetings

Calendar: +
Next meeting: June 30, 2022
+

See previous minutes on GitHub.

+ + +

Contacts

Chairs:: +
+ + ${name} + ${name}, +
+
Team contacts:: +
+ + ${name} + ${name}, +
+

Members

${title}

Invited Experts

${title}

+ + + + + + + + diff --git a/white-paper/comparison.html b/white-paper/comparison.html index 9d9d449..b7c3387 100644 --- a/white-paper/comparison.html +++ b/white-paper/comparison.html @@ -74,8 +74,20 @@ color: #fff; } + tbody tr td.c4, tbody tr td.c5, tbody tr td.c6, tbody tr td.c7 { + background-color: rgba(0, 255 , 0, 0.3); + } + + tbody tr td.no { + background-color: rgba(255, 0, 0, 0.3); + } + + tbody tr td.partial { + background-color: rgba(255, 255 , 0, 0.3); + } + .c5, .c6, .c7 { - width: 25vw; + width: 15vw; } .search { @@ -180,11 +192,11 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Features W3C Spec Status - PWA.next - QuickApp (Xiaomi, Huawei) - Alipay Mini Program + PWA.next (Chrome, Edge) + QuickApp (Xiaomi, Huawei) + Alipay Mini Program - Baidu Smart Mini + Baidu Smart Mini Program @@ -204,8 +216,8 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

iOS - Yes (Partial) - No + Partial + No Yes Yes @@ -215,9 +227,9 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Yes (Chrome 67+) - No - No - No + No + No + No OS @@ -225,9 +237,9 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Yes (Chrome 70+) - No - No - No + No + No + No OS @@ -235,9 +247,9 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Yes (Chrome 70+) - No - No - No + No + No + No Engine @@ -245,25 +257,37 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Browser Engines - No Chromium layout engine but with V8 engine, more lightweight.
- Providing pure WebAPIs to app developers,Web JS APIs are mapped from Android native APIs and part of - standard WebAPIs.
- Template part(with HTML tags)in .ux file mapping to single android native views and combined view - components, provided native performance experiences.
- CSS subset: Mapping to attributes of Android View(e.g. position, color) - Native(rendering) + WebView (rendering) + Worker (Data storage and business logic) + V8(use UC browsering engine) - Rendering: Native+WebView
- Logic: V8/Javascript Core + +

Native, WebView, V8

+ No Chromium layout engine but with V8 engine, more lightweight.
Providing pure WebAPIs to app developers, + Web JS APIs are mapped from Android native APIs and part of standard WebAPIs.
Template part (with HTML + tags) in .ux file mapping to single android native views and combined view components, provided native performance + experiences.
CSS subset: Mapping to attributes of Android View (e.g. position, color) +

+ + +

Native, WebView, V8

+ Native (rendering) + WebView (rendering) + Worker (Data storage and business logic) + V8 (use UC browser engine) +

+ + +

Native, WebView, V8

+ Rendering: Native+WebView
Logic: V8/JavaScript Core +

+ File format Page - .html, .js, .css - .ux file (template), .js, .css - .axml, .js, .acss - .swan, .js, .css + .html, .js, .css + .ux, .js, .css + .axml, .js, .acss + .swan, .js, .css ES6 @@ -280,7 +304,7 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Audit - No + No Yes Yes Yes @@ -290,32 +314,65 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

App store integration - No + +

Partial

Android (Yes): The Trusted Web Activities on Android allows App Store integration. Additionally TWAs have access to Google Pay (Digital Goods API). Cons: Lack of PWA support in China App Stores on Android and PRC custom Android ROMs.
Windows (Yes): The Microsoft Store on Windows is a trusted single location for customers to discover and install PWAs for their Windows PC.
iOS (Yes): The PWABuilder supports to publish PWAs to the App Store and gain new iPhone and iPad users.
Chrome OS: Will even launch the PWA window on Chrome OS. Cons: Zero market share in China.

+ Yes - Can be used within Alibaba's Native Apps including Alipay, Taobao, DingDing, Gaode, ELE.me - Can be used within Baidu App and Open Source Union apps, such as iQiyi, Bilibili, Wifi and so on + +

Yes

+ Can be used within Alibaba's native apps including Alipay, Taobao, DingTalk, Gaode, ELE.me + +

+ + +

Yes

+ Can be used within Baidu App and Open Source Union apps, such as iQiyi, Bilibili, Wifi and so on +

+ Modular Customized Component - Custom - Elements - Rec + +

Web Components

Custom Elements
Shadow DOM
template element
slot element

+ + REC Yes Yes Yes Yes - Add to home: - screen + Installation Add to home screen - - + Web Application Manifest + WD Yes Yes - Yes (via A2HS feature on Safari) + +

Yes

+ Via A2HS feature on Safari +

+ Yes @@ -324,1124 +381,1688 @@

Comparison of APIs in MiniApps, W3C specs, and PWAs

Yes - Yes (search within system search bar, management apps, app store, browsers, home page etc.) - Yes (search within Alipay) - Yes (search with Baidu search engine) + +

Yes

+ Search within system search bar, management apps, app store, browsers, home page etc. +

+ + +

Yes

+ Search within Alipay. +

+ + +

Yes

+ Search with Baidu search engine. +

+ Application Lifecycle Web Share - Web Share API - CGR + Web Share API + WD Yes - Share(@system.share + @service.share) - onShareAppMessage + +

Yes

+ @system.share, @service.share +

+ + +

Yes

+ onShareAppMessage +

+ Yes Application Lifecycle Splash screen - Splash Screen in Manifest(WIP) - Proposal - Yes (WIP) - Yes (private - implementation) - No and no necessary - No and no necessary + Splash Screen in Manifest + On Hold + Yes + Yes + No + No Application Lifecycle Service Workers - Service Workers + Service Workers Nightly - WD + WD Yes - No - No and no necessary - No and no necessary + No + Yes +

No necessary

Application Lifecycle - Web App Manifest - Web App Manifest - WD + Manifest + Web App Manifest + WD Yes - Yes (private - implementation) - Yes (private - implementation) - Yes (private - implementation) + +

Yes

manifest.json

+ + +

Yes

app.json

+ + +

Yes

app.json

+ Application Lifecycle App Info - No - - No - App Info (@system.app) - No - No + Web App Manifest + Application Information + WD + +

Yes

+ Manifest metadata +

+ + +

Yes

+ @system.app +

+ + No + No User Interaction Fullscreen - Fullscreen API - WD + Media Queries - Display Mode + WD Yes - manifest.display.fullscreen - Yes (private - implementation) - Yes (private - implementation) + +

Yes

+ manifest's display.fullscreen +

+ + Yes + Yes User Interaction Badging - Badging API - CGR - Yes - No - Tab Bar (private - implementation) - Tab Bar (private - implementation) + Badging API + CGR + +

Yes

+ navigator.setAppBadge()
+ Badge implementation on host platforms: Android 8.0 (Oreo) or higher, Windows 7 or higher, iOS has support for badging APIs, not currently supported on Chrome OS. +

+ + No + +

Internal

Internal (in tabs)

+ + +

Internal

Internal (in tabs)

+ User Interaction - Prompt - No - - No - Prompt (@system.prompt) - Popup component - Popup component + Dialogs + HTML dialog element + Living + Standard + Yes + +

Yes

@system.prompt

+ + +

Yes

popup component

+ + +

Yes

popup component

+ User Interaction Vibration - Vibration API - Rec + Vibration API + REC Yes - Vibration - (@system.vibrator) - my.vibrate* - swan.vibrateLong
- swan.vibrateShort + +

Yes

@system.vibrator

+ + +

Yes

my.vibrate

+ + +

Yes

swan.vibrateLong, swan.vibrateShort

+ User Interaction Notification - Notifications API + Notifications API Living Standard Yes - Notification - (@system.notification) - Notice (private - implementation) - Template Message
- Customer Service Message
- (private impletmention) + +

Yes

@system.notification

+ + +

Yes

Notice

+ + +

Yes

Template Message
Customer Service Message

+ User Interaction Screen Orientation - The Screen + The Screen Orientation API - WD + WD Yes - orientation in JSON (Partial) - No - swan.onDeviceMotionChange + +

Partial

orientation in Manifest

+ + No + +

Yes

swan.onDeviceMotionChange


+          
         
         
           User
             Interaction
           User Idle Detection
-          User Idle
+          User Idle
               Detection
-          Proposal
-          Yes
-          No
-          No
-          No
+          DCGR
+          
+            
+              Yes
+              IdleDetector()

+              Chrome 94 or higher on Android and desktop.
+            
+          
+          No
+          No
+          No
         
         
           User
             Interaction
           Wake Lock
-          Wake Lock API
-          CR
+          Wake Lock API
+          WD
           Yes
-          No
-          only Screen WakeLock (my.setKeepScreenOn(OBJECT))
-          only Screen WakeLock swan.setKeepScreenOn
+          
+            
+              Yes
brightness.setKeepScreenOn
+          
+          
+            
+              Partial
only screen lock my.setKeepScreenOn
+          
+          
+            
+              Partial
only screen lock swan.setKeepScreenOn
+          
         
         
           User
             Interaction
           Clipboard
-          Clipboard API and
+          Clipboard API and
               events
-          WD
+          WD
           Yes
-          Clipboard 
-            (@system.clipboard)
-          my.getClipboard/my.setClipboard
-          swan.setClipboardData

-            swan.getClipboardData
+          
+            
+              Yes
@system.clipboard
+          
+          
+            
+              Yes
my.getClipboard, my.setClipboard
+          
+          
+            
+              Yes
swan.setClipboardData, swan.getClipboardData
+          
         
         
           User
             Interaction
-          execCommand
-          execCommand
+          execCommand()
+          execCommand
           
-          Unofficial Draft
-          Yes
-          Clipboard (@system.clipboard)
-          my.getClipboard/my.setClipboard
-          swan.setClipboardData

-            swan.getClipboardData
+          Discontinued
+          No
+          No
+          No
+          No
         
         
           User
             Interaction
-          History API
-          The History Interface
-          WD
-          Yes
-          Page Router (@system.router)
-          Navigator component
-          Router (private implementation)
+          Navigation (History) API
Shared Element Transitions
+          
+             Navigation API

+             Shared Element Transitions
+            
+          DCGR
+          
+            
+              Yes
+              navigation.navigate()


+              The Navigation APIs is the MUCH improved version of History API. 
+              Supported on Chrome/Webview 102 or higher on Android and desktop.


+              The Shared Element Transitions API is available in Chrome Canary as of version 101 behind a flag at chrome://flags/#document-transition
+            
+          
+          
+            
+              Yes
@system.router
+          
+          
+            
+              Yes
navigator component
+          
+          
+            
+              Yes
navigator component
+          
         
         
           User
             Interaction
-          Barcode
-          Accelerated Shape
+          Shape detection in Images
+          Accelerated Shape
               Detection in Images
-          ED
+          CGR
           Yes
-          Barcode (@system.barcode)
-          Barcode (private
-            implementation)
-          swan.scanCode

-            swan.ai.faceDetect

-            swan.ai.advancedGeneralIdentify
+          
+            
+              Yes
@system.barcode
+          
+          
+            
+              Yes
Barcode
+          
+          
+            
+              Yes
swan.scanCode, swan.ai.faceDetect, swan.ai.advancedGeneralIdentify
+          
         
         
           User
             Interaction
-          Shake
-          No
+          Shake detection
+           
            
-          No
-          No
-          my.watchShake(OBJECT)
-          No
+          
+            
+            No
+             No Shake Detection API but it can easily be implemented using
+             accelerometer
+             and/or gyroscope.
+            
+            
+          No
+          
+            
+              Yes
my.watchShake
+          
+          No
         
         
           User
             Interaction
-          User Capture Screen Event
-          No
+          Detection of User Screenshots
+           
            
-          No
-          No
-          my.onUserCaptureScreen(CALLBACK)
-          swan.onUserCaptureScreen
+          No
+          
+            
+              Yes
@system.screenshot
+          
+          
+            
+              Yes
my.onUserCaptureScreen
+          
+          
+            
+              Yes
swan.onUserCaptureScreen
+          
         
         
           User
             Interaction
-          Alarms
-          No
+          Alarms
+           
            
-          No
-          Yes (@system.alarm)
-          No
-          No
+          
+            
+              Partial
+              getNotifications()

+              showNotification()

+              The Notification Triggers API allows you to schedule local notifications that don't require a network connection. It is no longer pursued 
+              but the requirements of recurring notification triggers still exist.
+            
+          
+          
+            
+              Yes
@system.alarm
+          
+          No
+          No
         
         
           Payment and 
             Services
           Payment
-          Payment
+          Payment
               Method: Basic Card
-          WD
+          WG Note
           Yes
-          Pay (@service.pay) (WeChat + Alipay)
-          Alipay
-          swan.requestPolymerPayment
+          
+            
+              Yes
@service.pay (WeChat + Alipay)
+          
+          
+            
+              Yes
my.tradePay
+          
+          
+            
+              Yes
swan.requestPolymerPayment
+          
         
         
           Payment and 
             Services
           Payment
-          Payment Method
+          Payment Method
               Identifiers
-          CR
+          PR
           Yes
-          Pay (@service.pay) (WeChat + Alipay)
-          Alipay
-          swan.requestPolymerPayment
+          
+            
+              Yes
@service.pay (WeChat + Alipay)
+          
+          
+            
+              Yes
my.tradePay
+          
+          
+            
+              Yes
swan.requestPolymerPayment
+          
         
         
           Payment and 
             Services
           Payment
-          Payment Handler
+          Payment Handler
               API
-          WD
+          WD
           Yes
-          Pay (@service.pay) (WeChat + Alipay)
-          Alipay
-          swan.requestPolymerPayment
+          
+            
+              Yes
@service.pay (WeChat + Alipay)
+          
+          
+            
+              Yes
my.tradePay
+          
+          
+            
+              Yes
swan.requestPolymerPayment
+          
         
         
           Payment and 
             Services
           Payment
-          Payment Request
+          Payment Request
               API
-          CR
+          PR
           Yes
-          Pay (@service.pay) 
-            (WeChat + Alipay)
-          Alipay
-          swan.requestPolymerPayment
+          
+            
+              Yes
@service.pay (WeChat + Alipay)
+          
+          
+            
+              Yes
my.tradePay
+          
+          
+            
+              Yes
swan.requestPolymerPayment
+          
         
         
           Network and
             Communications
-          Push
-          Push API
-          WD
+          Push Messages
+          Push API
+          WD
           Yes
-          Push (@service.push)
-          alipay.open.app.mini.templatemessage.send
-          Template Message

-            Customer Service Message 

-            (private impletmention)
+          
+            
+              Yes
@service.push
+          
+          
+            
+              Yes
alipay.open.app.mini.templatemessage.send
+          
+          
+            
+              Yes
Template Message, Customer Service Message
+          
         
         
           Network and
             Communications
           Fetch
-          Fetch
-          WD
+          Fetch
+          Living Standard
           Yes
-          Fetch (@system fetch)
-          No (use my.request)
-          swan.request
+          
+            
+              Yes
@system fetch
+          
+          
+            
+              Yes
my.request
+          
+          
+            
+              Yes
swan.request
+          
         
         
           Network and
             Communications
           WebSocket
-          Web
+          Web
               sockets
-          CR
+          Living Standard
           Yes
-          WebSocket (@system.websocketfactory)
-          my.connectSocket (private implementation)
-          swan WebSocket
+          
+            
+              Yes
WebSocket (@system.websocketfactory)
+          
+          
+            
+              Yes
my.connectSocket
+          
+          
+            
+              Yes
WebSocket
+          
         
         
           Network and
             Communications
-          iBeacon
-          No
-           
-          No
-          No
-          iBeacon (private implementation)
-          No
+          (BLE) iBeacon
+          Web Bluetooth Scanning
+          DCGR
+          
+            
+              Partial
+              navigator.bluetooth.requestLEScan()

+              Partial development on Android and Mac with flag required for Scanning API.
+            
+          
+          No
+          
+            
+              Yes
iBeacon

+          
+          No
         
         
           DataStorage
           
-          Web Storage
-          Web
+          Storage
+          Web
               Storage
-          Rec
+          REC
           Yes
-          Storage 
-            (@system.storage)
-          Cache (private
-            implementation)
-          Cache (private
-            implementation)
+          
+            
+              Yes
@system.storage
+          
+          
+            
+              Yes
Cache
+          
+          
+            
+              Yes
Cache
+          
         
         
           DataStorage
           
           File API
-          File API
-          WD
+          File API
+          WD
           Yes
-          File (@system.file)
-            and File Upload/Download (@system.request)
-          File (private
-            implementation)
-          File (private
-            implementation)
+          
+            
+              Yes
@system.file
+          
+          
+            
+              Yes
File API
+          
+          
+            
+              Yes
File API
+          
         
         
           DataStorage
           
-          Native File System
+          File System Access
             API
-          Native File System
+          File System Access
               API
-          ED
-          Yes
-          File (@system.file)
-            and File Upload/Download (@system.request)
-          File (private
-            implementation)
-          File (private
-            implementation)
+          CGR
+          ?
+          
+            
+              Yes
@system.file, @system.request
+          
+          
+            
+              Yes
File API
+          
+          
+            
+              Yes
File API
+          
         
         
           DataStorage
           
           File Handling
-          File Handling (Proposal)
+          File Handling
           Proposal
           Yes
-          No
-          No
-          Yes (Partial)
+          No
+          No
+          Partial
         
         
           DataStorage
           
           IndexedDB
-          Indexed Database API 3.0
+          Indexed Database API 3.0
           
-          ED
+          WD
           Yes
-          No
-          No
-          No
+          No
+          No
+          No
         
         
           Forms
           
           Calendar
-          No
+           
            
-          No
-          Calendar (@system.calendar)
-          Calendar (private
-            implementation)
-          No
+          No
+          
+            
+              Yes
@system.calendar
+          
+          
+            
+              Yes
calendar element
+          
+          
+            
+              Yes
swan.addEventOnCalendar
+          
         
         
           Forms
           
           Date Picker
-          Date State
+          input date state
           
-          WD
+          REC
           Yes
-          picker (private
-            implementation)
-          my.datePicker(object)
-          picker component (mode = date)
+          
+            
+              Yes
picker element
+          
+          
+            
+              Yes
my.datePicker
+          
+          
+            
+              Yes
picker component (mode=date)
+          
         
         
           Forms
           
           City Picker
-          No
+           
            
-          No
-          No
-          my.chooseCity
-          picker component(mode = region)
+          No
+          No
+          
+            
+              Yes
my.chooseCity
+          
+          
+            
+              Yes
picker element (mode=region)
+          
         
         
           Forms
           
           Color Picker
-          Color state
-          WD
+          input color state
+          REC
           Yes
-          picker (private
-            implementation)
-          No
-          No
+          
+            
+              Yes
picker element
+          
+          No
+          No
         
         
           Sensors and 
             Local Interactions
-          Sensor (Ambient Light)
-          Ambient Light Sensor
+          Ambient Light Sensor
+          Ambient Light Sensor
           
-          WD
+          WD
           Yes
-           
-           
-          No
+          
+            
+              Yes
sensor.subscribeLight
+          
+          No
+          No
         
         
           Sensors and 
             Local Interactions
-          Sensor (Proximity)
-          Proximity Sensor
-          WD
+          Proximity Sensor
+          Proximity Sensor
+          WD
           Yes
-          Sensor (sensor.subscribeProximity(OBJECT))
-          No
-          No
+          
+            
+              Yes
sensor.subscribeProximity
+          
+          No
+          No
         
         
           Sensors and 
             Local Interactions
-          Sensor (Orientation Event)
-          DeviceOrientation
+          Orientation Event
+          DeviceOrientation
               Event
-          WD
+          WD
           Yes
-          Sensor (sensor.subscribeCompass(OBJECT))
-          my.onCompassChange/offCompassChange
-          swan.onCompassChange

-            swan.startCompass

-            swan.stopCompass
+          
+            
+              Yes
sensor.subscribeCompass
+          
+          
+            
+              Yes
my.onCompassChange, offCompassChange
+          
+          
+            
+              Yes
swan.onCompassChange, swan.startCompass, swan.stopCompass
+          
         
         
           Sensors and 
             Local Interactions
-          Sensor (OrientationSensor)
-          Orientation
+          Orientation Sensor
+          Orientation
               Sensor
-          WD
+          WD
           Yes
-          Sensor (sensor.subscribeCompass(OBJECT))
-          my.onCompassChange/offCompassChange
-          swan.onCompassChange

-            swan.startCompass

-            swan.stopCompass
+          
+            
+              Yes
sensor.subscribeCompass
+          
+          
+            
+              Yes
my.onCompassChange, my.offCompassChange
+          
+          
+            
+              Yes
swan.onCompassChange, swan.startCompass, swan.stopCompass
+          
         
         
           Sensors and 
             Local Interactions
-          Sensor (Magnetometer)
-          Magnetometer
-          WD
+          Magnetometer
+          Magnetometer
+          WD
           Yes
-          Sensor (sensor.subscribeCompass(OBJECT))
-          my.onCompassChange/offCompassChange
-          swan.onCompassChange

-            swan.startCompass

-            swan.stopCompass
+          
+            
+              Yes
sensor.subscribeCompass
+          
+          
+            
+              Yes
my.onCompassChange, my.offCompassChange
+          
+          
+            
+              Yes
swan.onCompassChange, swan.startCompass, swan.stopCompass
+          
         
         
           Sensors and 
             Local Interactions
-          Sensor (Gyroscope)
-          Gyroscope
-          WD
+          Gyroscope
+          Gyroscope
+          CR
           Yes
-          Sensor (sensor.subscribeCompass(OBJECT))
-          my.onGyroscopeChange/offGyroscopeChange
-          swan.onCompassChange

-            swan.startCompass

-            swan.stopCompass
+          No
+          
+            
+              Yes
my.onGyroscopeChange, offGyroscopeChange
+          
+          No
         
         
           Sensors and 
             Local Interactions
-          Sensor (Accelerometer)
-          Accelerometer
-          WD
+          Accelerometer
+          Accelerometer
+          CR
           Yes
-          Sensor (sensor.subscribeAccelerometer(OBJECT))
-          my.onAccelerometerChange/offAccelerometerChange
-          swan.onAccelerometerChange

-            swan.offAccelerometerChange
+          
+            
+              Yes
sensor.subscribeAccelerometer
+          
+          
+            
+              Yes
my.onAccelerometerChange, offAccelerometerChange
+          
+          
+            
+              Yes
swan.onAccelerometerChange, swan.offAccelerometerChange
+          
         
         
           Sensors and 
             Local Interactions
-          Sensor(Geolocation)
-          Geolocation
+          Geolocation
+          Geolocation
               Sensor
-          WD
+          WD
           Yes
-          Geoloaction (@system.geolocation)
-          Location (private
-            implementation)
-          swan.getLocation

-            swan.chooseLocation

-            swan.openLocation
+          
+            
+              Yes
@system.geolocation
+          
+          
+            
+              Yes
Location
+          
+          
+            
+              Yes
swan.getLocation, swan.chooseLocation, swan.openLocation
+          
         
         
           Sensors and 
             Local Interactions
-          Sensor
-          Generic Sensor API
-          WD
+          Generic Sensor
+          Generic Sensor API
+          CR
           Yes
-          Sensor (@system.sensor)
-          Yes (private
-            implementation)
-          Not general
-        
-        
-          Sensors and 
-            Local Interactions
-          Geolocation
-          Geolocation API
+          
+            
+              Yes
@system.sensor
+          
+          Yes
+          
+            
+              No
Non generic
           
-          Rec
-          Yes
-          Geoloaction (@system.geolocation)
-          Location (private
-            implementation)
-          swan.getLocation

-            swan.chooseLocation

-            swan.openLocation
         
         
           Sensors and 
             Local Interactions
           WebHID
-          WebHID API
-          ED
+          WebHID API
+          CGR
           Yes
-          No
-          No
-          No
+          No
+          No
+          No
         
         
           Sensors and 
             Local Interactions
           Web Serial
-          Serial API
-          CGR
+          Serial API
+          CGR
           Yes
-          No
-          No
-          No
+          No
+          No
+          No
         
         
           Sensors and Local Interactions
           
           Battery Status
-          Battery Status API
-          CR
+          Battery Status API
+          WD
           Yes
-          Battery (@system.battery)
-          my.getSystemInfo
-          swan.getBatteryInfo

-            swan.getBatteryInfoSync
+          
+            
+              Yes
@system.battery
+          
+          
+            
+              Yes
my.getSystemInfo
+          
+          
+            
+              Yes
swan.getBatteryInfo, swan.getBatteryInfoSync
+          
         
         
           Sensors and Local Interactions
           
           NFC
-          Web NFC API
-          CGR
+          Web NFC API
+          CGR
           Yes
-           
-           
-          No
+          
+            
+              Yes
@system.nfc
+          
+          No
+          No
         
         
           Sensors and Local Interactions
           
           Bluetooth
-          Web
+          Web
               Bluetooth
-          CGR
+          CGR
           Yes
-          Bluetooth (private
-            implementation)
-          Bluetooth (private
-            implementation)
-          No
+          
+            
+              Yes
@system.bluetooth
+          
+          
+            
+              Yes
Bluetooth API
+          
+          No
         
         
           Sensors and Local Interactions
           
           Device Info
-          No
+           
            
-          No
-          Device Info (@system.device)
-          my.getSystemInfo
-          swan.getSystemInfo
+          No
+          
+            
+              Yes
@system.device
+          
+          
+            
+              Yes
my.getSystemInfo
+          
+          
+            
+              Yes
swan.getSystemInfo
+          
         
         
           Sensors and Local Interactions
           
           Network Information
-          Network 
+          Network 
               Information API
-          CGR
-          Yes
-          Network Info 
-            (@system.network)
-          Network Status 
-            (private implementation)
-          swan.getNetworkType
+          CGR
+          ?
+          
+            
+              Yes
@system.network
+          
+          
+            
+              Yes
my.getNetworkType
+          
+          
+            
+              Yes
swan.getNetworkType
+          
+        
         
           Sensors and Local Interactions
           
-          Screen Brightness
-          No
-           
-          No
-          Screen Brightness 
-            (@system.brightness)
-          Screen Brightness 
-            (private implementation)
-          swan.setScreenBrightness

-            swan.getScreenBrightness
+          Screen Brightness Control
+          Screen Wake Lock API
+          WD
+          
+            
+              No (WIP)
+              The need to control screen brightness is still in progress.
+            
+          
+          
+            
+              Yes
@system.brightness
+          
+          
+            
+              Yes
my.setScreenBrightness, my.getScreenBrightness
+          
+          
+            
+              Yes
swan.setScreenBrightness, swan.getScreenBrightness
+          
         
         
           Sensors and Local Interactions
           
-          System Volume
-          No
+          System Volume Control
+           
            
-          No
-          System Volume (@system.volume)
-          No
-          No
+          No
+          
+            
+              Yes
@system.volume
+          
+          No
+          No
         
         
           Sensors and Local Interactions
           
-          App Management
-          No
+          Third-party App Management
+           
            
-          No
-          App Management 
-            (@system.package)
-          No and managed by 
-            Alipay
-          No and managed by 
-            Baidu App
+          No
+          
+            
+              Yes
@system.package
+          
+          
+            
+              No
(only managed by Alipay)
+          
+          
+            
+              No
(only managed by Baidu App)
+          
         
         
           Sensors and Local Interactions
           
-          Contact
-          No
-           
-          No
-          Contact (@system.contact)
-          Contact (private
-            implementation)
-          swan.addPhoneContact
+          Contacts Management
+          Contact Picker API
+          Proposal
+          
+            
+              Yes
+              navigator.contacts

+              Available on Android (Chrome 80+)
+            
+          
+          
+            
+              Yes
@system.contact (pick and list)
+          
+          
+            
+              Yes
my.addPhoneContact
+          
+          
+            
+              Yes
swan.addPhoneContact
+          
         
         
           Sensors and Local Interactions
           
-          SMS
-          No
+          SMS Management
+           
            
-          No
-          SMS (@system.sms)
-          No
-          No
+          No
+          
+            
+              Yes
@system.sms
+          
+          No
+          No
         
         
           Sensors and Local Interactions
           
-          Wi-Fi
-          No
+          Wi-Fi Management
+           
            
-          No
-          Wi-Fi (@system.wifi)
-          No
-          No
+          No
+          
+            
+              Yes
@system.wifi
+          
+          
+            
+              Yes
Wi-Fi API
+          
+          
+            
+              Yes
Wi-Fi API
+          
         
         
           Sensors and Local Interactions
           
           Card
-          No
+           
            
-          No
+          No
           Yes
-          No
-          No
+          No
+          No
         
         
           Sensors and Local Interactions
           
           Phone Call
-          Web Telephony
-              API (No update for 5 years)
-          ED
-          No
-          Yes
-          my.makePhoneCall(OBJECT)
-          swan.makePhoneCall
+          Web Telephony
+              API
+          Discontinued
+          No
+          No
+          
+            
+              Yes
my.makePhoneCall
+          
+          
+            
+              Yes
swan.makePhoneCall
+          
         
         
           Sensors and Local Interactions
           
           Modifying System 
             Settings
-          No
+           
            
-          No
-          Yes(Partial)
-          No
-          Yes(Partial)
+          No
+          
+            
+              Yes
Yes (locale and themes)
+          
+          
+            
+              Partial
my.openSetting
+          
+          
+            
+              Partial
swan.openSetting
+          
         
         
           Graphics and Layout
           
           Animations
-          Web Animations
+          Web Animations
           
-          ED
+          WD
           Yes
-          Animation Style 
-            (private implementation)
-          my.createAnimation
-          swan.createAnimation
+          
+            
+              Yes
CSS-based
+          
+          
+            
+              Yes
my.createAnimation
+          
+          
+            
+              Yes
swan.createAnimation
+          
         
         
           Graphics and Layout: 
           
           Canvas
-          The
-              canvas element
-          WD
+          HTML canvas element
+          REC
           Yes
-          Canvas (private
-            implementation)
-          Canvas (private
-            implementation)
-          Canvas (private
-            implementation)
+          
+            
+              Yes
canvas element
+          
+          
+            
+              Yes
canvas element
+          
+          
+            
+              Yes
canvas element
+          
         
         
           Graphics and Layout
           
           Local Font Access
-          Local
-              Font Access API
-              (Proposal)
-          Proposal
-          Yes
-          Customized Font (private implementation)
-          No
-          No
+          Local
+              Font Access API
+          CGR
+          
+            
+              Yes
+              queryLocalFonts()

+              Chrome 103 or higher
+            
+          
+          No
+          No
+          No
         
         
           Media
           Recording
-          MediaStream
+          MediaStream
               Recording
-          WD
+          WD
           Yes
-          Recording (@system.record)
-          No (Disabled by Alipay)
-          Recording (private
-            implementation)
+          
+            
+              Yes
@system.record
+          
+          
+            
+              Yes
my.getRecorderManager (partially disabled)
+          
+          
+            
+              Yes
RecorderManager
+          
         
         
           Media
           Media Capture and
             Streams
-          Media Capture and
+          Media Capture and
               Streams
-          CR
-          Yes (Partial)
-          Media (@system.media) (Take photo/video, pick image/video/file, save to photos album)
-          Only image (take photo, pick image)
-          Media (private implementation)
+          REC
+          Yes
+          
+            
+              Yes
@system.media
+          
+          
+            
+              Yes
my.chooseImage...
+          
+          
+            
+              Yes
swan.chooseImage...
+          
         
         
           Media
           Media Capture
-          HTML Media
+          HTML Media
               Capture
-          Rec
+          REC
           Yes
-          Media (@system.media) (Take photo/video, pick image/video/file, save to photos album)
-          Only image (take photo, pick image)
-          Media (private implementation)
+          
+            
+              Yes
@system.media
+          
+          
+            
+              Yes
my.chooseImage...
+          
+          
+            
+              Yes
swan.chooseImage...
+          
         
         
           Media
           Media Capture Image
-          MediaStream Image
+          MediaStream Image
               Capture
-          WD
+          WD
           Yes
-          Media (@system.media) (Take photo/video, pick image/video/file, save to photos album)
-          Only image (take photo, pick image)
-          Media (private implementation)
+          
+            
+              Yes
@system.media
+          
+          
+            
+              Yes
my.chooseImage...
+          
+          
+            
+              Yes
swan.chooseImage...
+          
         
         
           Media
           Audio
-          Audio
+          HTML audio element
           
-          WD
+          REC
           Yes
-          Audio (@system.audio)
-          No
-          Audio (private implementation)
+          
+            
+              Yes
@system.audio
+          
+          
+            
+              Yes
my.createInnerAudioContext
+          
+          
+            
+              Yes
audio element
+          
         
         
           Media
           Video
-          Video
+          HTML video element
           
-          WD
+          REC
           Yes
-          Yes (private implementation)
-          No
-          Video (private implementation)
+          
+            
+              Yes
video element
+          
+          
+            
+              Yes
video element
+          
+          
+            
+              Yes
video element
+          
         
         
           Media
-          Image Editor
-          No
+          Image Manipulation
+           
            
-          No
-          Picture Editor 
-            (@system.image)
-          No
-          No
+          No
+          
+            
+              Yes
@system.image
+          
+          No
+          No
         
         
-          Media (TBD)
+          Media
           Map
-          No
+           
            
-          No
-          Map label
-          Map component
-          Map component
+          No
+          
+            
+              Yes
map component
+          
+          
+            
+              Yes
map component
+          
+          
+            
+              Yes
map component
+          
         
         
           Security and Privacy
           Web Crypto API
-          Web Cryptography API
+          Web Cryptography API
           
-          Rec
+          REC
           Yes
-          Cipher 
-            (@system.cipher)
-          my.rsa
-          No
+          
+            
+              Yes
@system.cipher
+          
+          
+            
+              Yes
my.rsa
+          
+          No
         
         
           Security and
             Privacy
-          Auth
-          Web Authentication
-          Rec
+          Authentication
+          Web Authentication
+          REC
           Yes
-          Yes (private
-            implementation)
-          my.getAuthCode
-          swan.authorize
+          
+            
+              Yes
@service.account
+          
+          
+            
+              Yes
my.getAuthCode
+          
+          
+            
+              Yes
swan.authorize
+          
         
         
           Security and
             Privacy
           Permissions
-          Permissions
-          WD
+          Permissions
+          WD
           Yes
-          manifest.permissions
-          my.showAuthGuide 
-            (Object)/my.getSetting(OBJECT)
-          swan.getSetting
+          
+            
+              Yes
Manifest's permissions member
+          
+          
+            
+              Yes
app.json permission member
+          
+          
+            
+              Yes
app.json permission member
+          
         
         
           Security and
             Privacy
-          SMS OTP Retriever
-          SMS OTP
-              Retriever(Proposal)
-          Proposal
-          Yes
-          Yes (@system.sms)
-          No
-          No
+          One-time Password (OTP)
+          
+            WebOTP
+          
+          DCGR
+          
+            
+              Yes
+              OTPCredential

+              Chrome 93 or higher
+            
+          
+          
+            
+              Yes
@system.sms
+          
+          No
+          No
         
         
           Security and
             Privacy
           Sign up API
-          Sign up with
-              phone number: 
-              API(Proposal)
+          Sign up with
+              phone number API
           Proposal
-          Yes
-          No
-          No
-          No
+          ?
+          No
+          No
+          No
         
         
           Security and
             Privacy
           Statistics
-          No
+           
            
-          No
-          Statistics (@service.stats)
-          No
-          provided statistcs plan
+          No
+          
+            
+              Yes
@service.stats
+          
+          No
+          
+            
+              Yes
Provide statistics plan
+          
         
         
           Security and
             Privacy
-          Account
-          No
+          Account Information
+           
            
-          No
-          Account (@service.account)
-          No
-          swan.getEnvInfoSync
+          No
+          
+            
+              Yes
@service.account
+          
+          No
+          
+            
+              Yes
swan.getEnvInfoSync
+          
         
         
           Security and
             Privacy
-          User Info
-          No
+          User Information
+           
            
-          No
-          No
-          my.getAuthUserInfo
-          swan.getUserInfo
+          No
+          No
+          
+            
+              Yes
my.getAuthUserInfo
+          
+          
+            
+              Yes
swan.getUserInfo
+          
         
         
           Security and
             Privacy
-          Third-party Account
-          No
+          Third-party Accounts
+           
            
-          No
-          Third-party Account (QQ + WeChat + Weibo)
-          No
-          No
+          No
+          
+            
+              Yes
@service.qqaccount, @service.wxaccount, @service.wbaccount
+          
+          No
+          No
         
         
           Security and
             Privacy
           Data Analysis
-          No
+           
            
-          No
-          No
-          my.reportAnalytics
-          swan.reportAnalytics
+          No
+          No
+          
+            
+              Yes
my.reportAnalytics
+          
+          
+            
+              Yes
swan.reportAnalytics
+          
         
         
           Security and
             Privacy
           Text Risk 
             Identification
-          No
+           
            
-          No
-          No
-          my.textRiskIdentification (Object)
-          swan.ai.textReview
+          No
+          No
+          
+            
+              Yes
my.textRiskIdentification
+          
+          
+            
+              Yes
swan.ai.textReview
+          
         
         
           Security and
             Privacy
           Image Risk 
             Identification
-          No
+           
            
-          No
-          No
-          Image Content 
-            Security (private implementation)
-          swan.ai.imageAudit
+          No
+          No
+          
+            
+              Yes
my.ap.imgRisk
+          
+          
+            
+              Yes
swan.ai.imageAudit
+          
         
         
           Security and
             Privacy
           Fingerprint 
-            Authertication
-          No
-           
-          No
-          No
-          No
-          No
+            Authentication
+          WebAuthn
+          CR
+          
+            
+              Yes
+              Supported via WebAuthn. Build your first WebAuthn app
+            
+          
+          No
+          No
+          No
         
         
           Security and
             Privacy
           Face Authentication
-          No
-           
-          No
-          No
-          Face Authentication (private implementation)
-          swan.ai.faceMatch
+          WebAuthn
+          CR
+          
+            
+              Yes
+              Supported via WebAuthn
+            
+          
+          No
+          
+            
+              Yes
Face Authentication
+          
+          
+            
+              Yes
swan.ai.faceMatch
           
         
         
-          Performance 
-            and Turning
+          Performance
           Memory Warning
-          No
+           
            
-          No
-          No
-          No
-          swan.onMemoryWarning
+          No
+          No
+          
+            
+              Yes
my.onMemoryWarning
+          
+          
+            
+              Yes
swan.onMemoryWarning
+          
         
       
     
-    
+    search.addEventListener('keyup', filter, false)
+  
 
 
 
\ No newline at end of file
diff --git a/white-paper/images/game_tv.png b/white-paper/images/game_tv.png
new file mode 100644
index 0000000..222b444
Binary files /dev/null and b/white-paper/images/game_tv.png differ
diff --git a/white-paper/images/hvac.png b/white-paper/images/hvac.png
new file mode 100644
index 0000000..9376289
Binary files /dev/null and b/white-paper/images/hvac.png differ
diff --git a/white-paper/images/login.png b/white-paper/images/login.png
new file mode 100644
index 0000000..272b5a2
Binary files /dev/null and b/white-paper/images/login.png differ
diff --git a/white-paper/images/miniapp_pwa.svg b/white-paper/images/miniapp_pwa.svg
new file mode 100644
index 0000000..1dd7026
--- /dev/null
+++ b/white-paper/images/miniapp_pwa.svg
@@ -0,0 +1,259 @@
+
diff --git a/white-paper/images/smart_speaker.png b/white-paper/images/smart_speaker.png
new file mode 100644
index 0000000..738e8bf
Binary files /dev/null and b/white-paper/images/smart_speaker.png differ
diff --git a/white-paper/images/tv_e_commerce.png b/white-paper/images/tv_e_commerce.png
new file mode 100644
index 0000000..91b5847
Binary files /dev/null and b/white-paper/images/tv_e_commerce.png differ
diff --git a/white-paper/images/user_authorization.png b/white-paper/images/user_authorization.png
new file mode 100644
index 0000000..34cfa48
Binary files /dev/null and b/white-paper/images/user_authorization.png differ
diff --git a/white-paper/index.html b/white-paper/index.html
index 80b93b1..95517f1 100644
--- a/white-paper/index.html
+++ b/white-paper/index.html
@@ -1,228 +1,540 @@
-
-
+
+
+
+
+
+    
+    
+MiniApp Standardization White Paper version 2
 
-
-    
-    MiniApp Standardization White Paper
+    
+
-
-    
-
-    
-
-
-
-    
-        
-        This document introduces a new format for mobile application, named MiniApp, which is a very popular hybrid solution relying on Web technologies but also integrates with capabilities of Native Apps.
-        
-    
-    
+    
+
+
+    
+
+    
+
+
+
+
+
+
+
+
+    
+  
+    MiniApp Standardization White Paper version 2 
+    W3C Editor's Draft 01 July 2022
+    
+      More details about this document
+      
+        This version:

+                https://w3c.github.io/miniapp/white-paper/
+              
+        Latest published version:

+                https://www.w3.org/TR/mini-app-white-paper/
+              
+        Latest editor's draft:
https://w3c.github.io/miniapp/white-paper/
+        History:

+                    https://www.w3.org/standards/history/mini-app-white-paper
+                  

+                    Commit history
+                  
+        
+        
+        
+        
+        
+        Editors:

+    Qing An (Alibaba)
+  

+    Dan Zhou (Baidu, Inc)
+  

+    Martin Alvarez-Espinar (Huawei)
+  

+    Zitao Wang (Huawei)
+  

+    Wanming Lin (Intel Corporation)
+  

+    Kaining Yuan (Intel Corporation)
+  

+    Canfeng Chen (Xiaomi)
+  

+    Yinli Chen (Xiaomi)
+  

+    Anqi Li (W3C)
+  

+    Fuqiao Xue (W3C)
+  
+        
+                Former editors:
+              

+    Dapeng Liu (Alibaba)
+  

+    Hongru Zhu (Alibaba)
+  

+    Qingqian Tao (Baidu, Inc)
+  

+    Zhixing Lei (Baidu, Inc)
+  

+    Lei Zhao (China Mobile)
+  

+    Zhiqiang Yu (Huawei)
+  

+    Xiaowei Jiang (Xiaomi)
+  
+        
+        Feedback:

+        GitHub w3c/miniapp
+        (pull requests,
+        new issue,
+        open issues)
+      
public-miniapps-wg@w3.org with subject line [mini-app-white-paper] … message topic … (archives)
+        
+        
+      
+    
+    
+    
+    
+    Copyright
+    ©
+    2019-2022
+    
+    W3C^® (MIT,
+    ERCIM, Keio,
+    Beihang). W3C
+    liability,
+    trademark and
+    permissive document license rules apply.
+  
+    
+  
+    Abstract
         
-        This is still a work in progress. The proposal is being incubated in the W3C Chinese Web Interest Group.
+        This document introduces a new format for mobile applications, named MiniApp, which is a very popular hybrid solution relying on Web technologies but also integrates with capabilities of the native apps.
         
     
+    Status of This Document
This section describes the status of this
+      document at the time of its publication. A list of current W3C
+      publications and the latest revision of this technical report can be found
+      in the W3C technical reports index at
+      https://www.w3.org/TR/.
+    
+    This document was published by the MiniApps Working Group as
+    an Editor's Draft. 
+  
Publication as an Editor's Draft does not
+  imply endorsement by W3C and its Members. 

+    This is a draft document and may be updated, replaced or obsoleted by other
+    documents at any time. It is inappropriate to cite this document as other
+    than work in progress.
+    
+  

+    
+        This document was produced by a group
+        operating under the
+        W3C Patent
+          Policy.
+      
+    
+                W3C maintains a
+                public list of any patent disclosures
+          made in connection with the deliverables of
+          the group; that page also includes
+          instructions for disclosing a patent. An individual who has actual
+          knowledge of a patent which the individual believes contains
+          Essential Claim(s)
+          must disclose the information in accordance with
+          section 6 of the W3C Patent Policy.
+        
+  

+                  This document is governed by the
+                  2 November 2021 W3C Process Document.
+                
Table of Contents
Abstract
Status of This Document
1. Introduction1.1 Problems
1.2 What is MiniApp?
1.3 Gap between MiniApps and PWA
1.4 Case studies1.4.1 Case 1: Shared Bicycle Service
1.4.2 Case 2: AR Zoo
1.4.3 Case 3: MiniApp for Vehicle
1.4.4 Case 4: MiniApp for IoT
1.4.5 Case 5: MiniApp for TV
2. MiniApp Overview2.1 Core Features2.1.1 Separate the view layer from the logic layer
2.1.2 Rich APIs and Components
2.1.3 MiniApp Constructor
2.1.4 MiniApp Widgets
2.1.5 Single-Instance, Multi-Entries
2.1.6 Performance and User Experience
2.1.7 Login
2.1.8 Subpackaging
2.1.9 Add-ons
+                  
2.2 MiniApp Market
3. Working with the Web3.1 Application Lifecycle3.1.1 Hybrid Rendering
3.1.2 Transition Animation
3.1.3 Standardise the Package Constructor of MiniApp
3.1.4 Standardise the navigation to a MiniApp page
3.1.5 MiniApp Widgets
3.2 Performance and Tuning3.2.1 Define an event for "time to interactive" in MiniApp
3.3 Graphics and Media3.3.1 3D Model Element
3.3.2 Face Tracking
3.3.3 Hand gestures tracking and recognition
3.3.4 Low level AR APIs based on ARCore and ARKit
4. Current standards work; the WG work4.1 Lifecycle
4.2 Manifest
4.3 Packaging
4.4 Addressing
4.5 Widget
4.6 Implementation, converting tools
5. New ideas incubated; the CG work5.1 UI components
5.2 MiniApps for IoT
6. Security and Privacy Consideration6.1 Capability authentication
6.2 
+                      User Authorization
+                    
6.3 
+                      MiniApp Audit Review
+                    
6.4 
+                      Domain check
+                    
7. MiniApp Standardization in the Globe7.1 Broader Web Community Discussions on MiniApp
7.2 MiniApp in CJK
7.3 MiniApps in Europe
8. Way Forward in W3C
9. Glossary
A. 
+        Gap Analysis
+      
B. 
+        Acknowledgments
+      
C. ReferencesC.1 Informative references
 
-    
-        Introduction
-        
-            Problems
-            Native Apps are well received in our daily life, but there are still many things that can be done better for users.
+    1. Introduction

+        
+        1.1 Problems

+            
+            Native apps are well received in our daily life, but there are still many things that can be done better for users.
             
                 
-                    Before a user get the service from a native app, he/she often has to go through the process to download -> install -> register the app.
-                    User can only keep a limited number of Native Apps on their phone due to constraint of storage capability.
-                    It's not easy to share data between different Native apps.
+                    Before users get the service from a native app, they often have to go through the process of downloading -> installing -> registering the app.
+                    Users can only keep a limited number of native apps on their phones due to the constraints of storage capability.
+                    It's not easy to share data between different native apps.
                 
                 
-                    To work on a Native App, developers may need to learn a few new programming languages.
-                    To provide the same service with Native Apps, developers may need to maintain duplicate products for different platforms.
+                    To work on a native app, developers may need to learn a few new programming languages.
+                    To provide the same service as native apps, developers may need to maintain duplicate products for different platforms.
                 
             
-            The Web is an ideal platform to avoid these problems, but by far, it's still imperfect.
+            The Web is an ideal platform to avoid these problems, but it's still imperfect by far.
             
                 
-                    Compared to the Native, it isn't easy to take advantage of the capabilities provided by the system. 
-                    Also, it's usually difficult to design a Web application whose performance can actually match or surpass a similar Native app.
+                    Compared to the native, it isn't easy to take advantage of the capabilities provided by the system. 
+                    Also, it's usually difficult to design a Web application whose performance can actually match or surpass a similar native app.
                 
                 
-                    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 accounts, login status and user interaction across the whole system.
-                    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.
+                    On a mobile device, users frequently obtain services or contents outside the browser; naturally, they would like all their applications to be consistent on user accounts, login status, and user interaction across the whole system.
+                    Moreover, sometimes users may want to share some data with an application if they really trust it. Still, for a few frequently requested information, such as the 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.
                 
             
         
-        
-            What is MiniApp?
-                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.
-                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.
+        1.2 What is MiniApp?

+            
+                MiniApp is a new mobile application format, a hybrid solution that relies on Web technologies (especially CSS and JavaScript) and integrates with the capabilities of native apps.
+                A super app is a software platform that hosts and supports other applications (i.e., MiniApps), enabling their execution by using the platform's resources.
+                MiniApps got popular from their usage on a few super apps, as it was born with a few characters that helped fill the gap between the Web and the native.
                 
                     It's free of installation.
-                    Multiple webviews to improve performance.
-                    It provides a few mechanisms to get access to OS capabilities or data through the Native.
+                    Multiple WebViews to improve performance.
+                    It provides a few mechanisms to access OS capabilities or data through the native.
                     The content is usually more trustworthy because the app needs to be validated by the platform.
-                    A miniapp can be distributed to multiple MiniApp platforms (the Web, a Native App, even the OS). These platforms also provide entry to the miniapp to ensure it can be easily discovered by the users.
+                    A MiniApp can be distributed to multiple MiniApp platforms (the Web, a native app, even the OS). These platforms also provide entry to the MiniApp to ensure the users can easily discover it.
                 
             
-            
-                Can we just use PWA?
-                MiniApps are NOT aimed to replace PWA, or the Web, or the Native.
-                
-                    Goal
-                        
-                            PWA
-                            Progressive Web Apps provide user experience that feels like the Native apps, especially with better support for offline and push APIs.
-                            MiniApp
-                            MiniApps try to provide seamless service by sharing data and capabilities within the Native Apps, the Web and the OS.
-                        
-                    
-                    Host Environment
-                        
-                            PWA
-                            The browser.
-                            MiniApp
-                            A platform with extra capabilities, compared to the Native Apps, the Web and the OS. It's easier to implement new APIs on this platform.
-                        
-                    
-                
+            1.3 Gap between MiniApps and PWA

+                
+                MiniApps are not aimed to replace Progressive Web Applications (PWA), native apps, or the Web.
+                In broad terms, one of the significant differences between these technologies is the execution environment. PWA may run in almost any web-enabled environment in a browser, while MiniApps are bound to specific platforms or super apps. Another essential difference is the distribution mechanisms, with MiniApps packed and self-contained and the PWA's resources distributed across the Web.               
+                Both technologies use similar programming and markup languages and CSS-based stylesheets in terms of coding. MiniApps implements dedicated domain-specific languages based on HTML subsets and specific mechanisms for data binding and event management, following the MVVM paradigm with Virtual DOM management. MiniApp vendors define similar UI (User Interface) elements that do not always have a direct equivalent in HTML.
+                In terms of services, PWA and MiniApp developers have access to APIs with the same purpose and equivalent features but do not follow the exact specifications.
+                MiniApp vendors define exclusive APIs oriented to the app release and distribution management through their channels. Other dedicated APIs are tied to concrete scenarios and the running platform -e.g., services to set up reminders using the device's native alarm and calendar features, perform phone calls and trigger performance warnings. Although both technologies have similar APIs and services, there is a significant gap between the API specifications in each application type. PWAs rely on standard Web APIs, while MiniApps implement non-standard APIs to maximize the platform's capabilities, such as device-specific features and vendor-exclusive services.
+                Depending on the implementation, a MiniApp user agent could be an operating system, a super app, or any other hosting platform based on different and various rendering engines and WebViews. The architecture of a MiniApp user agent differs from PWA user agents, as we can see in the following picture.
+
+                
+                  
+                  Figure 1 
+                    The architecture of MiniApps and PWA
+                  
+                
+
+                
+                  The comparison table in the annex identifies and highlights the differences between Progressive Web Applications (PWA) and various MiniApp implementations. Some of these differences are summarized in the following table.
+                
+
+                
+                  
+                    
+                      
+                      
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                  
+                  Feature Progressive Web App MiniApp
Source code Standard markup languages (HTML), stylesheets (CSS), and scripts (JavaScript). Non-standard dialects of HTML, CSS and JavaScript
Deployed Format Web resources (mainly: HTML, CSS, JavaScript code, and WebAssembly modules) HTML, CSS, JavaScript, and other resources packed in a ZIP container. 
Packaging No. Resources linked on the Web. Yes. Different package formats per vendor.
Needs to host files on Web server Yes No
Installation-free usage Yes, running in the browser. Running in a super app or on the OS.
Installation with standalone icon From the browser or app marketplace (optional) No
Services Access to Web APIs Access to non-standard Web APIs, including some system native APIs
             
-            
-                Case studies
-                
-                    Case 1: Shared Bicycle Service
-                    The popularization of MiniApps helps to make the shared bike a seamless service instead of a cumbersome application.
+            1.4 Case studies

+                
+                1.4.1 Case 1: Shared Bicycle Service

+                    
+                    The popularization of MiniApps helps make the shared bike a seamless service instead of a cumbersome application.
                     
                     
-                        User chooses any of the miniapp platforms on their mobile device, which, is usually a super-app that he/she already logined;
-                        User scans the QR-code label attached on a shared bicycle within the superapp;
-                        The hosted-app will automatically navigate to the shared bicycle miniapp and unlocks the bicycle instantly;
-                        Upon arrival, user locks the bike on the miniapp;
-                        Transaction completes, a message of the payment detail is sent to the user.
+                        A user chooses any of the MiniApp platforms on their mobile device, which is usually a super app that they already logged in to;
+                        A user scans the QR-code label attached to a shared bicycle within the super app;
+                        The hosted app will automatically navigate to the shared bicycle MiniApp and unlocks the bicycle instantly;
+                        Upon arrival, the user locks the bike on the MiniApp;
+                        The transaction completes, and a message of the payment detail is sent to the user.
                     
-                    
+                    
                       
-                      
+                      Figure 2 
                         Shared Bicycle Service with MiniApp
-                      
+                      
                     
                     
-                    For users, miniapps can bring convenient from a few perspectives:
+                    For users, MiniApps can bring convenience from a few perspectives:
                     
-                         
-                        
+                         
+                        
-                        
+                        
-                        
+                        
-                        
+                        
@@ -231,361 +543,524 @@ Case 1: Shared Bicycle Service
-                        
+                        
                       
                         the Web Native App The Web Native app
                         MiniApp 
                       
                       Download/Install Download/install
                         No 
                         Yes
                         No 
                       
                       Verified/Trusted Verified/trusted
                         No 
                         Yes
                         Yes
                       
                       Login/Register Login/register
                         Yes 
                         Yes
                         User permission
                         Payment
                         Send a payment request 
                         Register a credit card or navigate to another app Complete within the hosted-app Complete within the hosted app
                       
                     
 
                 
 
-                
-                    Case 2: AR Zoo
-                    MiniApp developers can simply use HTML/CSS/JavaScript as the programming language, but MiniApp is more flexible so it excels at quick development of complex features in daily work.
-                    This MiniApp tries to build an AR zoo with AI technologies to recognise the animals. Developers can easily do that by adding 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.
-                    MiniApps can be discovered by the search engines, by the MiniApp store in the hosted-app or by QR-code.
-                    

+                1.4.2 Case 2: AR Zoo

+                    
+                    MiniApp developers can simply use HTML/CSS/JavaScript as the programming language, but MiniApp is more flexible, so it excels at quickly developing complex features in daily work.
+                    This MiniApp tries to build an AR zoo with AI technologies to recognize the animals. Developers can easily do that by adding a few components or APIs that provide access to the native capabilities or advanced features (e.g., image recognition, AR 3D animal-model rendering, a speech API for speech synthesis, and AR navigation provided by the map SDK).
+                    MiniApps can be discovered by search engines, MiniApp stores in the hosted app, or QR codes.
+                    

                       
-                      
+                      Figure 3 
                         AR Zoo MiniApp
-                      
+                      
                     
-                    For the developers, the incentive to work on miniapps is very obvious.
+                    For the developers, the incentive to work on MiniApps is very obvious.
                     
-                         
-                        
+                         
+                        
-                         
-                        
-                         
+                         
+                        
+                         
-                        
-                        
+                        
+                        
-                         
-                        
-                        
+                         
+                        
+                         
-                        
+                        
-                         
-                        
-                        
+                         
+                        
+                        
                       
                         the Web Native App The Web Native app
                         MiniApp 
                       
                       
                         Discoverability Search Engine App Store Multiple: search engines + MiniApp store in the hosted-apps + QR-code Search engine Marketplace Multiple: search engines + MiniApp store in the hosted apps + QR code 
                       
                       
                         Verified/Trusted
                         Still exploring by Native App stores by host App platforms By native app marketplaces By host app platforms
                       
                       
                         Deploy/Reload load/reload the webpage installed/reinstalled load/reload as it's using a JS engine Load/reload the webpage Installed/reinstalled Load/reload as it's using a JavaScript engine
                       
                       
                         Programming Language
                         Web programming language new/multi languages: iOS and Android at least New/multi languages: iOS and Android, at least
                         Web programming language
                       
                       
                         APIs/Components (AR, Image Recognition, Geolocation, Speech API) very basic complex for web developers very simple high-level APIs and components Very basic Complex for Web developers Very simple high-level APIs and components
                       
                     
                 
 
-                
-                    Case 3: MiniApp for IoT
-                    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.
-                    Nowadays, it's possible to convert some MiniApps to adapt the vehicle screen and system, also, a few MiniApp vendors have built a MiniApp platform specially design for the vehicle system, to help distribute or upgrade applications to various of car model. This brings millions of Web developers to the Automotive application ecosystem.
-                    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".
-                    
+                1.4.3 Case 3: MiniApp for Vehicle

+                    
+                    One of the goals of MiniApp is to connect information and services across different platforms, so it's ideal for IoT applications such as Smart Automotive, voice-control speakers, and Smart TV.
+                    Nowadays, it's possible to convert some MiniApps to adapt the vehicle screen and system. Also, a few MiniApp vendors have built a MiniApp platform specially designed for the vehicle system to help distribute or upgrade applications to various car models. This brings millions of Web developers to the automotive application ecosystem.
+                    These automotive MiniApps can support 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 a gas pumping MiniApp to the owner. 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".
+                    
                       
-                      
-                        MiniApp for Smart Car(Gas Pumping App)
-                      
+                      Figure 4 
+                        MiniApp for smart car (gas pumping app)
+                      
                     
             
+
+            1.4.4 Case 4: MiniApp for IoT

+              
+              IoT device is becoming another carrier running MiniApps. MiniApp for IoT intends to enable interoperability across multiple IoT device platforms and operating systems. Rather than dealing with the difference across the multiple IoT device platforms and IoT operating systems, by introducing MiniApps for IoT, developers only need to focus on the application development on IoT devices.
+
+              One example is the HVAC (heating, ventilating, and air-conditioning)
+                application switch panel, which has a screen and several physical buttons. In this case, by introducing MiniApp for IoT, the switch panel’s screen UI can be designed and developed using Web technologies to display the HVAC information. For example, the target temperature value inputted by the physical and the measured real-time temperature value can be displayed.
+              
+                
+                Figure 5 
+                  IoT MiniApp running on HVAC application switch panel having a screen and several physical buttons
+                
+              
+
+              
+                Another example is smart speakers with a touch screen. In this case, by introducing MiniApp for IoT, the smart speaker’s touch screen UI can be designed and developed using Web technologies to play music and video, control the IoT devices at home, and shop online.
+              
+
+              
+                
+                Figure 6 
+                  IoT MiniApp running on a smart speaker with a touch screen
+                
+              
+      
+
+      1.4.5 Case 5: MiniApp for TV

+        
+        Unlike MiniApps running on mobile phones, where user interaction depends on the touch screen, the user interaction of MiniApps running on TV switches to the TV remote panel keyboard plus TV screen focus.
+        
+
+        With MiniApp for TV, users can buy merchandise on TV through E-commerce MiniApp.
+        
+          
+          Figure 7 
+            E-commerce MiniApp running on TV
+          
+        
+
+        
+          And also, users can play games on TV through Gaming MiniApps.
+        
+
+        
+          
+          Figure 8 
+            Gaming MiniApp running on TV
+          
+        
+        
+
             
         
-            
-                MiniApp Overview
-                
-                    Core Features
-                    
-                        Separate the View Layer from the Logic Layer
-                        In a miniapp, the view layer is usually separated from the logic layer.
-                        
-                          
-                          
-                            General Architecture of MiniApp
-                          
+            2. MiniApp Overview

+                
+                2.1 Core Features

+                    
+                    2.1.1 Separate the view layer from the logic layer

+                        
+                        In a MiniApp, the view layer is usually separated from the logic layer.
+                        
+                          
+                          Figure 9 
+                            General architecture of MiniApps
+                          
                         
-                        The View Layer is responsible for rendering MiniApp pages, including Web components rendering and native components rendering, which can be considered as hybrid rendering. For example, Web components rendering can be handled by WebView, but some of the Web components rendering aren't supported by WebView or have performance limitation, MiniApp also relies on some native components, such as map, video, etc.
-                        Logic Layer is implemented with JS Worker. The Worker is responsible for MiniApp’s event processing, API calling and lifecycle management.
-                        Extended native capabilities usually come from the hosting Native App or OS, including payment, file processing, scanning, phone call, etc. These capabilities are called through certain APIs. When a Mini App 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.
-                        
+                        The view layer is responsible for rendering MiniApp pages, including Web components and native components display, which can be considered hybrid rendering. For example, some Web components might not be supported by the WebView or have performance limitations, so MiniApp also relies on native components such as map, video, etc.
+                        The logic layer is implemented with JavaScript Workers. A worker is responsible for MiniApp’s event processing, API calls, and lifecycle management.
+                        Extended native capabilities usually come from the hosting native app or OS, including payment, file processing, image scanning, phone calls, etc. These features are called through specific APIs. When a MiniApp calls a native API, it transfers the API call to extended native capabilities for further processing via a JavaScript Bridge. It obtains the result from the extended native capabilities via the JavaScript Bridge.
+                        
                           
-                          
+                          Figure 10 
                             Data flow of MiniApp when an API is called
-                          
+                          
                         
-                        Worker establishes connection for each Render, transferring the need-to-be-rendered data to render for further processing.
-                        If an event is triggered by a component in a MiniApp page, this page’s Render will send the event to worker for further processing. At the same time, the Render will wait for the data sent from worker to re-render the MiniApp page.
-                        The rendering can be considered as stateless, and all the states will be stored in the worker.
-                        The benefits of separating the View Layer and the Logic Layer include:
+                        The worker establishes a connection for each Render, transferring the need-to-be-rendered data to the Render for further processing.
+                        If an event is triggered by a component in a MiniApp page, this page’s Render will send the event to the worker for further processing. At the same time, the Render will wait for the data sent from the worker to re-render the MiniApp page.
+                        The rendering can be considered stateless, and all the states will be stored in the worker.
+                        The benefits of separating the view layer and the logic layer include:
                         
                             Very handy for data sharing and interaction among multiple MiniApp pages.
-                            Having the same context within a lifecycle of MiniApp can provide a similar coding experience for those developers coming from native app developement background.
-                            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.
+                            Having the same context within the lifecycle of MiniApp can provide a similar coding experience for those developers coming from native app development background.
+                            Separation and parallel implementation of render and JavaScript worker can prevent the situation where a JavaScript execution impacts or slows down the page rendering, which can help enhance the rendering performance.
                         
                     
-                    
-                        Rich APIs and Components
-                        MiniApp platform provides many components to help developers build a fancy UI, including basic components like View, Form, Image, and high-level component like Maps.
-                        MiniApp venders also offer a number of APIs for developers to get access to capabilities of both the Web and the native, including basic APIs such as UI display APIs, Image API, and those advanced ones like Account API, Map API, Payment API.
-                        APIs usually work together with components. When user clicks certain component on a MiniApp page, it will call the related API to complete user’s interaction and refresh the current MiniApp page if needed.
+                    2.1.2 Rich APIs and Components

+                        
+                        MiniApp platform provides many components to help developers build a fancy UI, including essential components like view, form, image, and high-level components like maps.
+                        MiniApp vendors also offer many APIs for developers to access both the Web and the native capabilities, including basic interfaces such as UI display APIs, image processing API, and those advanced ones like user account API, map API, and payment API.
+                        APIs usually work together with components. When a user clicks a certain component on a MiniApp page, it will call the related API to complete the user’s interaction and refresh the current MiniApp page if needed.
                     
-                    
-                        MiniApp Constructor
-                        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 already exist on users' machines. These resources are always available without any redundant downloads until next update.
-                        A MiniApp package is a compressed format (e.g. zip) archive, including:
+                    2.1.3 MiniApp Constructor

+                        
+                        In order to obtain similar user experiences as in native apps, MiniApp resources are usually packaged together. After downloading and installing a MiniApp package, all the static resources (i.e., page templates, CSS, JavaScript files, and other documents) required by the MiniApp persist on the users' devices. These resources are always available without any redundant downloads until the next update.
+                        A MiniApp package is a compressed ZIP archive, including:
                             
-                                one configuration document, located at the root directory of the package. The config file should include:
+                                
A configuration document located in the root directory of the package. The config file should include:
                                     
-                                        general description of the entire MiniApp.
-                                        description of pages and their corresponding paths, for the purpose of page locating and opening.
+                                        the general description of the entire MiniApp; and
+                                        the description of the pages, including their corresponding paths and configuration, for page setup and opening.
                                     
-                                    one app-level logic file, containing JavaScript codes, deals with app-level lifecycle callbacks.
-                                    one or multi page files, containing templates codes for page structure, CSS codes for page style, and JavaScript codes for page logic.
-                                    support digital signature for validation.
+                                    One app-level logic file containing a script to deal with app-level lifecycle callbacks.
+                                    One or several files, containing templates code for page structure, CSS stylesheets for page styling, and JavaScript codes for the page logic.
+                                    Digital signature support for integrity validation.
                             
-                            For the purpose of locating a specific 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.
+                            For the purpose of locating a specific MiniApp while searching and executing, a MiniApp must have a package name or an identifier on the platform. An icon is also required for user recognition.
                     
-                    
-                        MiniApp Widgets
-                        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.
-                        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.
-                        
-                          
-                          
-                            Widget from home screen to MiniApp
-                          
+                    2.1.4 MiniApp Widgets

+                        
+                        In addition to MiniApp pages, MiniApps can also be displayed as information fragments or MiniApp widgets. In this form, developers can put their service and/or content to various host scenarios, called host environments (e.g., assistants, global search of the device, etc.). This feature connects the services and content of the MiniApp with the concrete scenario, providing users with more convenience.
+                        For example, when a user purchases a train ticket for a trip, the MiniApp widget on the 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.
+                        
+                          
+                          Figure 11 
+                            Widget from the home screen to a MiniApp
+                          
                         
-                        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.
+                        Like in a MiniApp page, a widget is also described by URI scheme. The host environment specifies the MiniApp package and the corresponding widget to be loaded through its URI path and passes data to the widget through URI query parameters. 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.
 
-                        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.
+                        In many scenarios, a widget can open a MiniApp page for more complicated operations. In such cases, widgets often need to share data with their 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 words, the MiniApp widget and the page have same data access rights.
 
-                        
+                        
                           
-                          
+                          Figure 12 
                             MiniApp widget interaction
-                          
+                          
                         
 
-                        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.
+                        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 in different scenarios, such as text keywords, voice analysis, picture recognition, scan code, and event intent.
                         Note: Widget is implemented by Quick App in China market.
                     
-                    
-                        Single-Instance, Multi-Entries
-                        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.
-                        The entries for MiniApps include, but not limit to:
+                    2.1.5 Single-Instance, Multi-Entries

+                        
+                        There are multiple entrances to discover, open and access MiniApps. Unlike the Web content in multi WebViews, 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 to a MiniApp through the entrance of a QR code for the first time, the user will remain logged in the next time when the user returns from another entry like a MiniApp store.
+                        The entries for MiniApps include, but are not limited to:
                         
-                            MiniApp store
-                            Search Engine
-                            Smart Assistant
+                            MiniApp marketplace
+                            Search engine
+                            Smart assistant
                             QR code
                             SMS/text
-                            Physical Object(with AI)
+                            Physical object (with AI)
                             Browser
-                            Calender items
-                            Voice message(with AI)
+                            Calendar items
+                            Voice message (with AI)
                           
                     
-                    
-                        Performance and User Experience
+                    2.1.6 Performance and User Experience

+                        
                         MiniApps try to improve their performance and user experience with a few mechanisms that have been proved to be effective through practice.
-                        
                            
+                        
                            
                                 Packaging
-                                With MiniApp's constructor, 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.
-                                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.
+                                
With MiniApp's constructor, a user only needs to download the package when the MiniApp is first opened, and then the static resources (e.g, pages, scripts, and CSS) in the MiniApp needn't be downloaded again, so that the loading and jumping of the following pages are more efficient. This feature improves user experience and saves network traffic.
+                                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 opening first time.
                             
                                 Multiple Rendering Views
-                            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.
-                                Because 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.
+                            
The MiniApp uses native page stack management between render views, and the page switching is driven by native code. Therefore, the gesture operation in the page, the switching between pages can achieve the exact same smooth experience as native.
+                                Because of the isolation of the view and logic layers, the view layer can be rendered independently. Without being blocked by JavaScript logic code, the rendering speed of the page can be greatly improved.
                             
                                 Pre-built and reuse of runtime environments
                             
-                                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.
+                                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, and then we will continue to pre-build 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 exits, the runtime is destroyed, and the application environment and resources can be reused.
                             
                                 Pre-defined Component and API
                             
-                                MiniApp platforms provides very rich components and APIs, these components and APIs are usually well designed and able to help ensure the performance of the general work from developers.
+                                MiniApp platforms provide very rich components and APIs. These components and APIs are usually well designed to meet the developers' performance requirements.
                             
                                 JavaScript framework presets and hot reload
                             
-                                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 possibilities to improve performance.
+                                MiniApp's runtime environment contains two major parts, the basic capabilities provided by native code and a framework, including 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 the MiniApp. The JavaScript framework can be hot reloaded (reload during usage), which brings lots of possibilities to improve performance.
                             
                         
                     
+
+                    2.1.7 Login

+                      
+                      
+                        The MiniApp platforms provide a variety of ways for a user to log in to the MiniApp. If the user has already logged in to the platform with identity authentication, the login information of the platform can be shared with MiniApp, quickly realizing the interoperability of MiniApp’s own account system and the platform account system, which makes the access process of the MiniApp more smooth.
+                      
+                      
+                        For example, the traditional login process with SMS verification is more time-consuming; users need to manually enter their cell phone number first and then enter the verification code after receiving the SMS to log in. The advantage of MiniApp is that developers can use the components / APIs provided by the platform to obtain users' cell phone numbers securely and conveniently, prompting the user to authorize a one-click login process with their cell phone numbers, which makes the entire process simple for the user and reduces the cost of obtaining user information for developers.
+                      
+                      
+                        
+                        Figure 13 
+                          Sign in to a MiniApp
+                        
+                      
+                  
+
+                  2.1.8 Subpackaging

+                    
+MiniApp subpackaging is a build mechanism for improving the MiniApp package development process. It helps developers divide different business modules into different subpackages.
+For developers: a MiniApp has the main package by default; it contains the startup page files and public resources. Subpackage is a building type that flexibly divides the developer's business modules. Users can open special pages after loading different sub-packages on demand.
+For users: when the user starts the MiniApp, the main package will be downloaded by default, and the page in the main package will be launched. If the user needs to open a page in the subpackage, the MiniApp Runtime will start to download and load the subpackage and start the subpackage page.
+Through such a subpackage building mechanism is better to decouple and collaborate when multiple teams develop together. When users use the MiniApps, the subpackaging mechanism can improve the loading speed of the MiniApp homepage, load subpackages on demand, and optimize the user experience.
+                
+
+                2.1.9 Add-ons
+                  

+                  
+                  In a MiniApp, an add-on/extension is an encapsulated module that adds a specific feature to an existing MiniApp, and it could be a component, a JavaScript module, or a page. The add-on/extension can only be executed in a MiniApp instead of running separately. Developers can develop an add-on/extension just like a MiniApp, and upload it to the MiniApp platform for other MiniApps to reuse.
+                  MiniApp supports add-on/extensions to:
+                  
+                  reduce development costs by code reuse and help developers easily add new features
+                  update functionality automatically without the awareness of developers
+                  reduce the package size of MiniApps by not loading unused functions
+                  
+                  The add-on/extension mechanism lowers the barriers to developing MiniApps and brings more developers to the MiniApp ecosystem.
+              
                 
-                
-                    MiniApp Market
+                2.2 MiniApp Market

+                    
                     This section describes a few current mainstream MiniApp or relevant platforms.
                     
                         Alipay Mini Program
                         
-                            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.
-                            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.
+                            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 like CSS and JavaScript. Meanwhile, it integrates the functionalities of Alipay native app as payment, credit service, face authentication, etc.
+                            More than 1 million Mini Programs are running on Alipay native app, with 230 million DAU (Daily Active User). The user scenarios include retail, transportation, medical services, etc.
                         
                         Baidu Smart Mini Program
                         
-                            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.
-                            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.
+                            Baidu Smart Mini Program refers to an open ecological product that intelligently connects people to information and services based on the Baidu app and other partners’ platforms. Through Baidu’s AI abilities and understanding of all contents in Smart Mini Programs, Baidu accurately connects users and Smart Mini Programs. With Baidu’s search and information flow dual engine, users can achieve an app-like experience within Smart Mini Programs. As of July 2019, there are over 150,000 Smart Mini Programs and 270 million MAU.
+                            Baidu Smart Mini Program is open-sourced within our open source alliance, with more than 30 cooperators, covering super apps, mobile OS, car OS, voice-control speakers, and TV.
                         
-                        Quick Apps (Quick App Alliance including Xiaomi and Huawei)
+                        Quick Apps (Quick App Alliance, including Xiaomi and Huawei)
                         
-                            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.
-                            Quick Apps can run in two forms: Quick App page form like native app page and a widget form that presents information in the scene. The two are adapted to different user needs, connecting the system and the MiniApp into a whole in multiple forms.
+                            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 into 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.
+                            Quick Apps can run in two forms: Quick App page form, like native app page, and a widget form that presents information in the scene. The two are adapted to different user needs, connecting the system and the MiniApp into a whole in multiple scenarios.
                         
                         360 PC MiniApp
                         
-                            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 traditional webpages, it's served with more functionalities and easier interaction with the PC operation system.
-                            PC miniapps are only available to those validated as an enterprise account, most of the features are under tough regulations, so that they can be considered as highly trusted web contents.
+                            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 traditional webpages, it's served with more functionalities and easier interaction with the PC operating system.
+                            PC MiniApps are only available to those validated as an enterprise account. Most of the features are under strict regulations so that they can be considered highly trusted Web content.
                         
                         PWAs
                         
-                            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 / launcher / 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).
+                            PWAs are the latest term to summarize modern Web applications. As a counterpart of native apps, a PWA looks and feels like a native app and can be installed on the device home screen/launcher/start menu; it can send push notifications to re-engage users; it can be used when offline and behaves under poor network conditions; it works with devices of wide-ranging capabilities, and it's still evolving to works with new capabilities defined by open Web standards; payments can be made by user inside PWAs apps; and PWAs apps are search-engine-friendly, working perfectly with hyperlinks. PWAs are successful in technical and business aspects (widely adopted by many websites, especially in consumer-facing ones).
                         
                     
                  
         
-        
-            Working with the Web
+        3. Working with the Web

+            
             This section selects some typical use cases and proposes a few APIs that MiniApps would like to have support from the Web.
-            
-                Application Lifecycle
-            
-                Hybrid Rendering
-                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.
-                
-                    
-                    
-                        Rendering results coming from both the Web and the Native
-                    
+            3.1 Application Lifecycle

+                
+            3.1.1 Hybrid Rendering

+                
+                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 the native.
+                
+                    
+                    Figure 14 
+                        Rendering results coming from both the Web and the native
+                    
                 
-                Proposal: Mini App needs a standardized API to help integrate the native rendering result into Web rendering result.
+                Proposal: MiniApp needs a standardized API to help integrate the native rendering result into the Web rendering outcome.
             
-            
-            Transition Animation
-                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.
-                Proposal: Mini App needs an API to call add transition animation during MiniApp page switching.
+            3.1.2 Transition Animation

+            
+                MiniApp would like to provide transition animation during page switching so that users can have a similar experience as when they are using a native app, but it's almost impossible to do that now.
+                Proposal: MiniApp needs an API to add transition animations during MiniApp page switching.
             
-            
-            Standardise the Package Constructor of MiniApp
+            3.1.3 Standardise the Package Constructor of MiniApp

+            
                 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.
                 Proposal: 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.
             
-            
-            Standardise the navigation to a MiniApp page
+            3.1.4 Standardise the navigation to a MiniApp page

+            
                 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.
                 Proposal: Define a standardized protocol (URI scheme) to access MiniApp.
             
-            
-            MiniApp Widgets
-                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 an environment outside of web browsers, such as desktop or dashboard.
+            3.1.5 MiniApp Widgets

+            
+                Like Android widgets or Apple dashboard, users can directly get information and/or finish their task with a MiniApp widget without opening any Web or app pages. A MiniApp widget can be displayed in an environment outside of Web browsers, such as on desktops or dashboards.
                 Proposal:
                     
-                        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 corresponding URI path, which describes a package and widget page.
-                        A MiniApp widget can access local data or data from server.  Meanwhile, a MiniApp widget can communicate with MiniApp in the same package.
-                        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.
+                        A MiniApp widget can be displayed within a host environment, either a WebView or a native app page. The host environment loads a widget with its corresponding URI path, which describes a package and widget page.
+                        A MiniApp widget can access local data or data from a server.  Meanwhile, a MiniApp widget can communicate with MiniApp in the same package.
+                        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.
                     
             
             
 
-            
-                Performance and Tuning
-            
-                Define an event of time to interactive in MiniApp
+            3.2 Performance and Tuning

+                
+            3.2.1 Define an event for "time to interactive" in MiniApp

+                
                 MiniApp needs to know when the MiniApp page Time to Interactive (TTI) has been completed.
                 Proposal: A standardized event to notify that the MiniApp page Time to Interactive has been completed.
             
         
 
-        
-                Graphics and Media
-            
-                3D Model Element
-                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, the current web lacks 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:
+        3.3 Graphics and Media

+                
+            3.3.1 3D Model Element

+                
+                3D models have become more and more popular thanks to their rich details. Combined with AR, they will provide a better user experience than 2D. The business cases might include online shopping, advertisement, education, etc. However, the current Web lacks a standard and convenient way to deal with 3D models. In this document, we propose to define an HTML tag to directly handle 3D models, similar to the way we handle audio, video, and image with corresponding HTML tags:
                     
                         360 view
-                            User can view a 3D model from 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.
+                            Users can view a 3D model from different angles via gestures. And the 3D model can be zoomed in/out as well. It can be viewed on full screen or embedded in an webpage, shown together w/ other HTML contents.
                         
                         View with AR
-                            User can place the 3D model in the real world environment with camera.  User can specify different locations to place the model.
+                            Users can place the 3D model in the real world with the camera. Users can specify different locations to place the model.
                         
                     
-                Proposal: A <xmodel> Element to specify a 3D model on the web and to power interactive 3D contents with AR.
+                Proposal: A <xmodel> element to specify a 3D model on the Web and power interactive 3D contents with AR.
             
 
-            
-                Face Tracking
+            3.3.2 Face Tracking

+                
                 Face tracking can be used in many 3D scenarios.
                 
                         Face Effects in Live Video
                         
-                            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.
+                            Add effects on the face in live video. These effects include a full-screen filter, face reshape and makeup, 2D sticker, 3D headdress, etc. Most of these effects depend heavily on real-time face tracking from a video source.
                         
                         Gaming
                         
-                            Game developers can design game strategies based on the tracked face. Like triggering a specific game logic when the eye is blinked, or check if the dropping fruit is in the opened mouth.
+                            Game developers can design game strategies based on the tracked face, like triggering a specific game logic when the eye blinks or checking if the dropping fruit is in the opened mouth.
                           
                         Virtual Makeup
                         
-                          Let users try lipsticks, eye shadows, glasses, hats on the product page to help them make the decision.
+                          Let users try lipsticks, eye shadows, glasses, and hats on the product page to help them decide.
                         
                 
Proposal: A Face Tracking API use a video element as input and updates face tracking output every frame, which includes:
-                    

+                    

                         Bounding box of each face
                         
                         4x4 pose matrix of each face
                         
                         Normalized (x, y) landmarks points
                         
-                        ace geometry data including vertices, normals, texture coordinates
+                        
Face geometry data including vertices, normals, texture coordinates
                         
                     
             
 
-            
-                Hand gestures tracking and recognition
-                Hand gestures can be used in video effect and AR/VR games scenario which can make apps more impressive and interactive.
-                Proposal: A high-level API to track hands movement, get hands outline.
+            3.3.3 Hand gestures tracking and recognition

+                
+                Hand gestures can be used in video effects and AR/VR game scenarios to make apps more impressive and interactive.
+                Proposal: A high-level API to track hand movement and get the hands outline.
             
 
-            
-              Low level AR APIs based on ARCore and ARKit
-              There are a few AR APIs in MiniApps we would migrate to the Web, as they help to provide better AR experience in gaming, 3d model preview, interactive ads.
-              Proposal: Provide low-level AR APIs based on ARCore and ARKit, which includes:
+            3.3.4 Low level AR APIs based on ARCore and ARKit

+              
+              There are a few AR APIs in MiniApps we would migrate to the Web, as they help provide a better AR experience in gaming, 3D model preview, and interactive ads.
+              Proposal: Provide low-level AR APIs based on ARCore and ARKit, which include:
               
               Camera view matrix for world tracking
-              Provide 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.
+              Provide 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.
               Plane detection and tracking
-              Detect planes in the real world and track these planes in real-time. Provide the 4x4 transform matrix which represents the center position and orientation of each plane. It can be used for placing 3D virtual object on the ground/desktop.
+              Detect planes in the real world and track these planes in real-time. Provide the 4x4 transform matrix, which represents the center position and orientation of each plane. It can be used for placing 3D virtual objects on the ground/desktop.
               Anchor
-              Anchor defines a fixed position and orientation in the real world. Developers can create an anchor from a 4x4 transform matrix, which can be got 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.
+              Anchor defines a fixed position and orientation in the real-world. Developers can create an anchor from a 4x4 transform matrix, which can be got 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.
               Hit test
               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.
               
-                
+                
                     
-                    
+                    Figure 15 
                         APIs to better support AR
-                    
+                    
                 
             
         
         
 
-        
-                Security and Privacy Consideration
-                MiniApp utilizes HTTPs to support secure connection. Multiple MiniApps within same host environment are independent with each other.
-                User interactions within MiniApp needs different level of user permissions:
+        
4. Current standards work; the WG work

+          
+          4.1 Lifecycle

+            
+            [MINIAPP-LIFECYCLE] defines the MiniApp lifecycle events and the process of managing MiniApp and each page's lifecycle. Implementing this specification enables the user agent to manage the lifecycle events of both the global application lifecycle and the page lifecycle.
+
+            As described in 2.1.1 Separate the view layer from the logic layer, in a MiniApp, the view layer is separated from the logic layer. The view layer is responsible for rendering MiniApp pages, including Web rendering and native rendering, which can be considered hybrid rendering. The logic layer is implemented with JavaScript Worker. The logic layer is responsible for MiniApp’s event processing, API calls, and lifecycle management.
+
+            MiniApp lifecycle mechanism provides a means to manage MiniApp's view layer and logic layer through the MiniApp global application lifecycle events and MiniApp page lifecycle events. Developing MiniApp with knowledge of the MiniApp global application lifecycle states and MiniApp page lifecycle states can lead to improved user experiences. MiniApp lifecycle includes a set of events, with which MiniApp can choose to alter its behavior based on its state.
+          
+
+          4.2 Manifest

+            
+            [MINIAPP-MANIFEST] is the specification that defines the set of metadata to describe MiniApps. The MiniApp Manifest extends the [APPMANIFEST] and the [MANIFEST-APP-INFO] specifications by providing additional mechanisms to set up basic information of a MiniApp, like identification, human-readable descriptions, versioning data, and styling information. The MiniApp manifest also configures the routing of the pages and widgets that are part of a MiniApp. 
+            
+
+            A MiniApp manifest is a JSON document that uses some basic elements of the Web App Manifest to describe a MiniApp (name, short_name, description, and icons), adding nine supplementary members to specify technical details about the MiniApp (app_id, version, platform_version, device_type, pages, req_permissions, and widgets) and configure the look and feel of the app (color_scheme and window).
+            
+          
+
+          4.3 Packaging

+            
+            [MINIAPP-PACKAGING] defines the semantics and conformance requirements for a MiniApp package and the structure of the container that holds the resources of a MiniApp, including the page components (i.e., templates, stylesheets, and JavaScript logic), the manifest, and other media files or configuration resources.
+            
+
+            This specification determines the logic and physical structures of MiniApps, holding the requirements in terms of file system organization and processing of the ZIP-based container that packs a MiniApp. Instances of the MiniApp package facilitate the MiniApp distribution and execution in runtime environments or MiniApp user agents.
+            
+          
+
+          4.4 Addressing

+            
+            [MINIAPP-ADDRESSING] is a Note that defines a standard MiniApp protocol for accessing MiniApps. It aims to solve the problem that currently, each MiniApp vendor has its own way of describing a MiniApp resource and uses very different methods to obtain the MiniApp package, which makes it very difficult to access MiniApps across platforms and difficult to reach a unified understanding from both user and developer perspectives.
+            The document refers to mobile deep linking technology and defines two ways to access MiniApp, one with the HTTPS protocol and the other with a custom protocol. In addition, MiniApp Addressing defines the syntax of MiniApp URIs, including uri-prefix for cross-environment access, uri-infix "miniapp" for MiniApps, and identifier and version to uniquely identify a MiniApp.
+            MiniApp Addressing also describes how the user agent obtains the corresponding mini-app package based on MiniApp URI, as well as some error handling, and gives an example procedure for downloading MiniApp packages over the network. 
+          
+
+          4.5 Widget

+            
+            MiniApp Widget is a special form of MiniApp Page. Same as a page, a widget runs in a host environment that is called the MiniApp user agent. Unlike a MiniApp page, a widget can occupy a certain area instead of the entire screen. The [MINIAPP-WIDGET-REQ] document describes the initial design considerations for developing a MiniApp Widget, including user agent, packaging, manifest, addressing, lifecycle, UI components, API, and communication between MiniApp and MiniApp Widget etc. The detailed Widget specification will be described in a separate document, which will describe the detailed technical requirement and capabilities of user agent. For example, the potential dependencies of widget running environment, the potential changes of API and UI Components brought by Widget, and new features bright by Widget such as the requirement of communication between MiniApp and MiniApp Widget. Both user agent developers and widget developers can refer to the Widget specification for technical development.
+            
+          
+
+          4.6 Implementation, converting tools

+            
+            In 2021, the Working Group published two documents, [MINIAPP-MANIFEST] and [MINIAPP-LIFECYCLE]. Meanwhile, various vendors have some pre-standard implementations. To verify the feasibility of the standards and be compatible with pre-standard implementations, the working group developed a tool for converting MiniApp standard Manifest to different pre-standard manifest files, such as Baidu's App.json and HarmonyOS FA's config.json. And in a 2021 TPAC breakout session, the working group demonstrated a demo of the tool.
+            As the standards and pre-deployment progress, the working group plans to refine the tools to support a complete, standardized development approach that may include Packaging, Addressing, Lifecycle, UI components, and APIs.
+            
+          
+
+        
+
+        5. New ideas incubated; the CG work

+          
+          5.1 UI components

+            
+            MiniApp components are the building blocks to define the structure, content, and logic of the pages that form a MiniApp. Each component encapsulates functionality, data, and styles, enabling developers to build reusable and customizable items.
+            The MiniApp UI Components specification collects a set of essential elements that developers can use to build homogeneous but customized user interfaces across MiniApp platforms.
+            This specification does not reference specific versions of HTML and CSS. It points to the latest W3C recommendations in order to guarantee the adoption and implementation of the changes to the HTML and CSS standards. Both MiniApp user agent vendors and developers will need to keep track of changes to these specifications to ensure that their processes and systems are kept up to date.
+            This specification defines a set of predefined elements that are common in all the MiniApp specifications, based on Web Components.
+          
+
+          5.2 MiniApps for IoT

+            
+            MiniApp for IoT describes the use cases of MiniApp for IoT. Derived from the use cases, this specification defines the architecture of MiniApp for IoT. How to reuse and extend the MiniApp Packaging and MiniApp Lifecycle is specified. Also, several APIs are specified for MiniApp APIs for IoT.
+
+            MiniApp for IoT has a similar architecture to MiniApps running on cell phones and PCs. But since IoT device has different hardware capabilities, MiniApp for IoT has its unique features, including:
+
+            
+            MiniApp Packaging for IoT
+            MiniApp Lifecycle for IoT
+            MiniApp APIs for IoT
+            
+          
+        
+
+          6. Security and Privacy Consideration

+                
+                MiniApp utilizes HTTPS to support secure connections. Multiple MiniApps within the same host environment are independent of each other.
+                User interactions within MiniApp need a different level of user permissions:
                 
                 
@@ -593,13 +1068,13 @@ Security and Privacy Consideration
-                        
+                        
-                        
-                         
+                        
+                        
-                        
+                        
@@ -608,89 +1083,445 @@ Security and Privacy Consideration
-                        
+                        
-                    
                       
                         User Interactions
                       
                       default(no extra action needed) Default (no extra action needed)
                         Page sharing, clipboard, vibration, compass, motion sensors, map, screen brightness, screen capture, battery status 
                       
permission on first-time usage Geolocation, camera(qr code), network status, Bluetooth, NFC Permission on first-time usage Geolocation, camera (scan QR codes), network status, Bluetooth, NFC 
                       
permission on every usage Permission on every usage
                         Contacts, file-apis, add to home screen, photo picker, phone call 
                       

                         Validate with token
                         Callback/messaging
                         Password-free Payment 
                       
request password Request password
                         Payment 
                       
+                    
+                  
+                  
+                    From different perspectives and according to different security levels, the MiniApp framework provides the following methods.
+                  
+
+                  6.1 Capability authentication

+                    
+                    
+                      For capabilities with high privacy risks, MiniApp requires developers to apply for permission to use such features on the MiniApp developer platform. The application includes the rationale, a detailed description of the usage scenario, and the demo of usage. Then the platform will review applications according to the MiniApp usage requirements.  Only approved MiniApps are allowed to invoke such interfaces. For example, the ability to obtain the user's mobile phone number is one of the capabilities with high-security risks. 
+                    
+                  
+
+                  6.2 
+                      User Authorization
+                    

+                    
+                    
+                      For interfaces involving user privacy, the user's authorization must be required.  MiniApp classifies these sensible interfaces into several authorization scopes such as location, album, address, camera, calendar, etc. For example, a window will be popped up (see figure below) when the MiniApp tries to invoke the camera capability but users don't authorize it. Thus, users understand that such privacy-related feature is protected. Meanwhile, MiniApps hosted by different super apps might have some different privacy authorization scopes based on the usage characteristics and usage scenarios of each super app.
+                    
+                    
+                      
+                      Figure 16 
+                        User authorization
+                      
+                    
+                  
+
+                  6.3 
+                      MiniApp Audit Review
+                    

+                    
+                    
+                      MiniApp packages will be reviewed by MiniApp platforms before publishing. Developers must follow MiniApp Platform Operation Terms because the platform is the only way for them to publish a new version MiniApp. There are many aspects of platform auditing, such as data collection, data use, data security, and geographic location.
+                    
+                  
+
+                  6.4 
+                      Domain check
+                    

+                    
+                    
+                      For some container components, like <web-view>, that could render online webpages, MiniApp user agents may limit the URLs accessed by the component. Only the domain configured in the MiniApp Management Center can be accessed in <web-view>. Also, if the component contains an <iframe>, the URL opened by the iframe should also be configured in the MiniApp Management Center. In this way, MiniApp platforms can have more robust control over the dynamic pages opened by the MiniApp.
+                    
+                    
+                      Similarly, the MiniApp framework verifies the legitimacy of the asynchronous request address.
+                    
+                    
+                      For example, for URLs launched by request, download, upload, etc., their domain must belong to the domain configured in the MiniApp Management Center, and their protocols must be HTTPS protocols to ensure the security of data transmission.
+                    
+                  
+            
+
+            7. MiniApp Standardization in the Globe

+              
+              
+                Though it originated in China, MiniApp is increasing in popularity around the globe. Similar product forms are raised in other parts of the world, including Japan, Korea, Southeast Asia, the US, Europe, and Africa. The standardization of MiniApp technologies has drawn considerable attention from the global Web community. Thus, the collaboration on MiniApp standards becomes a joint international effort.
+              
+              7.1 Broader Web Community Discussions on MiniApp

+                
+                The first global Web community discussion on MiniApp standardization was during TPAC 2019 in Fukuoka. A breakout session was organized during which MiniApp vendors introduced MiniApp technologies and the necessity for MiniApp standards. The participants discussed the possible directions for MiniApp standardizing, such as packaging, manifest, lifecycle, and widget. Special efforts were made to avoid the overlapping between MiniApp standards and the current Web standards efforts and enhance the interoperability between MiniApp platforms and the Web and between different MiniApp platforms. The MiniApps Ecosystem Community Group was launched right after this discussion, and the incubation of MiniApp specifications started.
+                During virtual TPAC 2020, there was a breakout session titled Learning from Mini Apps at the event. In this breakout session, experts discussed the abstract form of a MiniApp and the powerful features that MiniApps can have. Also, the session shared how one could build a MiniApp via various development tools. Then there was an open discussion focused on what Web developers can learn from MiniApp and their developer experience. 
+              
+
+              7.2 MiniApp in CJK

+                
+                
+                  MiniApp product forms and technologies in Asian markets share lots of similarities. To gather the global community, especially the Chinese, Japanese and Korean participants, to communicate around the MiniApp ecosystem in each area and discuss the future of standardization efforts on MiniApps, W3C MiniApps Working Group, and MiniApps Ecosystem Community Group organized the 1st CJK Meeting on MiniApps in April 2021. About 90 participants from over 30 organizations joined the discussion and exchanged ideas about MiniApp ecosystems, technical architecture, frameworks and MiniApps in new scenarios such as MiniApp for vehicles. A rough conclusion about the discussion is that as the development of MiniApp standards go on well in the MiniApps Working Group, it’s time to start the horizontal review of security, privacy, accessibility as well as internationalization of MiniApp standards; also, leveraging IoT technologies in MiniApp can be a very promising direction for the for MiniApp in new scenarios and there will be good opportunity for the global MiniApp community to cooperate on the related standardization work. 
+                
+              
+
+              7.3 MiniApps in Europe

+                
+                  Although there are only a few cases of MiniApps in Europe, this concept is gaining traction; and the community has started to explore these technologies, looking for new business models and innovations out of the traditional app marketplaces.
+                  In 2021, a group of stakeholders, including three W3C Members, launched the Quick App Initiative, an open-source-oriented interest group open to any organization and individual and driven by open collaboration. This group, hosted by OW2, an independent non-profit organization based in France, is ruled under a transparent process intending to promote the W3C works from a vendor-neutral perspective and focused on outreach, implementations, and standardization requirements gathering from the European market perspective.
+              
+
             
 
-            
-                Way Forward in W3C
-                To meet the use cases and requirements of MiniApps, make the Web standards better support the MiniApp, and explore innovation of user agent and  enrich the Web, we hope to set up a group and include the following work in W3C:

-                        coordinate the MiniApp related standardization in W3C as well as to collaborate with other related W3C groups.
+            8. Way Forward in W3C

+                
+                To meet the use cases and requirements of MiniApps, make the Web standards better support the MiniApp, explore the innovation of user agents, and enrich the Web, we hope to set up a group and include the following work in W3C:

+                        Coordinate the MiniApp-related standardization in W3C as well as to collaborate with other related W3C groups.
                         
-                        horizontal review (security, privacy, i18n and a11y).
+                        
Horizontal review (i.e., security, privacy, i18n, and a11y).
                         
                     
 
-                    In details, the following technical work shall be studied further:

-                        draft a roadmap for MiniApp standards based on the use cases and requirements selected by the group.
+                    In detail, the following technical work shall be studied further:

+                        Draft a roadmap for MiniApp standards based on the use cases and requirements selected by the group.
                         
-                        develop specifications for  features among current vendors. Target features include but not limited to:
+                        
Develop specifications for features among current vendors. Target features include but are not limited to:
                             
-                        package constructor
+                        Package constructor
                         MiniApp URI scheme
-                        hybrid rendering API
-                        3D model tag
-                        face tracking API 
+                        Hybrid rendering API
+                        3D model element
+                        Face tracking API 
                         Widget
                     
                         
-                        design future Web APIs to be useful for both web and MiniApp environments.
+                        design future Web APIs to be useful for both Web and MiniApp environments.
                     
                  Note: the further gap between current MiniApp APIs and Web APIs will be analyzed in parallel.
             
 
-            
-                Glossary
-                
-                      
+            9. Glossary

+                
+                

+                  
+                      
-                        
+                        
-                      
-                        
+                    
+                      
+                      
+                         
-                         
-                      
-                        
+                         
+                      
+                      
+                         
-                      
-                        
+                      
+                      
+                        
-                      
-                        
+                      
+                         
-                         
-                      
-                        
+                         
+                      
+                      
+                        
-                        
+                        
                         Chinese
                         English Definition
                       
小程序
小程序
                         Mini Program One format of MiniApp running within Native Apps.
快应用 One format of MiniApp running within native apps.
快应用
                         Quick App
                         A MiniApp standard developed by 12 mobile phone manufacturers in Quick App alliances.
渲染环境
渲染环境
                         rendering view
                         Native view or WebView.
                       
智能助理（负一屏）
智能助理（负一屏）
                         smart assistant A smart assistant to provide service for convenience, usually at left of the home screen
热更新 A smart assistant to provide service for convenience, usually at left of the home screen.
热更新
                         hot reload 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. No need to be re-installed when fixing or updating feature. In MiniApps, since a part of framework is implemented in JavaScript, MiniApp runtime can be hot reloaded.
                       
                     
             
 
-    
-      
+    A. 
         Gap Analysis
-      
+

Feature	Progressive Web App	MiniApp
Source code	Standard markup languages (HTML), stylesheets (CSS), and scripts (JavaScript).	Non-standard dialects of HTML, CSS and JavaScript
Deployed Format	Web resources (mainly: HTML, CSS, JavaScript code, and WebAssembly modules)	HTML, CSS, JavaScript, and other resources packed in a ZIP container.
Packaging	No. Resources linked on the Web.	Yes. Different package formats per vendor.
Needs to host files on Web server	Yes	No
Installation-free usage	Yes, running in the browser.	Running in a super app or on the OS.
Installation with standalone icon	From the browser or app marketplace (optional)	No
Services	Access to Web APIs	Access to non-standard Web APIs, including some system native APIs

	the Web	Native App	The Web	Native app	MiniApp
Download/Install	Download/install	No	Yes	No
Verified/Trusted	Verified/trusted	No	Yes	Yes
Login/Register	Login/register	Yes	Yes	User permission	Payment	Send a payment request	Register a credit card or navigate to another app	Complete within the hosted-app	Complete within the hosted app

	the Web	Native App	The Web	Native app	MiniApp
Discoverability	Search Engine	App Store	Multiple: search engines + MiniApp store in the hosted-apps + QR-code	Search engine	Marketplace	Multiple: search engines + MiniApp store in the hosted apps + QR code
Verified/Trusted	Still exploring	by Native App stores	by host App platforms	By native app marketplaces	By host app platforms
Deploy/Reload	load/reload the webpage	installed/reinstalled	load/reload as it's using a JS engine	Load/reload the webpage	Installed/reinstalled	Load/reload as it's using a JavaScript engine
Programming Language	Web programming language	new/multi languages: iOS and Android at least	New/multi languages: iOS and Android, at least	Web programming language
APIs/Components (AR, Image Recognition, Geolocation, Speech API)	very basic	complex for web developers	very simple high-level APIs and components	Very basic	Complex for Web developers	Very simple high-level APIs and components

User Interactions
default(no extra action needed)	Default (no extra action needed)	Page sharing, clipboard, vibration, compass, motion sensors, map, screen brightness, screen capture, battery status
permission on first-time usage	Geolocation, camera(qr code), network status, Bluetooth, NFC	Permission on first-time usage	Geolocation, camera (scan QR codes), network status, Bluetooth, NFC
permission on every usage	Permission on every usage	Contacts, file-apis, add to home screen, photo picker, phone call
Validate with token	Callback/messaging	Password-free Payment
request password	Request password	Payment

Chinese	English		Definition
小程序	Mini Program	One format of MiniApp running within Native Apps.
快应用	One format of MiniApp running within native apps.
快应用	Quick App	A MiniApp standard developed by 12 mobile phone manufacturers in Quick App alliances.
渲染环境
渲染环境	rendering view	Native view or WebView.
智能助理（负一屏）
智能助理（负一屏）	smart assistant	A smart assistant to provide service for convenience, usually at left of the home screen
热更新	A smart assistant to provide service for convenience, usually at left of the home screen.
热更新	hot reload	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.	No need to be re-installed when fixing or updating feature. In MiniApps, since a part of framework is implemented in JavaScript, MiniApp runtime can be hot reloaded.

- Please look at the comparison table of APIs in MiniApps, W3C specs, and PWAs.. + Please look at the comparison table of APIs in MiniApps, W3C specs, and PWAs.

+
B. Acknowledgments -
+

- Many thanks to Guanyu Liu (360), He Du (Xiaomi), Hongguang Dong (Xiaomi), Xiaoqian Wu (W3C), Yi Shen (Baidu), Yefeng Xia (China Mobile) who also contributed to this document. + Many thanks to Guanyu Liu (360), He Du (Xiaomi), Hongguang Dong (Xiaomi), Xiaoqian Wu (W3C), Yi Shen (Baidu), Yefeng Xia (China Mobile) who also contributed to this document.

- - + + +

+ +

[APPMANIFEST]: + Web Application Manifest. Marcos Caceres; Kenneth Christiansen; Matt Giuca; Aaron Gustafson; Daniel Murphy; Anssi Kostiainen. W3C. 17 February 2022. W3C Working Draft. URL: https://www.w3.org/TR/appmanifest/ +
[MANIFEST-APP-INFO]: + Web App Manifest - Application Information. Aaron Gustafson. W3C. 30 September 2021. W3C Working Group Note. URL: https://www.w3.org/TR/manifest-app-info/ +
[MINIAPP-ADDRESSING]: + MiniApp Addressing. Dan Zhou; Qian Liu; shuo wang; Tengyuan Zhang. W3C. 27 June 2022. W3C Working Group Note. URL: https://www.w3.org/TR/miniapp-addressing/ +
[MINIAPP-LIFECYCLE]: + MiniApp Lifecycle. Qing An; Haoyang Xu. W3C. 28 May 2022. W3C Working Draft. URL: https://www.w3.org/TR/miniapp-lifecycle/ +
[MINIAPP-MANIFEST]: + MiniApp Manifest. Martin Alvarez-Espinar; Yongjing ZHANG. W3C. 17 May 2022. W3C Working Draft. URL: https://www.w3.org/TR/miniapp-manifest/ +
[MINIAPP-PACKAGING]: + MiniApp Packaging. Martin Alvarez-Espinar; Qing An; Tengyuan Zhang; Yongjing ZHANG; Dan Zhou. W3C. 28 April 2022. W3C Working Draft. URL: https://www.w3.org/TR/miniapp-packaging/ +
[MINIAPP-WIDGET-REQ]: + MiniApp Widget Requirements. Chen Yinli; Canfeng Chen; Bingqing Zhou; Bin Guo. W3C. 24 April 2022. W3C Working Group Note. URL: https://www.w3.org/TR/miniapp-widget-req/ +

\ No newline at end of file

Last Modified: - 5 December 2019 + 16 October 2020 @@ -91,7 +91,7 @@

End date

- Scope +

+ Mission

+ Scope +

+ Out of Scope +

@@ -150,63 +171,48 @@

New Recommendation-track deliverables

Other Deliverables

- MiniApp URI Scheme + MiniApp Manifest Q1 2021 @@ -285,10 +306,10 @@

- MiniApp Lifecycle + MiniApp Packaging - Q1 2021 + Q2 2021 Q4 2021 @@ -302,7 +323,7 @@

- MiniApp Manifest + MiniApp Lifecycle Q1 2021 @@ -319,19 +340,31 @@

- MiniApp Packaging + MiniApp Addressing + + + Q1 2021 + + + + + + + + + + + + Widget Requirement Q1 2021 - Q4 2021 - Q3 2022 - Q4 2022 @@ -346,27 +379,19 @@

Success Criteria

@@ -452,8 +483,8 @@

WHATWG

结束日期

+ 使命 +

范围

+ 超出范围 +

@@ -147,63 +180,48 @@

新的规范性文档

其他交付文档

This document describes the requirements for MiniApp widgets, a special form of MiniApp pages. - 草稿状态： 在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化 Adopted Draft: - MiniApp URI Scheme + MiniApp Manifest Q1 2021 @@ -282,10 +315,10 @@

- MiniApp Manifest + MiniApp Lifecycle Q1 2021 @@ -316,19 +349,31 @@

- MiniApp Packaging + MiniApp Addressing + + + Q1 2021 + + + + + + + + + + + + Widget Requirement Q1 2021 - Q4 2021 - Q3 2022 - Q4 2022 @@ -365,7 +410,7 @@

W3C小组

@@ -420,7 +471,7 @@

WHATWG - WHATWG维护着URL持续更新标准，而MiniApps工作组的工作在该标准的基础上进行了扩展。 + WHATWG维护与该工作组中的UI组件相关的HTML和DOM标准。

专利政策

- Background - 背景 -

MiniApp Global Application Lifecycle

MiniApp Global Application Lifecycle States

MiniApp Global Application Lifecycle API

MiniApp Page Lifecycle

MiniApp Page Lifecycle States

MiniApp Page Lifecycle API

- Privacy and Security - 隐私与安全 -

- Acknowledgments - 致谢 -

Manifest

- Dictionary - 字段 -

- dir - 方向 -

- lang - 语言 -

- appID - 标识 -

- appName - 名称 -

- shortName - 简称 -

- description - 简述 -

- icons - 图标 -

- versionName - 版本名称 -

- versionCode - 版本号 -

- minPlatformVersion - 平台版本 -

- pages - 页面路由 -

- window - 窗口 -

- widgets - 卡片 -

- reqPermissions - 所需权限 -

- Localizable attributes - 可本地化属性 -

- Dependencies - 依赖 -

- Conformance - 标准符合性 -

- Security and Privacy Considerations - 安全隐私考虑 -

- Content constraint - 内容限制 -

- Local resource access - 本地资源访问 -

- Integrity - 完整性 -

- Transparency - 信息透明 -

- JSON Schema - JSON语法 -

- Example - 样例 -

- Acknowledgments - 致谢 -

Packaging

root files

pages

common

i18n

Security & Privacy Considerations

Integrity & Trustworthiness

Confidentiality

IANA Considerations

- Introduction - 介绍 -

- Example of usage - 用例 -

- Example 1: Use MiniApp URI in a mini app - 用例1：在一个小程序内使用 MiniApp URI -

- Example 2: Open a mini app on Web page - 用例2：在 Web 页面中打开一个小程序 -

- Example 3: Access a mini app package in a development environment - 用例3：在开发环境中访问小程序包 -

Last Modified:
- 5 December 2019 + 16 October 2020

@@ -91,7 +91,7 @@

This document describes the requirements for MiniApp widgets, a special form of MiniApp pages.

- 草稿状态：在MiniApp CG中孵化 + 草稿状态：在MiniApp CG中孵化

Adopted Draft: - MiniApp URI Scheme + MiniApp Manifest Q1 2021 @@ -282,10 +315,10 @@

WHATWG
- WHATWG维护着URL持续更新标准，而MiniApps工作组的工作在该标准的基础上进行了扩展。 + WHATWG维护与该工作组中的UI组件相关的HTML和DOM标准。