PWA(Progressive Web Apps) 써보자!!

오늘은 제가 앱잼에 나가게 되어 웹을 앱으로 만드는 방법을 살펴보다가 이렇게 글을 쓰게 되었습니다

저는 평소에 react native를 배워서 웹 앱 말고 react native를 사용해서 앱을 개발해왔었는데

웹 앱도 많은 장점이 있다고 하여서 배워보게 되었습니다

웹을 앱으로 바꾸는 여러 많은 방법들이 있지만 저는 오늘 PWA에 대해 설명해보겠습니다

---

❓ PWA란?

PWA

PWA는 웹 기술을 가지고 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술입니다

 

모바일 웹 사이트와 앱의 중간 형태로 모바일 앱과 웹 사이트의 장점을 결합하여
사용자 친화적인 앱 경험을 제공할 수 있다고 합니다

---

🌸 장단점

장점

• 빠른 성능을 제공한다고 합니다
• 앱스토어를 거치지 않아도 웹 브라우저에서 바로 앱을 사용할 수 있습니다
• 업데이트도 자동으로 이루어집니다
• 모바일 앱과 웹의 장점을 모두 활용할 수 있습니다
• 기본적으로 반응형이기 때문에 다양한 화면에서도 동작합니다
•  일반적인 웹 개발 기술을 활용해서 PWA를 만들 수 있습니다
• 일반적인 웹과 달리 오프라인에서도 어느 정도 동작합니다
• 푸시 알림이 가능합니다

단점

• 높은 진입장벽이 있을 수 있습니다 (1. PWA로 되어 있는 사이트 방문 2. 홈 화면에 추가 찾고 추가하기)
• 지원하지 못하는 부분들도 꽤 많다고 합니다
• 오래된 브라우저에서는 호환성 문제가 발생할 수 있습니다

---

🎯 사용법 (react)

1. public 폴더에 manifest.json 파일 만들기

{
  "name": "My PWA React App",
  "short_name": "ReactPWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

2. serviceWorkerRegistration.js 파일 활성화 하기

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// PWA의 서비스 워커 등록
serviceWorkerRegistration.register();

 

만약 next.js를 사용한다면 밑에 명령어로 간단하게 가능

npm i next-pwa # npm

yarn add next-pwa # yarn

---

마무리

이렇게 PWA에 대해서 써보았는데 실제로 사용해보니 생각보다 느리고 단점이 몇가지 있었던 것 같습니다 

그래도 꽤 쓸만 했던 것 같아서 다음에 또 쓸 의향이 있었습니다