[모각소] 화상채팅 웹앱 개발환경 세팅

CRA를 사용하지 않고 React + Typescript 프로젝트 세팅

• webpack
• babel
• ts.config

CRA를 사용하지 않고 PWA 적용

• manifest

{
    "name": "mogakso",
    "short_name": "mogakso",
    "icons": [
        {
            "src": "/images/icons/maskable_icon_x48.png",
            "type": "image/png",
            "sizes": "48x48"
        },
        {
            "src": "/images/icons/maskable_icon_x72.png",
            "type": "image/png",
            "sizes": "72x72"
        },
        {
            "src": "/images/icons/maskable_icon_x96.png",
            "type": "image/png",
            "sizes": "96x96"
        },
        {
            "src": "/images/icons/maskable_icon_x128.png",
            "type": "image/png",
            "sizes": "128x128"
        },
        {
            "src": "/images/icons/maskable_icon_x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/images/icons/maskable_icon_x384.png",
            "type": "image/png",
            "sizes": "384x384"
        },
        {
            "src": "/images/icons/maskable_icon_x512.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "any maskable"
        }
    ],
    "start_url": "/",
    "display": "fullscreen",
    "background_color": "#FFFFFF",
    "theme_color": "#00C7AE"
}

• service-worker

// 캐시 이름
const CACHE_NAME = 'cache-v1';

// 캐싱할 파일
const FILES_TO_CACHE = ['/offline.html', '/favicon.ico'];

// 상술한 파일 캐싱
self.addEventListener('install', (event) => {
    event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(FILES_TO_CACHE)));
});

// CACHE_NAME이 변경되면 오래된 캐시 삭제
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keyList) =>
            Promise.all(
                keyList.map((key) => {
                    if (CACHE_NAME !== key) return caches.delete(key);
                })
            )
        )
    );
});

// 요청에 실패하면 오프라인 페이지 표시
self.addEventListener('fetch', (event) => {
    if ('navigate' !== event.request.mode) return;

    event.respondWith(
        fetch(event.request).catch(() =>
            caches.open(CACHE_NAME).then((cache) => cache.match('/offline.html'))
        )
    );
});

추후 배포를 진행했을 때, offline일 때 접속을 한다면 보여지는 페이지를 캐싱하도록 설정하였다.

PWA를 적용하고 다운받은 모습

추후 적용하고 싶은 것 들

• 번들러 마이그레이션 (webpack $\rarr$ vite)