Guidelines for Developing on Tawasal Platform
This guide provides a comprehensive framework for developing Mini Apps on the Tawasal Platform. Adherence to these guidelines is essential for a seamless integration of your Mini App into the Tawasal ecosystem.
Overview
| Don’t | Why |
|---|---|
| ❌ Load slowly | Aim for a native-like experience. Target a score of at least 90 on PageSpeed Insights |
| ❌ Require users to create an account | Use the extensive User Data we provide to treat Mini App users as your own |
| ❌ Use input fields smaller than 16 pixels in height | Prevents webview from zooming in |
| ❌ Promote other apps within the Mini App | Keeps the focus on the functionality of the current Mini App |
The Tawasal Platform can be easily integrated into your existing web app with minimal changes.
However, these guidelines are crucial for delivering a native-like Mini App experience.
Performance
Quick Loading Times
- Strive for high performance, targeting at least a 90 score on Google PageSpeed Insights.
- Utilize techniques like code-splitting, lazy loading, and asset optimization to minimize loading times.
User Experience
No Account Requirement
- The platform provides extensive User Data so there’s no need for users to create a separate account.
- Use the user IDs and tokens that we pass on to operate your Mini App.
Minimum Input Size
- Set input fields to a minimum height of 16 pixels to prevent the webview from zooming in.
Navigation in Mini Apps
Close Button Customization
Mini App developers are responsible for rendering the close button icon within their applications. This ensures a consistent user experience across the Tawasal Platform.
Specifications
- The touch target area for the close button must be 44x44 pixels to ensure accessibility and ease of use.
- The close button icon itself should be 30x30 pixels, providing clear visibility while maintaining a non-intrusive presence.
- Developers must call the
window.tawasal.closeApp()function to trigger the closing of the Mini App. - The close button can be positioned either on the left or the right side of the app interface, according to the design of the Mini App.
- The close button must only be functional from the main page of the Mini App.
Back Navigation
- Mini Apps must provide users with a clear and intuitive method to navigate back to the main page.
- Include a ‘Back’ button or breadcrumbs when users navigate away from the main page, ensuring they can easily find their way back to close the app if desired.
Implementation
- Ensure the close button is easily accessible and visible to users on the main page.
- Maintain the touch target and icon size specifications for optimal usability.
- Implement a ‘Back’ button to facilitate easy navigation to the main page.
- Test the navigation thoroughly, including the ‘Back’ functionality and the closing mechanism from the main page.
Examples
Here’s a visual representation of how the close button and the ‘Back’ navigation should appear within a Mini App.
You can check implementations of it in our repository
Adhering to these navigation guidelines is crucial for providing users with a smooth and integrated experience within the Tawasal Platform. It ensures that users can efficiently close the Mini App from the main page and navigate back to it when they are in different sections of the Mini App.
Other Requirements
No Promotion of Standalone Apps
- Keep the focus on the functionality of your current Mini App and refrain from promoting other apps or services.