7 Real-World Pitfalls Building a Hotwire Native Mobile App with Rails 8 — CSP, Turbo Conflicts, and Performance

If you’re building a mobile app with Hotwire Native and Rails 8, you’ll eventually hit issues that don’t show up in development but break things in production — especially on real iOS devices running inside WKWebView. This post documents 7 real-world pitfalls I encountered while shipping a tournament management app (Turbo + Stimulus + ERB + Tailwind CSS 4) as a Hotwire Native iOS app. Each issue includes the symptom, root cause analysis, fix, and lessons learned. ...

2026-03-21 · 9 min read · Seunghan

Rails 8 + Hotwire Native iOS — Real-time Notification Badge & Side Menu Navigation

Two problems solved while building a Rails 8 + Hotwire Native iOS app. Real-time notification badge — instantly update the app icon badge and bell button the moment a notification is created on the server Side menu navigation failure — correctly navigate to URLs that require dynamic parameters like a resource ID 1. Background Notification Badge Without setting the badge field in APNs push notifications, no number appears on the iOS app icon. And even when notifications are read, the badge doesn’t clear. ...

2026-03-17 · 5 min read · Seunghan

Role-Based UI Separation and Mobile Optimization in a Rails 8 + Hotwire Native App

Running an iOS app built with Rails 8 + Hotwire Native, I hit a series of issues in a single day. What started as a small UI distortion spiraled into a full permission system redesign. Here’s the record. 1. Card Images Distorted in Mobile WebView Symptom Tournament discovery cards looked fine in a desktop browser, but badges and icons were squished inside the iOS app’s WKWebView (375px viewport). Root Cause The deployed view used a desktop-first layout (max-w-[1400px], responsive grid). The WKWebView rendered all of it in 375px, causing badge overlap. ...

2026-03-17 · 4 min read · Seunghan
Rails Sso Universal Links Hotwire Native

Rails SSO Implementation + iOS Universal Links for Automatic App Switching

두 개의 Rails 8 서비스가 있다. 하나는 메인 앱(IdP 역할), 다른 하나는 연동 서비스(RP 역할). 연동 서비스 로그인 페이지에 “메인 앱으로 로그인” 버튼을 넣고, SSO로 인증 후 돌아오는 플로우를 구현했다. 거기에 iOS Hotwire Native 앱이 설치돼 있으면, 브라우저 대신 네이티브 앱에서 인증이 진행되도록 Universal Links까지 붙였다. 목표 플로우 [연동 서비스] "메인 앱으로 로그인" 클릭 → 메인 앱 /auth/sso/authorize 로 리다이렉트 → (앱 설치 시) iOS Universal Link → 네이티브 앱 열림 → (미설치 시) 브라우저에서 로그인 → 이미 로그인 상태면 바로 토큰 발급 → 미로그인이면 OTP 로그인 → 토큰 발급 → "인증 완료" 페이지 (2초 대기) → 콜백 URL로 리다이렉트 → 연동 서비스가 토큰 검증 → 로그인 완료 삽질 1: SSO 파라미터가 로그인 과정에서 유실됨 Problem SSO authorize 엔드포인트에 before_action :require_authentication을 걸어놨더니: ...

2026-02-17 · 7 min read · Seunghan
Hotwire Native Ios Tab Bar Patterns

Hotwire Native iOS Tab Bar App — HotwireTabBarController Implementation and Debugging

Here are the problems encountered when switching from a single Navigator to the HotwireTabBarController pattern while wrapping a Rails app with Hotwire Native. Bugs that were invisible in the simulator surfaced on TestFlight, and local dev environment settings got tangled – multiple points where time was wasted. 1. HotwireTabBarController Basic Structure Instead of a single Navigator, each tab has its own independent Navigator and WKWebView. // AppTab.swift enum AppTab: String, CaseIterable { case home, ai, request var systemImage: String { switch self { case .home: return "house" case .ai: return "message" case .request: return "checkmark.circle" } } var selectedSystemImage: String { switch self { case .home: return "house.fill" case .ai: return "message.fill" case .request: return "checkmark.circle.fill" } } var url: URL { let base = AppDelegate.baseURL switch self { case .home: return base.appendingPathComponent("dashboard") case .ai: return base.appendingPathComponent("conversations") case .request: return base.appendingPathComponent("service_requests") } } var hotwireTab: HotwireTab { HotwireTab( title: "", image: UIImage(systemName: systemImage)!, selectedImage: UIImage(systemName: selectedSystemImage)!, url: url ) } } // SceneController.swift core part private lazy var tabBarController: HotwireTabBarController = { let controller = HotwireTabBarController(navigatorDelegate: self) controller.load(AppTab.allCases.map(\.hotwireTab)) // Show only tab icons, remove text controller.viewControllers?.forEach { vc in vc.tabBarItem.title = nil vc.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0) (vc as? UINavigationController)?.delegate = self } return controller }() To remove tab titles and keep only icons, both tabBarItem.title = nil and imageInsets adjustment are needed. Setting only title to nil leaves the icon position unchanged, looking awkward. ...

2025-12-26 · 6 min read · Seunghan
Hotwire Native Webview 8 Fixes

Hotwire Native WebView Debugging Collection — 8 Common Issues When Wrapping Rails WebView in Native Apps

When wrapping a Rails app with Hotwire Native (Turbo Native) to build iOS/Android native apps, there are quite a few things that work fine in the browser but behave strangely in WebView. Here are the issues encountered during actual development and the fixes applied, all in one place. Most can be resolved with a few lines of CSS or one line in the path configuration JSON. 1. Double-Tap Zoom / 300ms Click Delay Symptoms Double-tapping a button quickly zooms the screen. Even a single tap feels slightly delayed (about 300ms). ...

2025-11-25 · 5 min read · Seunghan
Privacy Policy Terms Disclaimer Contact