이전

다음

프로그레시브 웹앱 테스트

완료됨

웹앱이 있으며 Azure에 게시되었습니다. 이제 프로그레시브 웹앱으로 작동하는지 확인할 수 있습니다.

프로그레시브 웹앱 구성

대부분 Vue CLI에서 프로그레시브 웹앱에 필요한 파일을 이미 만들었습니다. /public/images/icons 폴더에서 사용자가 바탕 화면에서 앱에 대한 책갈피를 만들 수 있도록 해주는 기존 아이콘을 찾을 수 있습니다. 또한 빌드 프로세스에서 오프라인 기능을 담당하는 서비스 작업자를 시작하는 service-workers.js 파일을 만듭니다. 앱에 파일(vue.config.js 파일)을 하나 더 추가하여 서비스 작업자를 만들 수 있는지 확인합니다.

웹앱의 루트에 vue.config.js라는 새 파일을 추가합니다. 이 파일은 서비스 작업자가 생성되지 않도록 하는 webpack 필터 파일을 지원합니다.

해당 파일에 다음 코드를 추가합니다.

module.exports = {
    pwa: {
        workboxOptions: {
            exclude: [/\.map$/, /web\.config$/],
        },
    },
};

이제 코드를 GitHub로 푸시하고 빌드할 때 서비스 작업자가 만들어집니다. 개발자 도구를 사용하여 페이지의 Lighthouse 점수를 결정할 수 있으며 이 점수는 프로그레시브 웹앱의 성능을 측정하는 좋은 방법입니다.

앱 테스트

Lighthouse 점수를 테스트하려면 브라우저에서 웹앱을 열고 개발자 도구를 엽니다. 감사로 이동하여 웹앱에 대한 감사 보고서를 만듭니다. 개발자 도구 영역에서 애플리케이션을 선택하고 서비스 작업자를 선택하여 오프라인 기능을 테스트할 수 있습니다. 오프라인 확인란을 선택하여 앱을 오프라인 상태로 전환한 다음, 앱을 사용해 봅니다. 모델이 온라인에서처럼 유추를 잘 수행해야 합니다.

테스트 및 확인을 위해 최신 이미지를 사용하여 Custom Vision AI에서 새 모델을 빌드한 다음, 빌드 프로세스를 통해 모델을 다시 로드합니다. 서비스 작업자는 새 모델이 있다는 사실을 파악하고, 사용자에게 이 사실을 콘솔에서 알려야 합니다. 화면을 새로 고치면 새 모델이 표시됩니다.

계속