Mini Program

Quick App
Smart App Mobile

Mini App
Standardisation
Web OS

Native App
PC
 RECENT PROGRESS

Mini App Standardisation White Paper published

by Chinese Web IG!
-> https://www.w3.org/TR/mini-app-white-paper/

Contributors: Alibaba, Baidu, Xiaomi, Huawei,

Intel, China Mobile,360, Uni-App, W3C Beihang…

Goal of the White Paper:

• To define Mini App and the relevant terminology;
• To introduce the core technologies of Mini App;
• To figure out what should be standardised;
• To propose the next steps in W3C.
 Mini App is everywhere

Mini Quick
Program Mini App App

Running on Native App / Super App Running on the OS

Mini App is efficient to bridge Native App and the Web:

• Any Native App(including browsers) can be a runtime of Mini App.
• Any Native App can run a Mini App by install a SDK.
Mini App helps to solve problems like…
• Heavy cost of usage: download,
register
• Limited storage, limited Native
Apps
develop • Update: initiated by users, time
consuming users
ers • Walled garden
• High cost of development: iOS,
Android, etc.
• High cost of distribution: only
Native App store
• Long release time

Native Apps
Mini App helps to solve problems like…

• Limited performance and

capability compared with
develop Native App
ers • Low user retention rate users
• High barrier for developers,
due to the fact that the pre-
defined APIs and components
are not enough

the Web
 What is Mini App?

MiniApp is a new format of mobile application, a hybrid solution which relies

on Web technologies 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.

• 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.
• 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.
 CASE STUDY 1

Sharing Bicycle Service: Seamless Usage Web Native Mini App

Download/
1. User chooses the miniapp on a super-app that No Yes No
Install
he/she already logined;
Verified/
2. User scans the QR-code label attached on a No Yes Yes
Trusted
shared bicycle within the superapp;
3. The super-app will automatically navigate to Login/
Yes Yes
User
the shared bicycle miniapp and unlocks the Register permission
bicycle instantly;
Register a
4. Upon arrival, user locks the bike on the Complete
Send a credit card
miniapp; within the
Payment payment or navigate
hosted Native
5. Transaction completes, a message of the request to another
App
App
payment detail is sent to the user.
 CASE STUDY 2

AR Zoo(from Dev prospective): easier and

faster to adopt complex advanced feature.

Developers can easily finish a AR Zoo 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.
CASE STUDY 2

Web Native Mini App

Multiple Host-App
Discoverability Search Engine App Store Scenarios, Search,
Mini app store, QR
code, etc.
Verified/Trusted Still exploring By Native App stores By host App platforms

load/reload the load/reload as it's using

Deploy/Reload installed / reinstalled
webpage a JS engine

new/multi languages:
Web programming Web programming
Programming Language iOS and Android at
language language
least
High-level APIs/ Complex for web Simple high level APIs
Components (AR, Image Very basic
developers and components
Recognition, etc.)
 CASE STUDY 3

Mini App on IoT

• some MiniApps can be converted to

adapt the vehicle screen and system;
• MiniApp vendors have built a few
MiniApp platforms specially design for
the vehicle system;
• this brings millions of Web developers
to the Automotive application
ecosystem.
User scenarios of Automotive MiniApps
includes gas filling, car washing,
Electronic Toll Collection, insurance,
restaurant reservation, or entertainment.
 CORE FEATURES

Separation of View and Logic

Multiple Render View + JS Worker +

Native Capabilities

• Convenient data sharing and interaction

among multiple Mini App pages
• Same context within a life circle of Mini App
• Prevent JS execution impacts or slows
down the page rendering
CORE FEATURES

Data Flow of Mini App when an API is called

CORE FEATURES

Rich APIs and Components Mini App Package Constructor

Mini App
Package
APIs
Navigator API Canvas API Image API

Phone call API File API Scan API

Payment API Map API …

• One Set of app
files
• Multiple sets of
Components page files
View Text Form Image

Navigator Canvas Map …

 CORE FEATURES

Mini App Widgets

• Mini App can be displayed as

information fragment — a Mini
App widget
• E.g., the Mini App widget
shows the train's latest status.
User can click on this widget
and jump to Mini App page for
more detailed information.
 CORE FEATURES
Mini App Widgets

• standardizing calling (mini

apps)
• atomized combination widgets
• data sharing cross scenarios
 SECURITY AND PRIVACY
Mini App utilises HTTPs to support secure connection.
Mini Apps within same host environment are independent with each other

S&P consideration Function

default(no extra action Page sharing, clipboard, vibration, compass, motion
needed) sensors, map, screen brightness, screen capture, battery
permission on first-time Geolocation, camera(qr code), network status, Bluetooth,
usage NFC
permission on every Contacts, file-apis, add to home screen, photo picker,
usage phone call
Validate with token Push

Callback/messaging Password-free Payment

request password Page sharing, clipboard, vibration, compass, motion

sensors, map, Payment
THINGS WE WANT TO STANDARDISE

Mini App Package Constructor

Mini App
Package
a packaged Goal: a standardised
(compressed) way to describe Mini App
collection of files package
• Define package’s structure/
• Download contents
once • Specify how to create the
• Load data package
instead of load • Specify how to parse the
page package
THINGS WE WANT TO STANDARDISE

URI Scheme

Goal: a standardised URI scheme to access Mini App or Mini App

page is needed
• Navigate between Mini Apps
• Identification of page inside Mini App
• Define an access protocol, Mini App URI, Mini App page URI
THINGS WE WANT TO STANDARDISE
Transition Animation during Mini App
page switching

Goal: To make Mini App

smoother

Define:
• page transition
type(Replace current page
or stack on top)
• Animation(type & duration)
between pages (if any)
THINGS WE WANT TO STANDARDISE
Pull down refresh

Goal: Refresh page state by

gesture

Define: Pull-down-refresh
component
THINGS WE WANT TO STANDARDISE

Lifecycle Events in Mini App

Goal: Broadcasting Mini App states change for developer (e.g.,

update remote data)

Define: Life cycle events: App show/hide, page show/hide

THINGS WE WANT TO STANDARDISE
Scrollview component

Goal: Give developer a high level component to handle scroll

scenario. Develop can achieve more accurate scroll events

Define:
• scrollview component
• properties/event such as bindscrolltoupper/lower
THINGS WE WANT TO STANDARDISE
Mini App Widgets

Goal: Interact before entering Mini App. Widgets are implemented

by Mini App

Define:
• Display widgets within a host environment
• Access local or remote data
• Abilities to interact with user
THINGS WE WANT TO STANDARDISE
Native Rendering Component

Goal: Mini App needs a

standardised API or
component to integrate native
rendering result into Web
rendering result
THINGS WE WANT TO STANDARDISE
Other ideas

• Face Tracking
• Hand Gesture Tracking
• 3D Model Element
• Low level AR APIs based on ARCore and ARKit
NEXT STEP IN W3C
Explore innovation of user agent and enrich the Web

• Set up a specific group

• Coordinate Mini App related standardisation in W3C as well
as to collaborate with other related W3C groups
• Develop Mini App specs stack
• Package constructor
• Mini App URI scheme
• Transition Animation
• Native Rendering Component
• Pull down refresh
• …
• Horizontal review (security, privacy, i18n and a11y)
Mini Program
Quick App
Smart App Mobile

Thank You!
Web OS

Native App
PC
APPENDIX: MINI APP AND PWA

Mini App PWA

Leverage Web Enhance Web App so that

Target technologies in non- they could have
browser environment performance and user
Host Non-browser: Native
Browser
environment App, OS, etc.
Difference
Hybrid: Web + Native +
Solution Web
OS
Handled by host App
Trust platform, so some APIs Limited, still exploring
that are not supported by
Commona Some Such as native integration, access to native capabilitie
lity standard s and better UX
requirements