WebApp

소정·2023년 5월 24일

Kotlin

목록 보기

21/27

웹뷰의 장단점

장점

구글 플레이에 올리지 않아도 돼서 버전 업데이트에 좋다
만들기 쉽다

단점

운영체제가 웹뷰를 구동하고 웹뷰는 자바스크립을 구동해야해서 속도가 네이티브보다 느리다
input file 타입은 윈도우용이라 반응하지않음
하드웨어, 센서 등 핸드폰의 고유 기능은 사용하지 못함

[1] 앱에 웹뷰 올리기

웹뷰가 보여줄 웹 문서 로드하기
웹문서가 있는 위치 = 프로젝트 안에 있거나, 웹 서버에 위치시킨다

0. 사전 준비

웹뷰 보여줄 화면 만들기
테마에 노 액션바 하기

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

앱뷰를 사용하기 위해 기본 셋팅 3가지 필수

package com.bsj0420.ex95webapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {

    val wv : WebView by lazy { findViewById(R.id.wv) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //webView 기본 셋팅 3가지
        //1.웹뷰 설정 객체를 통해 JS사용을 허용하도록 변경 설정
        wv.settings.javaScriptEnabled = true 
        //2.새로운 웹 문서가 열릴 때 기본 웹뷰는 새 탭으로 열기에 이 웹뷰가 아니라 웹 브라우저가 실행되면서 열림
        wv.webViewClient = WebViewClient()
        //3.alert(), confirm() 같은 팝업기능을 사용하도록함
        wv.webChromeClient = WebChromeClient()


    }

}

1. 프로젝트 안에 넣기

프로젝트 안에 위치 시키려면 'assets' 폴더안에 html 문서가 존재함 그 곳에 index.html 파일 만들기

wv.loadUrl("file:///android_asset/index.html")

2. 웹문서를 닷홈이나 AWS 같은 웹서버에서 html문서 읽어오기

인터넷 써야하니까 퍼미션과 http(닷홈 무료) 니까 usesCleartextTraffic="true" 해주기

package com.bsj0420.ex95webapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {

    val wv : WebView by lazy { findViewById(R.id.wv) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //webView 기본 셋팅 3가지
        //1.웹뷰 설정 객체를 통해 JS사용을 허용하도록 변경 설정
        wv.settings.javaScriptEnabled = true 
        //2.새로운 웹 문서가 열릴 때 기본 웹뷰는 새 탭으로 열기에 이 웹뷰가 아니라 웹 브라우저가 실행되면서 열림
        wv.webViewClient = WebViewClient()
        //3.alert(), confirm() 같은 팝업기능을 사용하도록함
        wv.webChromeClient = WebChromeClient()

        // 2. 웹문서를 닷홈이나 AWS 같은 웹서버에 html문서가 존재
        // 인터넷 써야하니까 퍼미션과
        // http 니까 usesCleartextTraffic="true" 해주기
//        wv.loadUrl("http://mrhisj23.dothome.co.kr")
        wv.loadUrl("http://mrhisj23.dothome.co.kr/WebProjTeamC/index.html")


    }

    //웹뷰에서 링크타고 들어가면 뒤로가게
    override fun onBackPressed() {
        //super.onBackPressed()

        if (wv.canGoBack()) wv.goBack()
        else finish()
        
    }

}