[React] Day_67 데일리 정리

 

오늘은 수빠베이스랑 싸우는날~.~

내일은.. 이브인데.. 코딩 하겠지? ㅠㅡㅠ

TIL 가보자구요 ㅠㅡㅠ 어헝헝

 

 

 

 

 

챌린지반 강의정리 - Progressive Web Applications (PWA) 가이드 

리액뚜, 드디어 어플로도 넘어가지다(?)

 

그렇대~

 

 

PWA

 

- 등장 배경

 

앱을 설치하는 과정이 번거롭다는 사용자들의 피로감을 해소하고자 Google이 2015년에 발표한 기술

앱 설치 부담을 줄이고 웹의 보편성과 접근성을 극대화하기 위해 탄생

기존 모바일 웹과 네이티브 앱의 단점(속도, 설치 과정, 유지보수 비용)을 보완함!

 

특성	기존 웹사이트	네이티브 앱	PWA
설치 필요 여부	필요 없음	필요	필요 없음
플랫폼 의존성	없음	있음	없음
오프라인 지원	제한적	가능	가능
배포 방법	즉시 배포 가능	앱스토어 필요	즉시 배포 가능
푸시 알림	불가	가능	가능

 

 

→ 웹사이트지만 네이티브 앱처럼 동작!

• Progressive: 모든 브라우저에서 작동, 최신 기능이 있을 경우 이를 활용함
• Web Application: 앱처럼 동작하지만, 별도의 설치 없이 홈 화면에 추가

 

- PWA 사용 사례

• 모바일 웹사이트 사용자 경험 향상
• 앱 설치 없이 앱과 같은 기능 제공
• 오프라인 환경에서 서비스 제공
• 앱스토어 배포 없이 빠르게 서비스 론칭

 

작동 방식 3가지

 

1. Web App Manifest

• 웹 앱의 메타 데이터를 정의하는 JSON 파일
• 앱 이름, 아이콘, 시작 URL, 테마 색상 등 사용자가 홈 화면에 추가할 때 필요한 정보를 담음

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

2. Service Worker

• 브라우저 백그라운드에서 실행되는 스크립트로, 캐싱 및 오프라인 기능을 제공
• 사용자가 페이지를 새로고침하거나 인터넷 연결이 끊겨도 콘텐츠 로드가 가능하도록 구현

// sw.js
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            return response || fetch(event.request);
        })
    );
});

 

 

3. HTTPS

• PWA, HTTPS 환경에서만 작동
• 사용자 데이터를 안전하게 보호하고 신뢰를 제공

 

 

작동 흐름

 

1. 사용자가 PWA 지원 웹사이트에 접속
2. Service Worker가 브라우저에 등록되고 백그라운드에서 실행
3. Manifest 파일을 통해 홈 화면 추가 및 앱 설정
4. 오프라인 시에도 캐시된 데이터를 기반으로 사용 가능

 

 

장점

 

- 설치 없이 앱 경험 제공

사용자가 앱스토어에서 다운로드하지 않고도 앱을 사용하듯 웹사이트를 이용할 수 있습니다.

 

- 빠른 로딩 속도

Service Worker를 활용한 캐싱 덕분에 페이지가 즉시 로드됩니다.

네트워크 상태와 관계없이 빠르게 콘텐츠를 제공할 수 있습니다.

 

- 푸시 알림 지원

사용자에게 중요한 업데이트를 푸시 알림으로 전송할 수 있습니다.

 

- 네이티브 앱 개발 비용 절감

하나의 코드베이스로 웹과 앱을 동시에 지원합니다.

다양한 플랫폼(iOS, Android)을 별도로 개발할 필요가 없습니다.

 

- 성공 사례

Starbucks: 99.84% 사용자가 앱 설치 없이 PWA로 서비스 이용

Flipkart: PWA 도입 후 로딩 속도 3배 증가, 재방문율 40% 증가

AliExpress: 푸시 알림 도입 후 사용자 참여도 104% 증가

 

 

한계

 

- 제한된 네이티브 기능

• NFC, 블루투스, 생체 인식(Face ID, Touch ID) 등의 하드웨어 접근 제한
• 백그라운드 작업 및 로컬 파일 시스템 접근 또한 제한적

 

- iOS의 제한사항

• iOS에서는 Safari에서만 PWA가 동작하며, 푸시 알림은 iOS 16.4 이상에서만 지원됨

 

- UX 혼동

• 웹과 앱의 경계에 있어, 사용자들이 혼란스러워할 수 있음

 

- 브라우저별 지원 차이

기능	Chrome	Safari	Firefox	Edge
푸시 알림	지원	제한적	지원	지원
홈 화면 추가	지원	지원	지원	지원
백그라운드 동작	지원	제한적	지원	지원
웹 앱 매니페스트	지원	제한적	지원	지원

 

- PWA 보완하기 (React Native / WebView)

• React Native WebView를 사용해 PWA의 한계를 보완
• WebView는 네이티브 기능을 결합해 하이브리드 앱을 구현할 수 있도록 돕는다!
  (PWA의 장점과 네이티브 앱의 기능을 동시에 활용이 가능하다)

import { WebView } from 'react-native-webview';

<WebView source={{ uri: 'https://your-pwa-url.com' }} />;

 

 

마무리 - 히히 햅삐 솔크

... 커플지옥!!! 커플지옥!!!

 

 

아 뭔가 한게 없는데 여러개 하기도 한거 같고..

내일은 어... 일단 구현나오는거 보고...

PR 점검하고.. 때리고... 본가내려가고...

아아아ㅏ 일단 솔크라서 행복해요(?) 여튼 그렇다구요?

이제 자야지 들으렁...

 

 

오늘의 KPT 회고

 

Keep: 아 우리 팀 분위기 아주 좋아요 ^0^)b

Problem: 피곤해요... 잠잘 시간이 없슈

Try: 그래도 즐거우니까 한잔해~