danhvb Mobile/Web Domain Knowledge Skill
Purpose
Provide comprehensive knowledge for analyzing requirements in mobile and web application projects, covering platform differences, UX patterns, and technical considerations.
Application Types
Web Applications
Static Website: HTML/CSS, no server logic Single Page App (SPA): Client-side rendering (React, Vue, Angular) Server-Side Rendering (SSR): Server renders HTML (Next.js, Nuxt) Progressive Web App (PWA): Web app with native-like features
Mobile Applications
Native: Platform-specific (Swift/iOS, Kotlin/Android) Cross-Platform: Single codebase (React Native, Flutter) Hybrid: Web in native container (Ionic, Cordova) PWA: Web app installable on mobile
Comparison
| Aspect | Native | Cross-Platform | PWA |
|---|---|---|---|
| Performance | Best | Good | Good |
| Device Access | Full | Most | Limited |
| Development Cost | High (2 codebases) | Medium | Low |
| App Store | Required | Required | Optional |
| Update Speed | App store review | App store review | Instant |
| Offline | Full | Full | Limited |
Platform Requirements
iOS Considerations
- Swift/Objective-C or React Native/Flutter
- iOS 15+ support (recommended)
- App Store guidelines compliance
- Apple Sign-In required if social login
- Face ID/Touch ID for authentication
- Push notifications via APNs
- In-app purchases via Apple (30% fee)
- Privacy nutrition labels
Android Considerations
- Kotlin/Java or React Native/Flutter
- Android 12+ support (recommended)
- Google Play Store guidelines
- Material Design principles
- Fingerprint/biometric authentication
- Push notifications via FCM
- Multiple screen sizes/densities
- Permissions model
Web Considerations
- Browser compatibility (Chrome, Safari, Firefox, Edge)
- Responsive design (mobile-first)
- Accessibility (WCAG 2.1 AA)
- SEO requirements
- Performance (Core Web Vitals)
- Progressive enhancement
Common Requirements Patterns
Authentication
Requirements:
REQ-AUTH-001: User shall login with email and password
REQ-AUTH-002: User shall login with social accounts (Google, Facebook, Apple)
REQ-AUTH-003: User shall use biometric authentication (Face ID, Touch ID, Fingerprint)
REQ-AUTH-004: Session shall expire after 30 minutes of inactivity
REQ-AUTH-005: User shall reset password via email link
Security Considerations:
- Secure token storage (Keychain/Keystore)
- Certificate pinning
- HTTPS only
- OAuth 2.0/OIDC standards
- Rate limiting
Offline Functionality
Levels of Offline Support:
Level 1: Read-only Cache
- View previously loaded data
- No modifications offline
- Simple implementation
Level 2: Optimistic Updates
- View cached data
- Make changes offline
- Sync when online
- Conflict resolution needed
Level 3: Full Offline
- Complete feature set offline
- Queue all actions
- Complex sync logic
- Background sync
Requirements Example:
REQ-OFFLINE-001: App shall cache last 50 orders for offline viewing
REQ-OFFLINE-002: App shall indicate offline status to user
REQ-OFFLINE-003: App shall queue actions when offline
REQ-OFFLINE-004: App shall auto-sync when connection restored
REQ-OFFLINE-005: App shall notify user of sync conflicts
Push Notifications
Types:
- Transactional: Order updates, password reset
- Marketing: Promotions, recommendations
- Re-engagement: Cart abandonment, inactive user
Requirements:
REQ-PUSH-001: User shall receive order status notifications
REQ-PUSH-002: User shall opt-in to marketing notifications
REQ-PUSH-003: Notification shall deep-link to relevant screen
REQ-PUSH-004: User shall manage notification preferences in settings
Technical:
- iOS: APNs (Apple Push Notification service)
- Android: FCM (Firebase Cloud Messaging)
- Web: Web Push API
Performance Requirements
Mobile Performance:
REQ-PERF-001: App shall launch in < 2 seconds (cold start)
REQ-PERF-002: Screen transitions shall complete in < 300ms
REQ-PERF-003: API responses shall complete in < 2 seconds
REQ-PERF-004: App shall maintain 60 fps during scrolling
REQ-PERF-005: Crash rate shall be < 1%
Web Performance (Core Web Vitals):
REQ-PERF-010: LCP (Largest Contentful Paint) < 2.5 seconds
REQ-PERF-011: FID (First Input Delay) < 100ms
REQ-PERF-012: CLS (Cumulative Layout Shift) < 0.1
REQ-PERF-013: TTI (Time to Interactive) < 3.8 seconds
Responsive Design
Breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Requirements:
REQ-RESP-001: Layout shall adapt to screen sizes 320px to 2560px
REQ-RESP-002: Touch targets shall be minimum 44x44 pixels on mobile
REQ-RESP-003: Content shall be readable without horizontal scroll
REQ-RESP-004: Images shall use responsive sizing (srcset)
Accessibility (WCAG 2.1)
Requirements:
REQ-A11Y-001: All images shall have alt text
REQ-A11Y-002: Color contrast ratio shall be 4.5:1 minimum
REQ-A11Y-003: All interactive elements shall be keyboard accessible
REQ-A11Y-004: Form fields shall have visible labels
REQ-A11Y-005: Error messages shall be associated with fields
REQ-A11Y-006: App shall support screen readers (VoiceOver, TalkBack)
Key UX Patterns
Navigation
- Tab bar (mobile): 3-5 main sections
- Hamburger menu: Secondary navigation
- Bottom sheets: Contextual actions
- Modal dialogs: Focused tasks
Forms
- Single column layout (mobile)
- Keyboard type matching input
- Inline validation
- Clear error messages
- Progress indicators for multi-step
Loading States
- Skeleton screens
- Pull to refresh
- Infinite scroll vs pagination
- Optimistic UI updates
Gestures (Mobile)
- Tap: Primary action
- Long press: Secondary menu
- Swipe: List actions, navigation
- Pinch: Zoom
App Store Considerations
App Store (iOS)
- Review time: 24-48 hours
- Human review for initial submission
- Reject reasons: bugs, crashes, guideline violations
- Required: Privacy policy, age rating
- In-app purchases: 15-30% commission
Google Play (Android)
- Review time: Few hours to days
- Automated + human review
- Required: Privacy policy, age rating
- In-app purchases: 15-30% commission
Common Rejection Reasons
- Crashes or bugs
- Incomplete functionality
- Privacy issues
- Guideline violations
- Misleading metadata
- Broken links
Analytics & Tracking
Key Events:
- App install/open
- Screen views
- Feature usage
- Conversion events
- Errors/crashes
Tools:
- Firebase Analytics
- Mixpanel
- Amplitude
- App Store Connect / Google Play Console
Questions for Stakeholders
- Native vs cross-platform vs PWA?
- Which platforms and versions to support?
- Offline functionality needed?
- Push notification use cases?
- Performance expectations?
- Accessibility requirements?
- App store presence required?
- Analytics requirements?
References
- Apple Human Interface Guidelines
- Material Design Guidelines
- Web Content Accessibility Guidelines (WCAG)
- Core Web Vitals Documentation