Mobile Web Support
The Adobe Express Embed SDK supports mobile web out of the box, allowing developers to implement creative workflows on mobile devices.
What is Mobile Web Support?
The Adobe Express Embed SDK natively supports mobile web browsers, enabling developers to implement creative workflows across desktop and mobile devices. Mobile web support allows your applications to work seamlessly on smartphones, tablets, and other mobile devices through web browsers.
When to Use Mobile Web Support
Mobile web support is ideal for applications that need to reach users across all devices. Consider implementing mobile web support when:
- Building responsive applications: Your application needs to work seamlessly on both desktop and mobile devices
- Targeting mobile-first audiences: Your users primarily access your application through mobile devices
- Creating cross-platform experiences: You want consistent creative workflows across different screen sizes and input methods
- Supporting diverse browser environments: Your users may be on various mobile browsers with different capabilities
- Expanding user reach: You want to make creative tools accessible to users regardless of their device
Prerequisites
Before implementing mobile web support, you should have a solid understanding of the basic Adobe Express Embed SDK integration. We recommend completing the following resources first:
- Quickstart Guide: Learn the fundamentals of SDK integration, including setup, initialization, and basic configuration
- Getting Started Tutorial: Follow a hands-on tutorial to build your first integration
- SDK Tutorials: Explore additional tutorials for specific workflows like Generate Image and Edit Image modules
Mobile web support builds upon these core concepts, so familiarity with standard SDK integration is essential before adding mobile-specific configurations.
How to Implement Mobile Web Support
The Adobe Express Embed SDK works on mobile web by default. The skipBrowserSupportCheck
parameter is specifically designed to bypass browser compatibility checks that might otherwise cause the SDK to fail initialization on mobile browsers.
Implementation Path
🎯 Quick Start
Perfect for getting mobile web support working immediately:
- Set
skipBrowserSupportCheck: true
- Add basic mobile detection
- Configure container sizing
🔧 Standard Implementation
For production-ready mobile experiences:
- Add dynamic loading with error handling
- Implement performance optimizations
- Configure mobile-specific UI elements
🚀 Advanced Features
For optimized, custom mobile experiences:
- Custom UI patterns for mobile
- PWA integration
Module Compatibility
While the Adobe Express Embed SDK works well across all workflows on mobile web, this section focuses on the Generate Image and Edit Image modules as they represent the most common use cases for mobile implementations.
Generate Image Module
The Generate Image module works well on mobile web with full functionality:
- Generate image from text
- Export options
- All standard such as styles, content types, etc.
- Rich Preview: Not available on mobile phones, but available on tablets
- Prompt Bar suggestions: Not available
Edit Image Module
The Edit Image module is possible on mobile web but may have some limitations:
- Basic editing features such as crop, remove background, etc. work
- Some advanced features such as export options may have issues
- Performance may vary based on device capabilities
- Touch interface optimizations may be limited on mobile phones
Configuration
🚀 Quick Setup (Recommended)
Get mobile web support working in minutes
Copied to your clipboardconst hostInfo = {clientId: "your-client-id", // Your application client IDappName: "your-app-name", // Your application name};// Skip browser compatibility checks for mobile webconst configParams = {skipBrowserSupportCheck: true // 👈 Skip browser checks to prevent failures};// Initialize the Adobe Express Embed SDKconst { editor, module, quickAction } = await window.CCEverywhere.initialize(hostInfo,configParams);
Use skipBrowserSupportCheck: true
to bypass browser compatibility checks and prevent SDK initialization failures on mobile browsers.
⚙️ Advanced Configuration
For developers who need custom mobile optimizations
Copied to your clipboardconst hostInfo = {clientId: "your-client-id",appName: "your-app-name",appVersion: { major: 1, minor: 0 },platformCategory: "web" // Required for applications};const configParams = {skipBrowserSupportCheck: true, // Skip browser checks for mobile weblocale: "en_US", // Optional: Set localeloginMode: "delayed" // Optional: Delay login until export};// Initialize with browser check bypassconst { editor, module, quickAction } = await window.CCEverywhere.initialize(hostInfo,configParams);
Understanding Browser Support
Standard Browser Requirements
By default, the Adobe Express Embed SDK has specific technical requirements for optimal performance. For complete details on browser versions, hardware requirements, and system specifications, see the Technical Requirements guide.
Mobile Browser Considerations
Mobile browsers may have limitations that affect SDK functionality:
- Performance: Limited processing power and memory
- WebGL support: May be limited or unavailable
- Touch interfaces: Different interaction patterns
- Screen size: Smaller display areas
- Network conditions: Variable connectivity
Implementation Strategies
Choose the approach that best fits your application:
Strategy | Purpose | Complexity | Mobile Impact | When to Use |
---|---|---|---|---|
Apply mobile configs automatically | Low | High | Every mobile implementation | |
Optimize UI for mobile screens | Low | High | Essential for good UX | |
Handle loading failures gracefully | Medium | Medium | Production applications | |
Custom touch interfaces | High | High | Advanced customization |
Essential Strategies (Start Here)
Mobile Detection and UI Configuration ⭐ Essential
Necessary to apply mobile-specific configurations only when needed, preventing desktop users from getting suboptimal mobile UI.
Implement sophisticated mobile detection:
Copied to your clipboard// Advanced mobile detection functionfunction isMobileOrTablet() {const viewportWidth = window.innerWidth;const userAgent = navigator.userAgent;const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);const MIN_DESKTOP_WIDTH = 768;return isMobileDevice && viewportWidth < MIN_DESKTOP_WIDTH;}// Mobile UI toggle supportconst urlParams = new URLSearchParams(window.location.search);const forceMobileUI = urlParams.get('forceMobileUIOnDesktop') === 'true';const enableMobileUi = isMobileOrTablet() || forceMobileUI;const configParams = {skipBrowserSupportCheck: enableMobileUi, // Skip browser checks for mobile UIlocale: "en_US"};try {const { editor, module, quickAction } = await window.CCEverywhere.initialize(hostInfo,configParams);// Mobile-specific optimizationsif (enableMobileUi) {configureMobileExperience(editor, module, quickAction);}} catch (error) {console.error("SDK initialization failed:", error);// Handle initialization failure gracefully}
Mobile UI Container Sizing ⭐ Essential
Necessary to ensure the SDK interface fits properly on smaller mobile screens and provides optimal user experience across devices.
Quick Start: Use
{ width: 390, height: 850, unit: 'px' }
for mobile container sizing
Complete implementation example:
Copied to your clipboard// Mobile container constantsconst DEFAULT_MOBILE_SIZE = { width: 390, height: 850, unit: 'px' };const MIN_DESKTOP_WIDTH = 768;const getMobileConfig = () => {const isMobile = window.innerWidth < MIN_DESKTOP_WIDTH;return {skipBrowserSupportCheck: true,// Mobile-specific optimizations...(isMobile && {// Use mobile container sizingcontainerSize: DEFAULT_MOBILE_SIZE,// Limit features for mobileallowedFileTypes: ['image/png', 'image/jpeg'], // Skip video/PDF on mobile})};};// Platform category detection for applicationsconst ccEverywhereConfig = {hostInfo: {...hostInfo,platformCategory: 'web' // applications always use 'web' platform},configParams: getMobileConfig()};const { editor, module, quickAction } = await window.CCEverywhere.initialize(ccEverywhereConfig.hostInfo,ccEverywhereConfig.configParams);
Advanced Strategies
Dynamic SDK Loading
Necessary to handle SDK loading failures gracefully and provide feature detection before attempting to use SDK functionality.
Quick Start: Add try-catch around SDK initialization and check feature availability before use
Complete implementation example:
Copied to your clipboard// Dynamic SDK importasync function loadSDK() {try {// Load SDK dynamically for applicationslet CCEverywhere = await import(`cc-everywhere-test-app/3p/CCEverywhere`);const configParams = {skipBrowserSupportCheck: true};const { editor, module, quickAction } = await CCEverywhere.initialize(hostInfo,configParams);// Check if features are availableif (module && typeof module.createImageFromText === 'function') {// Enable text-to-image features in your UI// Add your own code here to enable text-to-image functionalitydocument.getElementById('generate-image-btn').style.display = 'block';console.log('Text-to-image generation available');} else {// Provide fallback for limited mobile supportdocument.getElementById('generate-image-btn').style.display = 'none';document.getElementById('feature-message').textContent = 'Some features are not available on your device';console.log('Limited feature set available on this device');}return { editor, module, quickAction };} catch (error) {console.error("SDK loading failed:", error);// Handle SDK loading failurereturn null;}}
Mobile UI Implementation Pattern
Necessary to provide different UI layouts and interactions optimized for touch interfaces and smaller screens.
Implement conditional rendering for mobile UI:
Copied to your clipboard// Mobile UI conditional renderingfunction renderMobileUI(enableMobileUi) {if (enableMobileUi) {// Mobile-specific layoutreturn {containerSize: DEFAULT_MOBILE_SIZE,navigation: 'mobile', // Use mobile navigationsidebar: 'overlay', // Overlay sidebar on mobilelayout: 'responsive'};} else {// Desktop layoutreturn {containerSize: { width: '100%', height: '600px' },navigation: 'desktop',sidebar: 'persistent',layout: 'fixed'};}}// Apply mobile UI configurationconst mobileConfig = renderMobileUI(enableMobileUi);const appConfig = {...mobileConfig,callbacks: {onPublish: (intent, publishParams) => {// Handle mobile-specific publishinghandleMobilePublish(publishParams);}}};
Best Practices
1. Graceful Degradation
Always provide fallback experiences for when mobile web support is limited. Implement proper error handling and alternative experiences when the SDK fails to initialize on mobile devices.
2. User Experience Considerations
Design your mobile experience with these considerations:
- Touch-friendly interfaces: Ensure buttons and controls are appropriately sized for finger interaction
- Loading states: Show clear feedback during SDK initialization and processing
- Error handling: Provide helpful, mobile-specific error messages for users
- Offline considerations: Handle network connectivity issues gracefully with appropriate messaging
- Responsive design: Ensure your interface adapts well to different mobile screen sizes
- Performance feedback: Indicate when operations may take longer on mobile devices
Common Use Cases
1. Social Media Content Creation
The Generate Image module works well on mobile web, making it perfect for social media content creation. Key considerations for this use case:
- Mobile-optimized container sizing: Use responsive dimensions that work well on mobile screens
- Touch-friendly export options: Implement easy-to-tap sharing buttons
- Prompt handling: Allow users to easily input text prompts on mobile keyboards
2. Mobile Photo Editing
The Edit Image module is possible on mobile web but may have some limitations. Important considerations:
- Performance expectations: Basic editing features work well, but advanced features may be slower
- Touch interface: Ensure editing controls are optimized for finger interaction
- File size limits: Consider limiting input image sizes for better mobile performance
- Simplified workflows: Focus on essential editing features rather than complex operations
3. Progressive Web App Integration
Integrate with progressive web apps for enhanced mobile experiences:
- Service worker integration: Register service workers for offline capabilities
- App-like experience: Use standalone display mode detection for PWA-specific optimizations
- Delayed login: Implement delayed authentication for better offline scenarios
- Mobile UI patterns: Apply mobile-specific layouts when running as a PWA
- Installation prompts: Guide users to install your PWA for better mobile access
Troubleshooting
Common Issues
SDK fails to initialize on mobile
- Ensure
skipBrowserSupportCheck: true
is set - Check for JavaScript errors in mobile browser console
- Verify network connectivity
Poor performance on mobile devices
- Limit file types to lighter formats (PNG/JPEG instead of PDF/MP4)
- Use
loginMode: "delayed"
to reduce initial load - Implement proper loading states
Features not working as expected
- Test feature availability before using
- Implement graceful fallbacks
- Provide user feedback for unsupported features
Debugging Tips
Copied to your clipboardconst debugMobileSupport = async () => {console.log('User Agent:', navigator.userAgent);console.log('Screen Size:', window.innerWidth, 'x', window.innerHeight);console.log('WebGL Support:', !!window.WebGL2RenderingContext);try {const { editor, module, quickAction } = await window.CCEverywhere.initialize(hostInfo,{ skipBrowserSupportCheck: true });console.log('SDK initialized successfully');console.log('Available features:', {editor: !!editor,module: !!module,quickAction: !!quickAction});// Log app config for debuggingconsole.log('App Config:', appConfig);// Log export config for debuggingconsole.log('Export Config:', exportConfig);} catch (error) {console.error('SDK initialization failed:', error);}};
Migration from Desktop-Only
If you're adding mobile web support to an existing desktop application:
1. Update Configuration
Copied to your clipboard// Before: Desktop-onlyconst configParams = {locale: "en_US"};// After: Mobile web supportconst configParams = {skipBrowserSupportCheck: true, // Add this linelocale: "en_US"};
2. Add Mobile Detection
Copied to your clipboardconst isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);const configParams = {skipBrowserSupportCheck: isMobile, // Conditional mobile supportlocale: "en_US"};
3. Implement Fallbacks
Copied to your clipboardconst initializeWithFallback = async () => {try {const sdk = await window.CCEverywhere.initialize(hostInfo, configParams);return sdk;} catch (error) {if (isMobile) {// Show mobile-specific error messageshowMobileErrorMessage();} else {// Show desktop error messageshowDesktopErrorMessage();}throw error;}};
Related Resources
- Getting Started with Adobe Express Embed SDK
- Technical Requirements
- Initialize SDK Reference
- Editor Customization
- Error Handling