Skip to content

Latest commit

 

History

History
93 lines (82 loc) · 5.8 KB

webview_v1.md

File metadata and controls

93 lines (82 loc) · 5.8 KB
Raw

웹뷰 (BETA)

composite_message

웹뷰는 모바일 채팅창을 벗어나지 않은 채 다른 웹페이지를 여는 기능입니다. 채팅 메시지 형태로 구현하기 어려운 기능을 사용자에게 웹페이지로 제공할 수 있습니다.

실험적 기능

웹뷰는 실험적으로 적용한 기능입니다. 경우에 따라 세부 기능과 가이드 문서가 수시로 변경될 수 있습니다.

사용방법

  • LINK타입 버튼 data 객체에 mobileTarget 속성값을 webview라고 설정하면 유저가 해당 버튼을 클릭했을 때 mobileUrl의(mobileUrl이 없으면 url의) URL이 채팅창 하단에 웹뷰로 열립니다. 웹뷰 타이틀 영역의 텍스트와 웹뷰의 크기를 지정하는 옵션이 제공됩니다.
{
    "type": "LINK",
    "data": {
        "title": "버튼에 노출되는 텍스트",
        "url": "http://your-pc-url.com",
        "mobileUrl": "http://your-mobile-url.com",
        "mobileTarget":"webview",
        "mobileTargetAttr" : {
            "webviewTitle" : "재주문하기",
            "webviewHeight" : 50
        }
    }
}

LINK 타입 버튼의 ButtonData Object

key Type 필수 설명
title string Y 버튼에 노출되는 텍스트
url string Y PC버전 채팅창에서 버튼을 클릭하면 이동할 페이지 URL.
mobileUrl string Y 모바일 버전 채팅창에서 버튼을 클릭하면 이동할 페이지 URL
mobileTarget string N 모바일 버전 채팅창에서 링크를 열 타겟. 웹뷰는 webview
mobileTargetAttr TargetAttr N 모바일 타켓의 추가 속성

TargetAttr Object

key Type 필수 설명
webviewTitle string N 웹뷰의 타이틀. 지정안하면 버튼에 노출되는 텍스트 사용
webviewHeight integer N 웹뷰의 크기. 30~90 범위의 정수로 지정 가능. 채팅창 세로 크기 대비 웹뷰 세로 크기의 비율을 의미. 지정하지 않으면 70

개발 가이드

  • 톡톡의 웹뷰는 <iframe> 태그를 사용해서 웹페이지를 열기 때문에, 웹뷰에 열릴 대상 웹페이지는 다음과 같은 제약이 있습니다.
    • https를 지원해야 합니다.
    • 브라우저가 대상 웹페이지의 로딩을 차단한다면 Content-Security-Policy, X-Frame-Options 등의 HTTP 응답 헤더의 속성을 변경해야할 수 있습니다.
    • 웹뷰 <iframe> 태그에는 sandbox 속성이 부여되어 있습니다. allow-scripts와 allow-same-origin만 허용하기 때문에 form submission 등의 몇가지 기능이 제한됩니다. HTML <iframe> sandbox Attribute
  • 톡톡에서 제공한 웹뷰 스크립트를 반드시 import 해야합니다.
    • 이 웹뷰 스크립트는 웹뷰를 닫는 기능 등을 포함하고 있습니다.
  • 웹뷰 스크립트로 인해 브라우저의 히스토리에 영향을 주는 액션이 제한될 수 있습니다.
    • 다른 페이지로의 이동이 없는 단일 페이지, 또는 단일 페이지 애플리케이션(SPA)으로 구현하는 것을 권장합니다. 다른 페이지로 이동할 수 없습니다.
    • redirect나 refresh를 사용할 수 없습니다.
    • <A> 태그의 기능이 제한됩니다.
    • history.go history.forward 등 history 객체의 함수의 기능이 일부 변경되거나 제한됩니다.
    • history.pushState history.replaceState로 object타입의 state만 저장할 수 있습니다.
      • 이들 함수 자체가 제한될 가능성이 있으므로 사용하지 않는 것을 권장합니다.
  • 웹페이지 내에 다시 다른 <iframe>을 여는 것을 권장하지 않습니다.
  • 대상 웹페이지를 웹뷰로 여는 시점의 전후에 보안 검수등의 사유로 대상 웹페이지 URL에 여러차례 접근이 일어날 수 있습니다.
    • 파라메터로 1회용 토큰등을 사용했으면 실제 웹뷰가 열렸을 때 의도한 결과를 얻지 못할 수 있습니다.

웹뷰 스크립트

웹뷰 스크립트 import

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://talk.naver.com/static/js/talk/sdk/webview.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'WebviewScript'));

웹뷰 스크립트 로딩 완료

window.webviewAsyncInit = function() {
  // 이 함수가 호출된 이후부터 TalkWebview 객체를 사용할 수 있습니다.
}

웹뷰 닫기

TalkWebview.close();
  • 웹페이지에서 처리가 끝나면 반드시 이 명령으로 웹뷰를 닫는 것을 권장합니다.

브라우저 히스토리 문제

톡톡 채팅창과 같은 단일 페이지 애플리케이션(SPA)에서는 <iframe> 내의 웹페이지가 자유롭게 브라우저 히스토리에 영향을 주게 된다면, 채팅창에서는 히스토리 상에서 현재 위치를 알 수 없게 되어 SPA로서의 사용성이 매우 떨어지게 됩니다. 따라서 웹뷰에 들어갈 대상 웹페이지도 SPA로 구현하는 것을 권장하고 있으며, 웹뷰 스크립트는 브라우저 히스토리에 영향을 주는 액션 중에 일부를 제약할 수 있도록 개발되었습니다. 실험적인 기능이기 때문에 상세 스펙은 예고없이 변경될 수 있습니다.