하이브리드 앱 개선하기..(노력 1)

지금 회사에서 개발하고 있는 앱은 하이브리드 앱입니다.

그리고 굉장히(?) 오래된 앱이라고 생각합니다.

나름 개편을 하고는 있는데 많이 부족해 보입니다.

하이브리드이지만 주요화면들이 거의 웹영역이기 때문이죠.

요즘은 하이브리드앱이지만, 거의 하이브리드라고 생각도 못할만큼 자연스러운 사용성을 제공하는 앱을 보고 놀랐습니다!! (ex - 텐바이텐)

 

그래서 나름 개선을 해보고자 노력중에 있슴니다 (오늘부터)

 

1. 일단 링크로 이동이 가능한 부분은 사용자가 눌렀을 경우 회색 오버레이가 깔리는 부분을 개선하고자 했습니다.

웹뷰가 로딩이 완료되는 시점에 추가 css를 입혀주는 것입니다.

스크립트랑 css는 대학생때 해보고 아직까지 쥐뿔도 모르지만 막 검색해서 넣습니다.

iOS 만 한정된 것이 아니라 AOS도 동일하게 처리가 가능한 CSS 입니다.

 

끝에 !important 를 추가한 이유는, 저의 회사가 기본적으로 저것을 중복으로 CSS를 입히고 있기때문에, 제것을 최우선적으로 적용하기 위해서 추가하였습니다. (만약 기본적으로 동일한 CSS를 먹이고 있지 않다면 없어도 무관)

 

그리고 html에 스타일을 추가하는 코드를 만드는 것입니다.

func webViewDidFinishLoad(_ webView: UIWebView) {
    // 회색 셀렉션 효과 제거
    let css = "a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }"
    let js = "var style = document.createElement('style'); style.innerHTML = '\(css)'; document.head.appendChild(style);"
    webView.stringByEvaluatingJavaScript(from: js)
}

 

2. Drag and Drop 기능 제거

iOS 11부터 패드 단말에서 Drag and Drop 기능이 추가되었는데요.

이는 멀티태스킹을 지원하기 위함이라고 생각함다.

근데 우리 앱에는 필요가 없단말이에요.. 웹앱이라고 강조하는것도 아니고 ㅜ.ㅜ

 

그래서 제거하기위해 많은 검색을 했슴다.

검색어는 Drag and Drop disable, link Drop diable 등등..

 

이건 이벤트를 캐치해서 막는 방법 같아염 ㅎㅎ(쥐뿔도 모름)

func webViewDidFinishLoad(_ webView: UIWebView) {
    let js2 = "document.addEventListener('dragstart', function(e){ e.preventDefault(); e.stopPropagation(); },  false); document.addEventListener('drag', function(e){ e.preventDefault(); e.stopPropagation(); }, false); document.addEventListener('drop', function(e){ e.preventDefault(); e.stopPropagation(); }, false)"
    webView.stringByEvaluatingJavaScript(from: js2)
}

 

 

3. 추가로 UserSelection, callout 막기

웹뷰에서 롱프레스로 링크를 터치하면 다운로드 할꺼냐 웹을 열꺼냐 Alert가 뜨는데 그걸 막는거져

func webViewDidFinishLoad(_ webView: UIWebView) {
	// Disable user selection
	webView.stringByEvaluatingJavaScript(from: "document.documentElement.style.webkitUserSelect='none';")
		
    // Disable callout
    webView.stringByEvaluatingJavaScript(from: "document.documentElement.style.webkitTouchCallout='none';")
}