_transient Activation: iPhone에서 복사 버튼이 작동하지 않는 이유

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, 특히 iOS 및 크로스브라우징 호환성 문제 해결을 위한 개발자

핵심 요약

• Clipboard API 사용 시 iOS(Safari)의 Transient Activation 제한으로 인해 복사 기능이 작동하지 않음
• writeText() 호출이 사용자 상호작용 후 Transient Activation 윈도우 내에서 실행되지 않으면 오류 발생
• 복사 동작을 별도 버튼으로 분리하여 사용자 직접 클릭을 유도하는 것이 해결 방법

섹션별 세부 요약

1. 문제 상황

• 사용자가 설정을 업데이트 후 생성된 링크를 복사하는 기능이 iPhone에서만 실패
• navigator.clipboard.writeText() 호출 시 NotAllowedError 발생
• 크롬에서는 정상 작동했으나 Safari에서만 문제가 발생

2. 코드 분석

• saveSetting API 호출 후 writeText()를 통해 복사 시도
• Promise 기반 비동기 처리로 인해 사용자 상호작용 후 Transient Activation 윈도우를 벗어남

3. 원인 분석

• Safari는 Transient Activation 윈도우(사용자 상호작용 후 약 1초 내)에서만 writeText() 허용
• saveSetting API 호출이 비동기로 인해 Transient Activation 윈도우를 벗어남
• 크롬은 clipboard-write 권한이 필요하지만 Safari는 Transient Activation 제한으로 인해 작동하지 않음

4. 해결 방안

• 복사 기능을 별도 버튼으로 분리하여 사용자 직접 클릭 유도
• 복사 버튼은 saveSetting 완료 후만 활성화

결론

• iOS 및 Safari에서 Clipboard API 사용 시 Transient Activation 윈도우 내에서 동작해야 함
• 복사 기능을 별도 버튼으로 분리하여 사용자 상호작용을 보장하는 것이 권장됨
• 크로스브라우징 테스트와 E2E 테스트에서 Safari를 반드시 포함해야 함