[Python] Pywebview를 이용한 웹뷰앱 만들기! - 2

이전 글

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 1

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 1

---

지난번에는 다양한 예제로 Pywebview를 만나보았는데요!

오늘은 드디어 웹뷰앱을 만들어보도록 하겠습니다 :)

import webview

Pywebview를 임포트해줍니다.

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com')
# create_window('창의 제목!', '사이트 주소')

창을 생성해주고,

webview.start()

 창을 띄워줍니다.

실행 화면

그러면 이렇게 웹뷰 앱이 실행됩니다.

 

여기서 끝났다고 생각하실 수도 있습니다!

(물론 사이트에 따라 이 과정이 필요없을 수도 있어요..;;)

 

제 경우에는 블로그에 링크를 새 창으로 띄우는 옵션이 선택되어 있습니다!

[html] link의 종류

눌러보시면 아마 새 창에서 뜨실 겁니다.

 

따라서, 현재 우리가 만든 웹뷰 앱으로는 링크를 눌렀을 때 이 창이

기본으로 설정되어있는 다른 브라우저(IE, 엣지 등)에서 열리는 상황이 생깁니다.

 

그리고 새 창으로 띄우는 것은 링크에서 target이 _blank일때 발생합니다.

즉, 새 창으로 띄우지 않게 하기 위해선 이 _blank를 바꿔주어야 한다는 것이죠.

 

링크를 클릭했을 때 클릭한 창에서 페이지가 열리게 하려면

_blank가 아니라 _self로 target을 바꿔줘야 합니다.

 

근데 이건 제 블로그를 열었을 때라 제가 블로그에서 새 창에서 열기를 없애주면 되지만,

자신이 그런 것을 변경할 수 없거나 이 웹뷰 앱에서만 _self를 적용할 수 있게 하려면 어떻게 해야 할까요?

저도 이런 건 해본 적이 아직 없었던 터라 구글에 검색해봤습니다. 

(역시 구글)

구글에 검색해본 결과,

이건 JS를 통해 바꿀 수 있었고,

$(function(){ $('[target]').attr('target', '_self'); });

이렇게 코드를 작성하면 _self로 창을 띄울 수 있다는 것을 알게 되었습니다.

 

그리고,

webview에서 JS(자바스크립트)를 실행하려면

def evaluate_js(window):
    result = window.evaluate_js(
        """
        JS코드 쓰기
        """
    )

이런 식으로 코드를 작성하고,

webview.start(evaluate_js, window)

이렇게 webview.start에 evaluate_js를 불러오게 하면 되기 때문에

import webview

def evaluate_js(window):
    result = window.evaluate_js(
        """
        $(function(){ $('[target]').attr('target', '_self'); });
        """
    )

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com')
# create_window('창의 제목!', '사이트 주소')
webview.start(evaluate_js, window)

이렇게 코드를 작성하게 되었습니다.

 

그리고, 실행해본 결과....

처음에는 제대로 _self로 바꾸는 듯 했으나...

그 뒤부터 작동을 하지 않더군요...

(아마도 시작할 때만 JS와 CSS를 실행하는 듯 합니다... 그래서 다른 링크를 클릭하면 JS와 CSS를 다시 적용하지 않아 그냥 사이트가 똑같이 나오는 것 같습니다...)

 

그래서 이 문제를 해결하기 위해 조금 고민해봤습니다..!

 

1. URL이 변경되면 다시 JS를 불러오기

Pywebview에 URL을 알아내는 기능이 있었지만
다시 똑같은 URL을 불러올 수 있으니 이 방법은 사용하지 않았습니다.

2. 페이지가 로드될 때마다 JS 불러오기

페이지가 로드될 때 불러오게 하면
같은 url의 페이지여도 상관없이 JS를 불러올 수 있을 것 같아 이 방법으로 코드를 짰습니다 :)

 

결국 페이지가 로드될 때마다 JS를 불러오게 했습니다..!

그리고 이것도 처음 한번만 실행되지 않도록

Pywebview의 페이지 로드 이벤트 예제를 조금 수정했습니다.

 

import webview

def on_loaded():
    # 리스너 제거
    webview.windows[0].loaded -= on_loaded
    print("Loaded")

    # 모두 _self로 열리게 하기
    webview.windows[0].evaluate_js(
            """
            $(function(){ $("[target]").attr("target", "_self"); });
            """
        )

    # 다음번에 로드되었을 때 다시 적용할 수 있도록 함.
    window.loaded += on_loaded 

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com/')
# create_window('창의 제목!', '사이트 주소')
window.loaded += on_loaded
webview.start()

 

최종적인 코드는 이렇게 작성했습니다.

window.loaded += on_loaded를 on_loaded 함수 맨 밑에 둠으로써

리스너를 다시 추가해줬습니다.

(근데 몇 분 지나고 보니까 그냥 리스너를 추가하고 없애는 코드를 아예 제거해도 될 듯합니다..)

(그래도 일단 페이지가 다 로드된 후에 적용시키는 게 나을 것 같아 이대로 해봤습니다.)

 

이렇게 코드를 작성하고 실행한 결과

제대로 _self로 바꾸게 되었습니다!

 

다음시간에는 이제 더 오류를 발견하지 못하면

빌드로 넘어가보도록 하겠습니다!

(제발... 오류 없어라..)

 

---

아 참!

Ionicons를 로드하지 못하는 오류(?)와

System.AggregateException: 하나 이상의 오류가 발생했습니다.

라며 뜨는 오류가 있는데

 

이건 webview.start()에

gui='cef'를 넣어주시면 해결됩니다 :)

 

(조금 더 공부해서 이유를 알아보겠습니다...)

 

그리고

$(function(){ $("[target]").attr("target", "_self"); });는 jQuery 코드입니다.

티스토리 블로그는 기본적으로 jQuery를 불러와서 webview 앱에서 따로 jQuery를 불러오지 않아도 된 것 같은데,

만약 사이트가 jQuery를 불러오지 않는다면 따로 jQuery를 불러올 수 있도록 해주시면 좋을 것 같습니다!

 

---

참고

Changing target="_blank" to target="_self" - in5 Answer Exchange

Events | pywebview