Flutter 3.0 - 더 나은 웹 앱 수명 주기

4772 단어 flutterdartnews
드디어 Flutter 3.0 버전이 나왔습니다!!

저에게 가장 흥미로운 것 중 하나는 이제 웹 앱 수명 주기를 더 잘 제어할 수 있다는 것입니다. 이 게시물은 이 새로운 기능에 대한 개요를 제공합니다. 보다 일반적인 변경 로그를 보려면 this 게시물을 확인하거나 다른 게시물을 확인하십시오.

_flutter.loader JavaScript API를 사용하여 Flutter 앱이 웹에서 초기화되는 방식을 사용자 지정할 수도 있습니다. 이 API는 로딩 표시기를 표시하거나, 조건에 따라 앱이 로딩되지 않도록 하거나, 앱을 표시하기 전에 사용자가 버튼을 누를 때까지 기다릴 수 있습니다.

이것은 Flutter로 웹 앱을 구축하는 데 있어 큰 누락 부분이었습니다. 적어도 나에게는.

이제 다음을 수행할 수 있습니다.
  • 시작 화면 추가
  • 리소스를 로드하는 동안 로드 표시기를 추가합니다.
  • Flutter 앱 앞에 표시되는 일반 HTML 대화형 랜딩 페이지를 추가합니다.

  • 이제 초기화 프로세스는 다음과 같습니다.



  • 진입점 스크립트 로드
  • main.dart.js 스크립트를 로드하고 서비스 작업자를 초기화합니다.


  • Flutter 엔진 초기화
  • 필요한 리소스를 다운로드하여 Flutter의 웹 엔진을 시작합니다.


  • 앱 실행
  • Flutter 앱용 DOM을 준비하고 실행합니다.


  • 로딩 표시기를 추가하는 예를 살펴보겠습니다.

    <html>
       <head>
          <!-- ... -->
          <script src="flutter.js" defer></script>
       </head>
       <body>
          <div id="loading"></div>
          <script>
             window.addEventListener('load', function(ev) {
               var loading = document.querySelector('#loading');
               loading.textContent = "Loading entrypoint...";
               _flutter.loader.loadEntrypoint({
                 serviceWorker: {
                   serviceWorkerVersion: serviceWorkerVersion,
                 }
               }).then(function(engineInitializer) {
                 loading.textContent = "Initializing engine...";
                 return engineInitializer.initializeEngine();
               }).then(function(appRunner) {
                 loading.textContent = "Running app...";
                 return appRunner.runApp();
               });
             });
          </script>
       </body>
    </html
    


    이 게시물은 웹 앱의 새로운 수명 주기에 대한 개요일 뿐입니다. 자세한 가이드는 확인하십시오Customizing web app initialization
    .

    좋은 웹페이지 즐겨찾기