프리로딩 구현전략 - 캐시도 같이.

지금 프리로드 하고 url 페이지 끌어온거를 컨트롤러에 캐시로 저장하고 하단탭을 누르면 캐시된 페이지를 즉시 가져오도록 하고 있음

컨트롤러는:
웹페이지 자체를 저장하는 것이 아님
웹뷰의 동작을 제어하는 인터페이스
웹페이지의 로딩, 이동, 스크립트 실행 등을 담당
실제 웹페이지 캐싱은:
브라우저 캐시 (CacheMode.LOAD_CACHE_ELSE_NETWORK)
WebView의 내부 캐시 시스템
을 통해 이루어집니다.

그래서 우리가 하고 있는 것은:
HeadlessInAppWebView로 미리 페이지를 로드하여 브라우저 캐시에 저장
해당 웹뷰의 컨트롤러를 보관했다가
탭 전환 시 캐시된 페이지를 빠르게 로드
이런 방식입니다. 이해가 되셨나요?


탭 전환 하고 프리로드 하는게 아니라, 
1.앱진입시에 비동기로 프리로드 하고 
2.HeadlessInAppWebView로 미리 페이지를 로드하여 브라우저 캐시에 저장
3.웹뷰 컨트롤러로 보관 했다가 
4.탭 전환하면 즉시 가져오도록 하고 싶어.

- 컨트롤러 등록이 중복으로 되지 않도록 주의할것


--프리로딩 엮이는게 많아서 차라리 빨리하고 바로 뒤로가기 앞으로 가기 하는게 더 좋을 수 있음.


--프리로딩 구현 성공!

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

네, 지금까지의 구현 과정을 상세히 설명드리겠습니다.

1. 앱 진입 시 프리로드 구현

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PreloadService.initialize();  // 여기서 프리로드 시작
  runApp(const MyApp());
}

• 앱 시작 시점에 PreloadService.initialize() 호출
• 첫 번째 탭(홈)을 우선적으로 로드하고 나머지 탭들은 병렬로 로드

2. HeadlessInAppWebView로 페이지 프리로드

static Future<void> _preloadTab(int index) async {
  final headlessWebView = HeadlessInAppWebView(
    initialUrlRequest: URLRequest(
      url: WebUri(routes[index.toString()]!),
    ),
    initialSettings: InAppWebViewSettings(
      cacheEnabled: true,
      cacheMode: CacheMode.LOAD_CACHE_ELSE_NETWORK,
      domStorageEnabled: true,
      ...
    ),
    onWebViewCreated: (controller) async {
      await registerController(index, controller);
    },
  );
}

 

• 백그라운드에서 HeadlessInAppWebView 생성
• 캐시 설정을 활성화하여 페이지 데이터 저장
• 각 탭마다 별도의 HeadlessInAppWebView 인스턴스 생성

3. 컨트롤러 관리

 

class PreloadService {
  static final Map<int, HeadlessInAppWebView> headlessWebViews = {};
  static final Map<int, InAppWebViewController> controllers = {};
  
  static Future<void> registerController(int index, InAppWebViewController controller) async {
    if (!controllers.containsKey(index)) {
      controllers[index] = controller;
    }
  }
}

 

• HeadlessInAppWebView와 컨트롤러를 Map으로 관리
• 각 탭의 컨트롤러를 중복 없이 보관
• 컨트롤러 상태 추적을 위한 플래그 관리

4. 탭 전환 시 즉시 로드

class WebViewPage extends StatefulWidget {
  Future<void> _initializeWebView() async {
    final controller = await PreloadService.getController(widget.selectedIndex);
    if (controller != null && mounted) {
      _controller = controller;
      context.read<WebViewBloc>().add(InitController(controller));
    }
  }
}

• 탭 전환 시 PreloadService에서 미리 로드된 컨트롤러 즉시 가져오기
• BLoC을 통한 상태 관리로 UI 업데이트

프리로딩의 흐름

1. 앱 시작 -> PreloadService.initialize() 호출
2. 모든 탭에 대해 HeadlessInAppWebView 생성
3. 각 HeadlessInAppWebView가 페이지 로드 및 캐시
4. 컨트롤러를 Map에 저장
5. 탭 전환 시 저장된 컨트롤러 즉시 사용

주의할 점

• 컨트롤러 중복 생성 방지
• 메모리 관리 (4개 탭 모두 메모리에 유지)
• 캐시 정책 최적화
• 에러 처리 및 로깅