Mini Apps index layout: collection override:tags: [] date: 2021-03-03 updated: 2021-03-03 pathName: mini-apps What are mini apps? {% Aside %} This post is part of an article collection where each article builds upon previous articles. If you just landed here, you may want to start reading from the beginning. {% endAside %} Building blocks and compatibility Mini apps are small (commonly 2-4 MB) apps that require a super app to run. What they have in common, independent of the super app, is that they are built with ("dialects" of) the web technologies HTML, CSS, and JavaScript. The runtime of a mini app is a WebView in the super app, not the underlying operating system, which makes mini apps cross platform. The same mini app can run in the same super app, no matter if the super app runs on Android, iOS, or another OS. However, not all mini apps can run in all super apps, more on this later. Discovery Mini apps are often discovered ad-hoc via branded 2D barcodes, which solves an important offline-to-online challenge, for example, getting from a physical restaurant menu to a payment mini app, or from a physical e-scooter to a rental mini app. The image below shows an example of such a branded 2D barcode for WeChat's demo mini app. When the code is scanned with the WeChat super app, the mini app launches directly. Other super apps will typically not be able to recognize the barcode. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SOisfOqKQWr0GZZvUaqn.jpg", alt="WeChat-branded 2d barcode.", width="250", height="250" %} Scanning this 2d barcode with the WeChat app launches a demo mini app. Mini apps can also be discovered through regular in-app search in the super app, be shared in chat messages, or be part of a news item in a news feed. Some super apps have the notion of verified accounts that can contain mini apps in their profiles. Mini apps can be highlighted when they are physically geographically close, like the mini app of a business in front of which the user stands, or virtually close, like when the user gets directions on a map shown in the super app. Frequently used mini apps are available in an app drawer that in many super apps can be accessed through a swipe down gesture or through a special section in the super app menu. The user experience All super apps have more or less the same user interface for mini apps. A themeable top bar with the mini app's name, and, in the upper corner of the screen, a close button on the far right preceded by an action menu that provides access to common features like sharing the app, adding it to a favorites list or the home screen, reporting abusive apps, providing feedback, and settings. The screenshot below shows a shopping mini app running in the context of the Alipay super app with the action menu opened. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/PkjzF8AyxDVIAMZmhVrr.jpg", alt="The Alipay super app running a shopping mini app with highlighted top bar, action menu button, and close button. The action menu is opened.", width="300", height="649" %} Opened action menu of a shopping mini app running in the Alipay super app. UI paradigms Usually there is a bottom tab bar for the mini app's main navigation. Most super app providers offer components that help developers quickly implement common UI paradigms, such as carousels, accordions, progress bars, spinners, switches, maps, and so on. This also helps make the user experience between different mini apps consistent, which is encouraged by WeChat's Mini Program Design Guidelines. This is similar to what Apple incentivizes with its Apple Human Interface Guidelines, and Google with its Design for Android recommendations. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nFVCU3HqKERzl7Lops6Q.png", alt="The Douyin demo mini app showcasing the Douyin slider (carousel) component with toggles for auto-advance, dot indicators, etc.", width="300", height="617" %} Douyin's slider (carousel) component with various options. Serving Rather than being served piece by piece as separate resources, mini apps are served as encrypted packaged apps, that is, as archives that contain all resources in just one file. Unlike regular web apps, they are also not served from the particular origin of the mini app creator, but from the super app provider directly. They can still access APIs from the servers of the mini app creator, but the core resources (commonly referred to as the app shell), must be served from the super app provider. Mini apps have to declare the origins they request additional data from. Caching, updates, and deep-linking Mini apps are kept in the cache of the super app, so the next time the user launches a cached mini app, it loads almost instantly. If there is an update, a new app package is loaded. The version number can be part of the launch URI (see Discovery), so the super app knows early on if the locally cached version is still current. The launch URI also optionally contains the desired page of the mini app, so deep-linking into specific pages of mini apps is possible. Via a sitemap, mini apps can declare which of their pages should be indexable by the super app provider's mini app crawler. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZKLNvNnm3Rr6aBmYbons.png", alt="macOS Finder showing a folder containing cached WeChat mini app `.wxapkg` files.", width="800", height="465" %} Mini apps are cached as encrypted packaged apps. Security and permissions Mini apps are reviewed by the super app provider, which means users perceive them as more secure than web apps. They need to declare their potentially required permissions beforehand in a manifest or mini app configuration file, which, for some providers, also requires explanations for why each permission is needed. Mini apps can of course still lie, but they would have a hard time justifying why they are, for example, trying to access motion sensors without a reason that is apparent to the user. The incentive to fingerprint the user is notably a lot lower compared to the web, since the user is typically already logged in to the super app anyway (see Identity, payement, and social graph). Whenever a mini app performs an operation that requires a special permission, a prompt is shown to the user that, if enforced by the platform, also includes the usage justification, as stated by the developer. The screenshot below shows the Douyin demo mini app as it asks the user for permission to share their location. In some super apps, there is also an imperative API that mini apps can leverage to request permissions without immediately using them, or to only check the status of a permission. This may even include an API to open the central super app permission settings, which corresponds to Chrome's Site Settings. Mini apps also have to declare beforehand the origins of all servers that they potentially will request data from. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8To8DiUqnP4qqFfpPNqk.png", alt="The Douyin demo mini app showing a geolocation prompt with two options: 'Not Allowed' and 'Allowed'.", width="300", height="617" %} The Douyin demo mini app asking for the geolocation permission. Access to powerful features The hosting super app offers access to powerful APIs via a JavaScript bridge that gets injected into the WebView offered by the super app (see Building blocks and compatibility). This JavaScript bridge provides hooks into the operating system's APIs. For example, a mini app JavaScript function like getConnectedWifi()—the capability of a mini app to obtain the name of the currently active Wi-Fi network—under the hood is facilitated through Android's getConnectionInfo() API or iOS' CNCopyCurrentNetworkInfo() API. Other examples of powerful device APIs exposed in common super apps are Bluetooth, NFC, iBeacon, GPS, system clipboard, orientation sensors, battery information, calendar access, phonebook access, screen brightness control, file system access, vibration hardware for physical feedback, camera and microphone access, screen recording and screenshot creation, network status, UDP sockets, barcode scanning, device memory information, and more. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HNEKyoLVeq3IUKGXEZEZ.png", alt="The WeChat demo mini app showing a slider that controls the screen brightness of the device moved all the way to the maximum.", width="300", height="649" %} The WeChat demo mini app setting the device's screen brightness to the maximum. Access to cloud services Many super apps also provide "serverless" access to cloud services of the super app provider that, apart from raw cloud computing and cloud storage, frequently also include higher-level tasks like text translation, object detection or content classification in images, speech recognition, or other Machine Learning tasks. Mini apps can be monetized with ads, which are commonly made available by super apps providers. Super app platforms usually also provide cloud analytics data, so mini app developers can better understand how users interact with their apps. Identity, payment, social graph A very important feature of mini apps is the identity and social graph information that is shared from the super app. Super apps like Douyin or WeChat started as social networking sites in the broadest sense, where users have a (sometimes even government-verified) identity, a friend or follower network, and frequently also payment data stored. For example, a shopping mini app can (or sometimes even must) process any payments directly through the payment APIs of the super app and, upon user consent, can obtain user data like their shipping address, phone number, and full name, all without ever having to force the user to painfully fill out forms. Below, you can see the Walmart mini app running in WeChat, opened for the very first time, greeting me with a familiar face. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/HzPx6ZSqQWvsUDT04ex2.png", alt="The Walmart mini app showing the author's face and name on the 'Me' tab.", width="300", height="649" %} The Walmart mini app with a personalized "Me" view on the first visit. Mini apps can get highly popular by letting people share their achievements like highscores in a game and challenge their contacts through status updates. The mini app is then only a tap away, so users can enter into competition without any friction and the mini app thereby grow its reach. {% Aside 'success' %} In the next chapter, you will learn what sets mini apps apart from H5 apps and QuickApp. {% endAside %} Acknowledgements This article was reviewed by Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, and Keith Gu. Other mini app runtime environments {% Aside %} This post is part of an article collection where each article builds upon previous articles. If you just landed here, you may want to start reading from the beginning. {% endAside %} More than just on mobile In countries like China, mini apps have taken the market by storm. Apart from mobile devices, where mini apps are omnipresent and which are their natural habitat, mini apps have started to conquer other runtime environments like cars and the classic desktop. Mini apps in cars In July 2020 the German car maker BMW Group announced a collaboration with Tencent branded as WeScenario, which, according to Tencent, will be rolled out to "30 leading auto companies in the world, and [bring the WeScenario] ecosystem of social, content and services to more than 110 mainstream automobile models". {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/AX07xQlEHL7MDjPo1U1H.jpg", alt="Dashboard of a Tencent car showing two rows of mini app icons.", width="800", height="533" %} Landing page of Tencent WeScenario (Source: BMW). Mini apps on the desktop Mini apps in WeChat Desktop Using the WeChat desktop client available for macOS and Windows), it is possible to run WeChat mini apps on the desktop. (Make sure to not load the macOS version from the App Store if you are doing research and want the full experience, since it is more limited.) To test it on macOS, share a mini app from a mobile device with yourself via the "File Transfer" account. This will result in a message that you can then open on the desktop client. In most cases, the mini app will then be directly clickable and runnable. In other cases, you have to forward the chat history to yourself again from a mobile device. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/qLbYBpAoSvbc1Qjc9Ub0.png", alt="The WeChat macOS desktop client showing a chat with oneself with a shared mini app and a chat history as the two visible messages.", width="800", height="602" %} Sharing a mini app with oneself in the WeChat macOS desktop client. On Windows, the workaround to share mini apps with oneself is not necessary, since there is a dedicated mini apps panel that shows the user's recently used mini apps and also includes an app search where new mini apps can be discovered. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/NQCoGaAWcbuiO37dCNY5.png", alt="The mini app panel in the WeChat Windows client showing the user's recently used mini apps.", width="800", height="531" %} The mini app panel in the WeChat Windows client. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/H5nqmnoK9JjLcu8mWDSH.png", alt="The mini app search in the WeChat Windows client showing mini apps listed in various categories like games, business, education, etc.", width="800", height="576" %} The mini app search in the WeChat Windows client. WeChat mini apps on the desktop naturally integrate with the operating system. On both macOS and Windows, they get their own entry in the multitasking bar and have their own taskbar icon. While on macOS, there is an option to be kept in the Dock, the icon disappears the moment the WeChat client app gets closed. On Windows, mini app icons can be pinned to the taskbar, but cannot be launched. On macOS, the title of the app is always "WeChat" and not the actual title of the app, whereas the title is displayed correctly on Windows. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nrvwtwOWot6eZI40evfp.png", alt="The macOS multitask switcher includes mini apps alongside regular macOS app.", width="800", height="79" %} The Starbucks app is a mini app and can be multitasked to like any regular macOS app. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fG4cpJgpyXeqvjn4lF3v.png", alt="The Starbucks mini app icon on the macOS Dock with a WeChat title.", width="646", height="412" %} Mini apps on macOS have WeChat as their title. Most mini apps are not optimized for desktop yet and run in a fixed, non-resizable window that includes the well-known UI affordances and permission prompts as on mobile (see The user experience). {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/uorcciuZIL8sadxTjXbv.png", alt="The Starbucks mini app running on macOS asking for the user profile permission which the user can grant via a prompt shown at the bottom.", width="300", height="484" %} The Starbucks mini app running on macOS asking for the user profile permission. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UGufvRnoaAGm8A3qQG4a.png", alt="The Starbucks mini app running on macOS showing the home screen of the app.", width="300", height="484" %} The Starbucks mini app running on macOS in a fixed, non-resizable window. Responsive mini apps that are optimized for the desktop (apart from for mobile) can be displayed in a wider window that on macOS is currently still fixed, but that on Windows is flexibly resizable. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/cUMqQ75zPeCDNTcCWF5D.png", alt="The WeChat components demo app in a responsive app window that can be resized and that by default is wider than the usual mobile screen.", width="800", height="620" %} The WeChat components demo app in a responsive app window. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rPbojIjBGKbNtDviB0MJ.png", alt="The WeChat components demo app in a narrow window showing three boxes A, B, and C stacked on top of each other.", width="300", height="614" %} The WeChat components demo app in a narrow app window. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xnlacc8Xm1eNMCuajYYL.png", alt="The WeChat components demo app in a wide window showing three boxes A, B, and C with A stacked on top of B and C on the side.", width="600", height="565" %} The WeChat components demo app in a wide app window. Mini app permission settings on macOS can be changed via the context menu. On Windows, this does not seem to be possible and the location reported by the demo app appears to be the coarse location that Windows allows apps to obtain without asking for permission. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/rHyiTGbMauqbSFWBFlMW.png", alt="The WeChat components demo app running on macOS showing two checkboxes for the location and user info permission.", width="500", height="384" %} WeChat mini app settings on macOS. Mini apps in the 360 Secure Browser 360 Secure Browser (360 安全浏览器) is a web browser developed by the company Qihoo. Apart from iOS and Android, the browser is also available for Windows, macOS, and Linux. On Windows, it is capable of running special 360 mini apps. The developer documentation and the API are comparable to those of other vendors; however, 360 does not offer dedicated DevTools. Instead, developers need to create their mini apps in an IDE of their own choosing and can then test them in the browser using a special development mode. Debugging happens through Chrome Dev Tools. A demo app is available for getting started. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IdHpN4GhVWDZ5gmSZ4Jb.png", alt="A 360 mini app running in 360 Secure Browser being debugged with Chrome Dev Tools.", width="800", height="402" %} Debugging a 360 mini app using Chrome Dev Tools. 360 mini apps can run in fullscreen mode and do appear as separate entries in the multitasking bar. Via the context menu, a home screen icon can be added that allows for mini apps to be launched from the desktop. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/M4MPV6TXwsLC6lFn9Jgi.png", alt="A 360 video mini app running in fullscreen mode showing various thumbnails of videos to watch.", width="800", height="402" %} 360 mini app running in fullscreen mode. Web-based mini apps There are some mini app platforms that are web-based, but that depend on the presence of a special WebView to unlock their full potential. LINE LINE is an app for instant communications on electronic devices such as smartphones, tablet computers, and personal computers. In addition, LINE is a platform providing various services including digital wallet, news stream, video on demand, and digital comic distribution. The service is a subsidiary of Korean internet search engine company, Naver Corporation. Since LINE mini apps is essentially just a regular web app (see sample app) that pulls in the LINE Front-end Framework (LIFF), it can also be accessed outside of the main LINE app through special permanent links (example). However, not all APIs are available in such cases. Examples of not available in the browser APIs include the liff.scanCode() method for reading QR codes or Bluetooth-related APIs like liff.bluetooth.getAvailability(). To get a feel for the platform, you can test the LINE Playground app in the browser and the LINE app if you have a LINE account. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YIlFjXgZhq8ROMrPA1BO.png", alt="The LINE Playground demo app running on an iOS device showing `liff.getOS()` returning 'ios'.", width="300", height="649" %} The LINE Playground demo app running on an iOS device. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/UPwJbVhssGfA4IQ89kEo.png", alt="The LINE Playground demo app running in the web browser showing `liff.getOS()` returning 'web'.", width="800", height="510" %} The LINE Playground demo app running in the web browser. Google Spot The Google Spot Platform allows developers to set up a Spot on Google Pay—a digital storefront that they can create, brand, and host however they choose. It is discoverable both online as well as through physical barcodes. Users can easily share a "Spot" (as the app calls it) on their favorite messaging app or find it on Google Pay. A Spot is built using HTML and JavaScript, so existing investments into mobile websites or PWAs can be easily transformed into a Spot by "adding a few lines of JavaScript" according to the announcement post. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/T4OLZX8PIFjFq3gVzUmo.png", alt="The Eat.fit mini app running in the Google Pay super app showing the sign-in bottom sheet.", width="300", height="637" %} The Eat.fit mini app running in the Google Pay super app (Source: Google). Snap Minis Snap Inc. is an American camera and social media company most known for its chat app Snapchat. Snap has announced Snap Minis, bite-size utilities made for friends. They are built with HTML5, so they are easy to develop. Plus, they work for all Snapchatters, on any kind of device, with no installation required. {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vM5d0wK5fCQSV0VyP7HA.png", alt="The Atom Tickets mini app running in Snapchat showing three snapchat users reserving their seats in a movie theater.", width="320", height="470" %} The Atom Tickets mini app running in Snapchat (Source: Snap). VK Mini Apps The Russian social networking platform VK runs a mini app program that allows developers to build mini apps that tie in deeply with the social network. VK mini apps work on both VK's platform-specific mobile apps, as well as on the desktop website. Apart from several of the brand's other platforms like Mail.ru, VK mini apps are also integrated in the Atom browser. {% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/tZJgYpdjurBVfhInqWRo.webp", alt="The Все аптеки mini app running in VK.", width="460", height="948" %} The Все аптеки mini app running in VK (Source: VK). {% Aside 'success' %} Read on to see some examples of the mini app open source projects. {% endAside %} Acknowledgements This article was reviewed by Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, and Keith Gu. Mini app components {% Aside %} This post is part of an article collection where each article builds upon previous articles. If you just landed here, you may want to start reading from the beginning. {% endAside %} Web components Web components started with the promise of letting developers piece them together and build great apps on top of them. Examples of such atomic components are GitHub's time-elements, Stefan Judis' web-vitals-element, or, shameless plug, Google's dark mode toggle. When it comes to complete design systems, however, I have observed that people prefer to rely on a coherent set of components from the same vendor. An incomplete list of examples includes SAP's UI5 Web Components, the Polymer Elements, Vaadin's elements, Microsoft's FAST, the Material Web Components, arguably the AMP components, and many more. Due to a number of factors out of scope for this article, a lot of developers, however, have also flocked to frameworks like React, Vue.js, Ember.js, etc. Rather than giving the developer the freedom to choose from any of these options (or, dependent on your viewpoint, forcing them to make a technology choice), super app providers universally supply a set of components that developers must use. Components in mini apps You can think of these components like any of the component libraries mentioned above. To get an overview of the available components, you can browse WeChat's component library, ByteDance's components, Alipay's components, Baidu's, and Quick App components. Earlier I showed that while, for example, WeChat's is a web component under the hood, not all of these components are technically web components. Some components, like and