[React] PWA를 위한 webpack 설정 : create-app-react를 사용하지 않은 경우

 

PWA 구현시 create-app-react로 생성하지않아 아래와 같은 폴더 구조를 가지고 있지 않았다. 그래서 루트에 public 폴더를 생성하고 하위에 서비스 워커 설정을 위한 js를 추가했다.

왼: create-react-app 구조, 오: 내가 루트에 직접 생성

 

service-worker.js 를 제대로 설정하고, indext.html에 아래와 같이 serviceWorker를활성화 하는 코트를 넣었는데도 브라우저에서 스크립트를 찾지 못하는 오류가 났다.

const registerServiceWorker = async () => {
  if ('serviceWorker' in navigator) {
    try {
      const registration = await navigator.serviceWorker.register(
        '/service-worker.js',
      );
      if (registration.installing) {
        console.log('Service worker installing');
      } else if (registration.waiting) {
        console.log('Service worker installed');
      } else if (registration.active) {
        console.log('Service worker active');
      }
    } catch (error) {
      console.error(`Registration failed with ${error}`);
    }
  }
};

 

오류

app.js:28 Registration failed with SecurityError: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/service-worker.js'): The script has an unsupported MIME type ('text/html').

 

 

오류원인

 

PWA(Progressive Web App)와 같은 고급 기능을 구현하려면 Webpack을 통해 정적 파일을 올바르게 처리하고, 서비스 워커를 설정하는 작업이 필요하다. Create React App에서는 이러한 설정이 기본적으로 포함되어 있지만, 직접 프로젝트를 설정할 경우 이러한 부분을 수동으로 설정해줘야 한다.

 

1)Webpack 설정 파일 찾기

•  파일 이름은 보통 webpack.config.js, webpack.prod.js, webpack.dev.js , webpack-base-babel.js

2) CopyWebpackPlugin 설치

• 특정 파일이나 디렉터리를 빌드 과정에서 다른 디렉터리로 복사해주는 역할. public 폴더의 내용을 빌드 디렉터리로 복사하는지 확인해야한다.

const CopyWebpackPlugin = require('copy-webpack-plugin');

// plugins 배열에 추가
plugins: [
  new CopyWebpackPlugin({
    patterns: [
      { from: 'public', to: '' }
    ],
  }),
  // 기타 플러그인...
]

//Webpack이 service-worker.js 파일을 처리하지 않도록 설정
module: {
  rules: [
    {
      test: /service-worker\.js$/,
      use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
    },
    // 기타 rules...
  ],
}

 

 

정상작동 확인!

 

 

 

** 버전 호환 확인 필수! 

- CopyWebpackPlugin 버전에 따라 환경설정 문법이 다르다.

 

• Webpack 4.x: CopyWebpackPlugin 5.x
• Webpack 5.x: CopyWebpackPlugin 6.x 이상