플러터 Web 폴더 구조

1. index.html

<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A new Flutter project.">
  <title>myAppTitle</title>
</head>
<body>
  <script src="flutter_bootstrap.js?v=1.0.0?v=1.0.0" async></script>
</body>
</html>

역할

  1. 앱 진입점

    • 브라우저가 HTML을 처음 읽을 때 Flutter Web 앱을 실행하는 시작점입니다.

  2. 부트스트랩 로더 연결

    • <script src="flutter_bootstrap.js"> : Flutter 엔진과 앱 코드를 초기화합니다.

  3. 브라우저 환경 설정

    • <meta> : viewport 설정 → 모바일에서도 화면이 잘 맞도록

    • <base href="/"> : 상대 경로 기반 URL 처리

  4. 앱 메타데이터

    • <title> : 브라우저 탭 제목

    • <meta name="description"> : 검색엔진 및 PWA 설명

2. service_worker.js

역할

  • PWA(Progressive Web App) 지원: 오프라인 캐싱, 리소스 프리로딩, 백그라운드 업데이트 기능 제공.

  • Flutter에서 flutter build web --release 하면 자동으로 flutter_service_worker.js 가 생성됩니다.

  • 주요 기능:

    1. 리소스 캐싱: HTML, JS, 폰트, 이미지 등을 캐시에 저장 → 네트워크 요청 최소화.

    2. 오프라인 실행: 네트워크가 끊겨도 앱이 로컬 캐시된 리소스로 실행됨.

    3. 앱 업데이트 관리: 새 빌드가 배포되면, 새로운 버전 리소스를 다운로드 후 교체.

3. flutter_bootstrap.js

역할

  1. Flutter 엔진 초기화

    • CanvasKit 또는 HTML 렌더러 선택

    • WebAssembly 환경 준비

  2. 앱 코드 로드

    • main.dart.js 동적 로딩

    • 앱 실행 시작

  3. 브라우저 환경 체크

    • 이미지 디코더, 브레이크 이터레이터 등 브라우저 기능 확인

💡 정리: bootstrap.js 없이는 앱이 아예 실행되지 않으며, 브라우저마다 다른 초기화 과정을 담당합니다.

PreviousFlutter WebNextflutter 학습

Last updated