[Framework7] 안드로이드 환경에서 백버튼 앱처럼 동작하게 하기

 

기존의 프레임워크7 웹앱을 안드로이드에서 구동시킬 때 백버튼을 누르면 앱이 종료되는 문제가 있었습니다.

안드로이드 사용자는 대부분 앱 사용시 백버튼을 습관처럼 사용하기 때문에 이를 잡아주는 것이 중요했는데요.

안드로이드 네이티브 코드에서 모바일 백버튼을 웹에서 백버튼과 동일시 하기 때문에

웹의 백버튼을 js로 컨트롤 해주면 해당 마치 실제 앱처럼 백버튼을 잡을 수 있습니다.

먼저 pushState가 페이지가 넘어갈 때 마다 쌓이도록 합니다.

var app  = new Framework7({
      on: {
            pageInit(page) {
             window.history.pushState('forward', null, '/#' + page.name);
        }
    }
  }
});

이렇게 하면 문제점이 하나 있습니다. 다른 페이지로 넘어 갈 때마다 쌓이긴 하지만, 다시 root_path 로 돌아오는 경우에 pushstate history가 남아있지 않아 앱이 종료 되게 됩니다.

이를 해결해주기 위해 root_path 의 view 파일아래에 스크립트로 코드를 넣어줍니다.

 window.history.pushState('forward', null, '/#' + $('.page-current').data('name')); 

이렇게 처리 됐다면 푸시스테이트 히스토리를 쌓아주고 이를 웹의 백버튼을 누를 때마다 페이지는 벗겨주는 느낌으로 코드를 작성하시면 됩니다.

저는 _app.html.erb 파일에

jQuery(document).ready(function($) {
  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      console.log('popstate');

      if (($$('#leftpanel').hasClass('active')) || ($$('.panel').hasClass('panel-active'))) {
        app.panel.close();
      }
      else if ($$('.modal-in').length > 0) {
        app.dialog.close();
        app.popup.close();
      }
      else if ($(".page-current").data("name") == 'home-index') {
        window.history.back();
      }
      else {
        console.log('back');
        mainView.router.back();
      }
    });
  }
});

이렇게 작성해주었습니다.

dialog 나 photoBrowser , popup, panel 등이 모바일에 떠있을 때 백버튼을 누르면 삭제시켜주거나 뒤로가기를 눌렀을 때 앱이 종료되는 것이아닌 쌓여있던 이전의 history page로 넘어가게끔 했습니다.

이렇게 코드를 작성하시면 정말 안드로이드 네이티브 느낌이 나는 Framework7을 이용하실 수 있습니다.