웹앱 브라우져 [홈 화면에 추가] 기능 관련

React Native

웹앱 브라우져용으로 개발을 하고 있습니다.

당사 서비스 내에서 버튼을 만들고 해당 버튼을 누를 시 핸드폰 [홈 화면에 추가]를 하고 싶습니다.
하단 이미지 및 설명을 참고해주세요.

[이미지 참고]

[ AS-IS ]

현재는 웹브라우저 설정에 들어가서 사용자가 직접 [홈 화면에 추가]를 해야했습니다.

[ TO-BE ]

서비스내 버튼 클릭만으로 [홈 화면에 추가] 할수 있도록 구현

크롬, 사파리 , 파이어폭스 등 (IOS, Android) 브라우져에서 작동되어야 함.

[현재 프론트 개발환경]

React Native for Web

[ 질문 정리 ]

현재 PWA 방식을 사용하여 Android(Chrome)에서 서비스 내 버튼 클릭으로 [홈 화면에 추가]는 됐으나. IOS(Chrome, Safari)에서는 정상 작동되지 않는 현상이 있습니다. 즉 IOS에서는 수동으로 사용자가 추가해야 한다는 글들이 많은데 위 기능과 관련해서 다른 대체할 수 있는 방법이나 경험 공유해주시면 감사합니다.

7,400

dh8hh25

4년 전

댓글 4

겍코

iOS에서는 안드로이드만큼 PWA가 완벽하게 동작하지 않습니다.

다만 아래와 같은 몇 가지 방법을 통해 일정 부분 보완할 수 있습니다.

1. 앱 아이콘 적용하기

앱 아이콘처럼 보이게 하기 위해 link 태그에 apple-touch-icon 을 설정합니다.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

2. 시동 화면 만들기

홈 화면에 추가했더라도 기본적으로 앱처럼 시동 화면이 뜨지 않고 잠시 화면이 하얗게 보입니다.

시동 화면이 뜨게 하기 위해 head 태그에 다음과 같이 설정합니다.

<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="/apple_splash_2048.png" sizes="2048x2732" rel="apple-touch-startup-image" />
<link href="/apple_splash_1668.png" sizes="1668x2224" rel="apple-touch-startup-image" />
<link href="/apple_splash_1536.png" sizes="1536x2048" rel="apple-touch-startup-image" />
<link href="/apple_splash_1125.png" sizes="1125x2436" rel="apple-touch-startup-image" />
<link href="/apple_splash_1242.png" sizes="1242x2208" rel="apple-touch-startup-image" />
<link href="/apple_splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />
<link href="/apple_splash_640.png" sizes="640x1136" rel="apple-touch-startup-image" />

3. "홈 화면에 추가" 버튼 만들기

iOS에서는 안드로이드처럼 자동으로 홈화면 추가 버튼이 나타나지 않습니다.

아래와 같이 수동으로 예쁘게 팝업을 만들어 주어야 합니다.

(참고로 아이폰 사파리에서는 공유 버튼이 아래에 있지만 아이패드에서는 공유 버튼이 우측 상단에 있습니다)

여기서 주의하실 사항은 이 팝업은 사파리인 경우에만 뜨고 홈화면에서 실행한 경우에는 뜨면 안되기 때문에

자바스크립트로 window.navigator.standalone 이 false인 경우에만 뜨게 해야 합니다.

4. 화면 상태 유지

iOS에서는 백그라운드로 왔다갔다 할 때마다 웹앱의 페이지를 새로 읽게 됩니다.

그럴 때 페이지를 새로 읽지 않고 화면을 유지하도록 만들어야 하는데

다행히 React를 사용하시므로 아래 코드를 참고하실 수 있습니다.

import { ConnectedRouter, push } from 'react-router-redux';

class PersistedConnectedRouter extends ConnectedRouter {
  componentWillMount() {
    const { store: propsStore, history, isSSR } = this.props;
    this.store = propsStore || this.context.store;

    if (!isSSR) {
      this.unsubscribeFromHistory = history.listen(this.handleLocationChange);
    }

    //this is the tweak which will prefer persisted route instead of that in url:
    const location = this.store.getState().router.location || {};
    if (location.pathname !== history.location.pathname) {
      this.store.dispatch(push(location.pathname));
    }
    this.handleLocationChange(history.location);
    // --
  }
}

export default PersistedConnectedRouter;

5. 뒤로 버튼 구현

아이폰은 뒤로 가기 버튼이 없기 때문에 웹앱으로 구현한 경우 웹 페이지 상에 뒤로 가기 버튼이 빠지지 않았는지 체크해야 합니다.

그 밖에 iOS 웹앱에서는 백그라운드 작업이라든가 푸시, 회전 잠금 같은 것이 안되지만

그것들이 필요하지 않은 심플한 경우라면 위의 방법들로 어느 정도 커버할 수 있긴 합니다.

나열한 방법들이 도움이 되시길 바라겠습니다.

4년 전 ∙ 1 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

dh8hh25

친절한 답변 정말 감사합니다.

4년 전 ∙ 0 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

닥터핸

PWA는 구글에서 홍보하기 위한 용어이지 공식 용어는 아닙니다.

iOS가 그런 부분에서 제한이 많은 것으로 보이기는 하나 사실 웹앱을 처음으로 선보인 것은 iOS입니다.

iOS는 처음으로 스마트폰 홈화면에서 웹페이지가 전체화면으로 실행되는 방식을 제공했습니다.

현재 iOS는 지금의 HTML5 웹앱이 충분하다고 보기 때문에 PWA를 지원하는 것이 우선순위는 아닙니다.

따라서 현재로서는 iOS에서 구글의 PWA와 똑같은 형태를 반드시 구현해야 할 필요는 없을 것 같습니다.

즉, 그런 면에서 안드로이드와 iOS는 철학이 약간 다르다고 보시면 되겠습니다.

물론 PWA로 시장이 어떻게 바뀌냐에 따라 상황이 달라질 수는 있지만

아마도 아직 iOS 입장에서 PWA가 최선은 아닐 것 같습니다.