WebView 캐싱 문제
이 섹션 소개:
요즘에는 Huxiu, ifanr, Titanium Media 및 기타 앱과 같은 포털 정보 웹 사이트가 많이 있습니다. 쉽게 말하면 정보 읽기 앱입니다. 이들은 모두 WebView 캐시를 포함할 수 있는 관련 정보를 표시하기 위해 WebView를 직접 중첩합니다!
소위 페이지 캐싱 이는 인터넷이 없거나 인터넷이 없을 때 웹페이지를 로드할 때 필요한 HTML, JS, CSS 및 기타 페이지 관련 데이터와 기타 리소스를 저장하는 것을 의미합니다. 네트워크 상태가 좋지 않을 때 로컬에 저장된 관련 데이터를 불러오세요! 이 캐시를 구현하는 방법에는 두 가지가 있습니다. 하나는 백그라운드에서 캐시를 작성하는 것입니다. 다운로드된 서비스는 사용자의 필요에 따라 기사 관련 데이터를 데이터베이스에 다운로드하거나 해당 폴더에 저장한 후 다음에 로드합니다. URL에 대응하기 전에 먼저 로컬 캐시가 있는지 확인하고, 로컬 캐시가 있으면 먼저 로컬 캐시를 로드하여 네트워크 요청과 캐시를 동시에 실행합니다. 관련 리소스, 일반적으로 36Kr의 이전 버전은 입력 후 기사가 먼저 오프라인 상태가 된 다음 표시됩니다!
물론, 이 섹션에서 설명할 내용은 로직을 직접 작성하는 이 방법은 WebView 자체의 캐싱 기능을 사용하여 페이지를 캐시하는 방법입니다. 간단합니다. WebView 설정에 대한 관련 기능을 활성화하고 데이터베이스의 캐시 경로를 설정하기만 하면 캐시가 완료됩니다! 특정한 하나씩 구현해 볼까요~
1. 캐시의 분류:
먼저 말씀드릴 것은 캐시의 분류는 페이지 캐시와 데이터 캐시
입니다. 페이지 캐시: 웹 페이지, HTML, JS, CSS 및 기타 페이지 또는 리소스 데이터를 로드할 때 이러한 캐시 리소스는 브라우저로 인해 발생합니다. 브라우저의 동작에 의해 생성된 개발자는 브라우저의 동작에 영향을 미치도록 HTTP 응답 헤더를 구성하여 이러한 캐시된 데이터에 간접적으로만 영향을 미칠 수 있습니다. 캐시된 인덱스는 다음 위치에 있습니다:/data/data/<패키지 이름>/databases해당 파일은 다음 위치에 있습니다:/data/data/package_name/cache/webviewCacheChromunm
data 캐시: AppCache와 DOM Storage 두 가지 유형으로 구분 우리 개발자가 스스로 제어할 수 있는 것은 이러한 캐시 리소스입니다.
AppCache: 페이지, 이미지, 스크립트, CSS 등 웹 브라우저의 모든 것을 선택적으로 캐시할 수 있습니다. 이는 웹사이트의 여러 페이지에 적용되는 CSS 및 JavaScript 파일의 경우 특히 유용합니다. 현재 크기는 일반적으로 5M입니다. Android에서는 수동으로 켜고(setAppCacheEnabled) 경로(setAppCachePath)와 용량을 설정해야 합니다. (setAppCacheMaxSize)이며 Android는 ApplicationCache.db를 사용하여 AppCache 데이터를 저장합니다!
DOM Storage: 키/값 쌍을 사용하여 해결할 수 있는 간단한 데이터를 저장하며, 범위에 따라 Session이 있습니다. 저장소와 로컬 저장소에는 두 가지 유형이 있으며, 각각 세션 수준 저장소(페이지를 닫으면 페이지가 사라짐)와 지역화된 저장소(활성화되지 않는 한)에 사용됩니다. 삭제하세요. 그렇지 않으면 데이터가 만료되지 않습니다.) Android에서 DOM 저장소(setDomStorageEnabled)를 수동으로 켤 수 있습니다. 저장소 경로 설정(setDatabasePath) Android의 Webkit은 DOMStorage에 대한 두 개의 파일(my_path/localstorage/http_blog.csdn.net_0.localstorage 및 my_path/Databases.db)을 생성합니다
좋아요, 위 내용을 읽은 후 다음을 수행하시겠습니까? 그냥 말해두자면, 젠장, 뭐야, 너무 복잡해 보이는데
물론, 외우지 마세요. 이런 것도 있다는 걸 알아두면 좋고, 실제 개발할 때 좀 더 알아보도록 하겠습니다. 그리고 우리는 일반적으로 어떻게 사용하는지에만 관심을 갖습니다.
WebView 캐시 설정 및 캐시 삭제 방법!
아래에 작성한 데모를 실행한 후 파일 구조를 살펴보고 DDMS의 파일 탐색기를 열 수 있습니다.
헤헤, 한 눈에 알겠군요~그나저나 얘기도 좀 해야 겠네요 여러 캐싱 모드에 대해:
- LOAD_CACHE_ONLY: 네트워크를 사용하지 않고 로컬 캐시 데이터만 읽습니다.
- LOAD_DEFAULT: 캐시 제어를 기반으로 네트워크에서 데이터를 가져올지 여부를 결정합니다.
- LOAD_CACHE_NORMAL: API 레벨 17에서 더 이상 사용되지 않으며 API 레벨 11부터 시작하는 LOAD_DEFAULT 모드와 동일하게 작동합니다.
- LOAD_NO_CACHE: 캐시를 사용하지 않고 네트워크에서 데이터만 가져옵니다.
- LOAD_CACHE_ELSE_NETWORK. , 언제까지나 로컬에서 사용할 수 있으므로 로컬에서 사용할 수 있는지 여부에 관계없이 만료되거나 캐시가 없으면 캐시의 데이터를 사용합니다.
요약: 위의 두 가지 모드를 바탕으로 권장되는 캐시 전략은 네트워크가 있는지 판단하고, 네트워크가 있다면 LOAD_DEFAULT를 사용하고, 네트워크가 없는 경우 LOAD_CACHE_ELSE_NETWORK를 사용하세요.
다음은 쌓이는 시간이에요!
2. WebView에 대한 캐싱 기능 켜기
먼저 구현 렌더링을 살펴보겠습니다.
렌더링 실행:
프로세스 분석 : 1. 페이지에 들어가면 기본적으로 URL이 로드되며, 링크를 클릭하면 두 번째 페이지로 이동하고 앱을 종료합니다. 2. Wi-Fi와 모바일 네트워크를 끄고 다시 접속해 보세요. 네트워크가 없어도 페이지가 계속 로드되는 것으로 확인됩니다. 첫 번째 링크를 열어도 로딩이 되지만, 다른 링크를 열면 해당 웹페이지를 찾을 수 없는 현상이 발생합니다! 3. 클릭하여 캐시를 지우고 애플리케이션을 닫은 후 다시 입력하면 페이지를 열 수 없습니다!
다음 단계는 코드 구현입니다. MainActivity.java:
public class MainActivity extends AppCompatActivity {
private WebView wView;
private Button btn_clear_cache;
private Button btn_refresh;
private static final String APP_CACHE_DIRNAME = "/webcache"; // web缓存目录
private static final String URL = "http://blog.csdn.net/coder_pig";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
btn_clear_cache = (Button) findViewById(R.id.btn_clear_cache);
btn_refresh = (Button) findViewById(R.id.btn_refresh);
wView.loadUrl(URL);
wView.setWebViewClient(new WebViewClient() {
//设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
WebSettings settings = wView.getSettings();
settings.setJavaScriptEnabled(true);
//设置缓存模式
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 开启DOM storage API 功能
settings.setDomStorageEnabled(true);
// 开启database storage API功能
settings.setDatabaseEnabled(true);
String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACHE_DIRNAME;
Log.i("cachePath", cacheDirPath);
// 设置数据库缓存路径
settings.setAppCachePath(cacheDirPath);
settings.setAppCacheEnabled(true);
Log.i("databasepath", settings.getDatabasePath());
btn_clear_cache.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wView.clearCache(true);
}
});
btn_refresh.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wView.reload();
}
});
}
//重写回退按钮的点击事件
@Override
public void onBackPressed() {
if(wView.canGoBack()){
wView.goBack();
}else{
super.onBackPressed();
}
}
}코드는 매우 간단합니다. 캐시 기능을 활성화하고 캐시 모드와 캐시된 데이터의 경로를 설정하는 것뿐입니다.
3. WebView의 캐시된 데이터 삭제
위의 예에서는 WebView의clearCache(true) 메소드를 호출하여 캐시를 삭제했습니다! 이 방법 외에도 다음과 같은 방법이 있습니다:
- setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
- deleteDatabase("WebView.db") 및 deleteDatabase("WebViewCache.db");
- webView.clearHistory();
- webView.clearFormData();
- getCacheDir().delete();
- 수동으로 삭제 메소드를 작성하고 캐시 폴더를 반복적으로 삭제해 보세요!
물론 앞서 언급했듯이 우리가 직접 조작할 수 있는 것은 데이터 부분뿐이고, 페이지 캐싱은 브라우저에 의한 것입니다 브라우저의 동작에 의해 생성되는 HTTP 응답 헤더를 구성하여 브라우저의 동작에 간접적으로만 영향을 미칠 수 있습니다. 이러한 캐시 데이터. 따라서 위의 방법은 데이터 부분의 캐시만 삭제합니다!
4. 샘플 코드 다운로드:
WebViewDemo7.zip: WebViewDemo7.zip
5 다운로드 WebView에 대한 캐싱을 활성화하는 방법을 작성했습니다. 캐시 삭제는 물론이고 앞으로 마주치면 천천히 찾아보도록 할게요~ 이미지는 이렇습니다~ 감사합니다
그런데 참고링크 올리는 걸 깜빡할뻔했어요 이 섹션의 경우:
Android webView 캐시 캐시 + HTML5 오프라인 기능 솔루션
