-
What is a MiniApp?
A MiniApp is a web app presented as a hybrid-like web view, providing similar capabilities, but without the need for new mobile app builds. Just about anything you can do in a website, or a hybrid web view (via Cordova, for example) can be done in a MiniApp.
-
Why build a MiniApp?
Because they're cool! And they're also a great way of getting your products or services in front of users inside of mobile platforms without developing the entire platform yourself.
-
Why include MiniApps in my Mobile App?
Extending your mobile app with MiniApps is a great way of adding content flexibly. You have more control over your deployment lifecycle and can extend the capabilities without the user downloading entirely new versions of the application. You can also extend your app with third party services and tools that shorten your development lifecycle and allow you to deliver value to your users more quickly.
-
What is the difference between a MiniApp and a Website?
MiniApps can perform most of the functions of a typical website or webapp. However, it can do it so much faster.
MiniApps are also easier to develop than webpages. Websites typically need to support various display profiles and browsers; Mobile terminals need to adapt Safari, Chrome and various WebViews in iOS and Android systems. A MiniApp has fewer considerations as many of the variables in the UI are handled for you. This means the UI can be more consistent and uniform.
Finally, MiniApps can tightly integrate with host mobile apps and support app-related functions, such as access sharing, device information, camera, and storage information.
-
What kinds of MiniApps can be built?
You're limited mostly by your imagination. You can build apps for e-commerce, brochures, galleries, or complex full featured apps. The apps can be used full-screen, or as small micro components serving specific use cases.
-
How can using MiniApps accelerate my feature development?
MiniApps speed up development in two core ways. First, developing features in html/js/css is typically a faster process than native code. This is the core promise of any hybrid framework. Second, the deployment pipeline is shorter. This allows you to deliver features more quickly, learn from their use, and decide where best to spend your time on enhancements.
-
How does a MiniApp compare to a website or hybrid/native web view?
The following chart outlines some of the trade-offs between the different solutions.
Website (via Webview)
Webview (Hybrid) / Native
MiniApp
Download Time
Runtime
Install
Runtime
Performance/Speed
Slowest *
Fastest
First Run – Slower
Second Run - Fastest
Data Download/Storage Policy
LARGEST - Downloaded @ Runtime
Flexible – only load what's used when its used.
SMALLEST – Downloaded @ Install
Inflexible (all partner services would need to be installed)
LARGE – Downloaded @ First Run
Flexible - only load what's used when its used.
Mobile Feature Integrations
Poor
Rich
Richest
Primary Development Responsibility
Partner
Mobile
Partner
Development Owner / Cost
Mobile: LOW, Partner: MED (Mobile optimization)
Mobile: HIGH, Partner: LOW (Enable Mobile)
Mobile: LOW (Define Interface), Partner: MED
Ease of Update
Easy
Hard
Easy
Operational Cost
Low
Highest
Low
-
What can I do with the Editor?
The editor allows you to create a MiniApp from scratch. It supports many basic UI elements for web apps and is tailored to the MiniApp experience. You can export your MiniApp from the editor and deploy those versions using the MiniApp Platform.
-
How do I publish a version from the Editor?
For now, you'll need to export the files from the editor. They will be downloaded as a .zip file. Unzip that folder on your machine. Then, in the MiniApp Platform, create a new version and select the folder that you unzipped and upload. Once you've got your "unpublished" version uploaded, you can choose to "publish" it.
-
Can I create my own template in the Editor?
Yes. The editor supports customizable templates. You can also save a template and re-use it.
-
How can using MiniApps accelerate my feature development?
MiniApps speed up development in two core ways. First, developing features in html/js/css is typically a faster process than native code. This is the core promise of any hybrid framework. Second, the deployment pipeline is shorter. This allows you to deliver features more quickly, learn from their use, and decide where best to spend your time on enhancements.
-
What is Rakuten App Studio (RAS)?
Rakuten App Studio is a Mobile development platform which aims to provide an easy-to-use ecosystem of Features to allow internal Rakuten developers to:
- Accelerate the development of their Mobile App development.
- Improve the quality of their apps.
- Leverage Rakuten data that cannot be hosted on third-party Mobile development platforms like Google Firebase or Fabric.io.
- Save Money as the Rakuten App Studio feature set are free of charge (Consult us if your app has heavy traffic so we can support you more efficiently)
RAS is currently for Rakuten SSO users only. We aim to open RAS for non Rakuten SSO users in 2022.
You can access RAS here: https://app-studio.miniapps.link.link/
-
I'm a Rakuten SSO User, how do I access Rakuten App Studio?
Open https://app-studio.miniapps.link.link/ and select SSO Login.
-
I'm NOT a Rakuten SSO User, how do I access Rakuten App Studio?
We are currently preparing the process for Non-Rakuten SSO Users. We will providing an update soon.
-
Can I access device storage for my MiniApp?
Yes, the MiniApp SDK provides access to protected device storage and sessions. Local browser storage & sessions are isolated to your application. You will not be able to share tokens via the browser in Chrome or Safari. This ensures that your data is protected and secured on the device.
-
Can my MiniApp use my own servers & backend APIs?
MiniApps can make use of many remote services, including your own servers & APIs for API specific requests. The less that needs to be loaded at run time, the faster your app will run. So keep this in mind and avoid server side rendering techniques.
-
How can I detect when a webview is opened from a MiniApp on my website?
So, you've got a link to your website in your MiniApp - maybe to your privacy policy, or to finalize some aspect of the user journey. Now you want to track the user in analytics or customize the experience based on the user having come from your MiniApp.
How will you know that the web view, browser window, or chrome tab that opens the site came from your MiniApp?
One simple way is by passing parameters with your link. In the following example, the GET parameter "referrer" is set to miniapp. You could set it as you desire, include a version name, or any other value.
https://www.example.com?referrer=miniapp
Then, on your site, you can add some code to handle the referral, either on the server or in JavaScript such as the following example
function getParam(name) { const params = window.location.search; if (params) { const param = params.substr(1).split("&") .map(param => param.split("=")) .find(pair => pair[0] === name) return param && param[1]; } else { return null; } } if (getParam("referrer") === "miniapp") { // display mini app content... }
-
Do I need different versions of my MiniApp for Android and iOS?
No. The platform doesn't limit you this way. The platform enables the same features between the two device sets with a few exceptions.
Specific host apps may implement different features by device type.
-
How big can MiniApps be?
MiniApp can be 30MB (Megabytes) on disk. As this is measured differently on different sized physical drives, the size on your local machine or remote storage may show slightly different values. A MiniApp that appears to be under that limit, may be over it. The safe choice is to target < 29MB on your disk to be sure.
-
What characters are allowed when setting the display name of a MiniApp Version?
The Display Name field accepts
· Kanji
· Hiragana
· Katakana
· Half space Kana
· Lowercase English a-z
· Uppercase English a-z
· Full Width Kana
· Numeric
· Space
Punctuation and Special Characters are not allowed.
-
What happens when I publish my MiniApp?
Your MiniApp will be deployed to the platform's production storage. Production Mobile Apps will be able to read your MiniApp as a part of the catalog and add it to their mobile apps.
-
What is the difference between my app name and the display name on each version?
The app name is for your reference. This name is only shown to you.
The name that host apps and their users will see is the "Display Name" set when uploading a version.
-
What types of files can be in my MiniApp Source?
Currently we support standard web app file types such as
- json
- js
- html
- css
- plist
- map
- Image File Types
- png
- jpg
- svg
- Audio File Types
- mp3
For a full list, check our developer's guide here.
-
How do I keep a user logged into a MiniApp from my Host App?
Unique / Permanent ID
This method allows a host app to provide an ID that can be trusted by the partner and linked to their own systems. Think Facebook ID as a parallel. These values are intended to be unique to the host+miniapp+user. However, the host may choose other scopes so long as it is unique and permanent.
Open ID
At this time, we allow passing of an Access Token to the MiniApp from a Host App. This token can be used to make requests if it has the appropriate scope. This method should only be used if the Rakuten MiniApp and Host App are using the same ID system with the same permission scope.
Open ID Connect
We are adding a function to pass an ID Token, which would then allow a service to authorize requests from their servers. This ID token is effectively an identity which they trust or verify via secondary methods.
Additionally, we could add a method to pass an Exchange Token for partners that share and ID system.
Generalized Cookie based Logins
With the Fetch API, authorization mechanisms that require cookies can be used by storing cookies locally to the MiniApp to authorize requests via the Fetch API. Coming sometime in the future.
-
Where can I find information about the JavaScript SDK for MiniApps?
Please refer to the guides in the JavaScript SDK on github here: https://github.com/rakutentech/js-miniapp.