typescript+pwa 구현하기

이전 시간에 cra(create-react-app)+pwa를 구현했습니다. 이번에는 cra(create-react-app)+typescript+pwa를 구현해보겠습니다!

 

 

1. `create-react-app 파일명 --template pwa-typescript`을 진행합니다.

설치후 모습

 

2. src/index.tsx의 18줄을 serviceWorkerRegistration.register()로 변경해주세요.

 

3. 빌드를 해줍니다 by 'npm run build'. *deploy상태에서만 pwa 적용이 가능합니다.

그런데 build를 해주면 아래와 같이 에러가 발생합니다. 

에러 해결을 위해 build 결과를 localhost로 띄우겠습니다.

 

 

4. public/server.js에 파일을 생성해서 아래 코드를 넣습니다.

const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(__dirname));
app.get("*", function(req, res) {
  res.sendFile(path.resolve(__dirname, "index.html"));
});
function handleListenLog() {
  console.log("Server Starting...");
}
app.listen(3000, handleListenLog);

 

5. 다시 'npm run build'로 빌드 해줍니다.

6. build폴더 아래에 생긴 server.js를 'node server.js'로 실행해줍니다.

7. 개발자 도구의 lighthouse를 실행해서 아래와 같이 뜨면 성공입니다.

*lighthouse 검사시 Progressive Web App을 꼭 체크해주세요