ios webapp은 모바일사파리에서 홈화면에 추가를 하면 되는데 이때 메타 태그에 있는 정보를 이용하여 구성한다.

issue

스플래시(splash) 이미지 로드

정확히 이미지 사이즈가 맞지 않으면 로드가 되지 않는다.
각 화면 사이즈 별로 이미지를 로드하게 해야 한다.
화면 사이즈별 태그 방식은 다음 링크를 참고하면 된다.
https://gist.github.com/tfausak/2222823

app 전환 후 다시 webapp으로 이동시 cookie가 유지 되지 않는다.

다행이 local storage 는 유지를 한다.
local storage를 활용해서 cookie를 백업하는 방식으로 접근했다.

로그인시

cookie를 local storage에 저장

로그아웃시

local storage도 비운다.

webapp 로드시

cookie가 없고 local storage에 저장된 데이터가 있다면 cookie 에 복원한다.

javascript에서 cookie가 보이지 않는다.

expressjs 기준으로 설명을 한다.
보통 보안상 session을 사용하는 경우 http request상에서만 cookie를 주고 받는다.
javascript에서 이 cookie에 접근을 하고 싶을 경우 서버 쪽 설정을 변경해야 한다.

app.use(session({
  name: 'some_name',
  store: new RedisStore({
    host: config.redis.host,
    db: 3,
    prefix: 'some_name:'
  }),
  secret: config.sessionSecret,
  cookie: {
    httpOnly: false
  }
}));

cookie 옵션에 httpOnly: false으로 옵션을 설정한다.

url 주소가 변경되면 mobile safari로 페이지가 뜬다.

요즘은 인증을 하기 위해서 외부인증을 이용하는데 이때 주소가 변경되면서 mobile safari를 띄운다.
이 부분을 막는 방법을 공유한다.

mobile safari로 뜨는 것을 막기 위해서는 location.href 속성을 이용해서 페이지 주소를 변경 시키는 것이다.
보통 a태그의 기본 동작을 취소 시키고 a 태그에 있는 href 속성을 읽어서 location.href 속성을 변경시켜서 페이지 이동을 한다.

위 처럼 하면 facebook 이나 kakao 인증 모두 잘 동작한다.
오히려 js sdk를 이용해서 인증을 하게 되면 새로운 팝업을 띄우는 방식이라서 원래 화면으로 돌아가지 못하는 이슈가 있으니 꼭 서버 로그인 방식을 이용하기 바란다.

angularjs directive version

  directive('naLinkByLocation', ['$window', function($window) {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        //  Mobile Safari in standalone mode
        if(("standalone" in $window.navigator) && $window.navigator.standalone) {
          element.click(function(event) {
            event.preventDefault();
            $window.location.href = attrs.href;
          });
        }
      }
    };
  }]).  

  <a class="btn btn-primary btn-sm" href="/api/auth/kakao" target="_self" data-na-link-by-location data-ng-if="!isLogin" data-ng-cloak>kakao login</a>