본문 바로가기
카테고리 없음

[WebApp] PWA , Expo 활용 방법

by eujin 2024. 6. 10.

안녕하세요 윾진입니다.

 

웹을 만들었는데 앱으로도 바로 만들기가 가능하다 ?

이거 완전 럭키웹앱이잖아?🍀

1. 웹앱(Web App)

  • 웹앱(Web Application) : 브라우저에서 실행되는 앱임.
  • 서버에서 데이터를 가져와서 화면에 보여주고, 사용자가 입력한 데이터를 서버로 보내는 방식임.
  • 보통 인터넷만 있으면 PC나 모바일 어디서나 접근 가능함.

=> 웹앱 특

  • 접근성 좋음: 인터넷만 되면 브라우저에서 바로 사용 가능.
  • 배포 쉬움: URL만 알려주면 누구나 접속 가능, 스토어에 등록 필요 없음.
  • 유지보수 편함: 서버에서 업데이트하면 모든 사용자에게 바로 반영됨.

=> 웹앱 단점 ㅠㅠ

  • 네이티브 기능 부족: 카메라, GPS, 푸시 알림 같은 기능 사용 어려움.
  • 오프라인 사용 어려움: 기본적으로 인터넷 연결이 필요함.

2. PWA(Progressive Web App)

  • PWA는 웹앱에 네이티브 앱 같은 기능을 더한 앱임.
  • 설치 가능하고, 오프라인 지원, 푸시 알림 기능까지 제공함.
  • 앱처럼 보이지만, 사실은 웹앱임.

=> PWA 간단한 구현법

  1. manifest.json 파일 추가: 앱의 기본 정보와 아이콘을 설정하는 파일임.
json
{
"name": "PWA Example",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
  "src": "/icon-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
}
]
}

 

2. 서비스 워커 설정: 네트워크 요청을 캐싱해서 오프라인에서도 동작하게 만듦.

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-cache').then((cache) => {
      return cache.addAll(['/', '/index.html', '/styles.css']);
    })
  );
});

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

 

=> PWA 장점

  • 설치 가능: 브라우저에서 바로 설치할 수 있음. 앱처럼 홈 화면에 추가 가능.
  • 오프라인 사용 가능: 캐싱을 통해 인터넷 연결이 없어도 작동함.
  • 푸시 알림 지원: 브라우저를 통해 푸시 알림 받을 수 있음.
  • 네이티브 앱 따로 공부 안해도 됨 ㅋㅋ 
  • 기존의 웹사이트를 앱으로 만들 수 있기 때문에, 추가로 유지관리해야 하는 코드베이스가 적음
  • 기본적으로 반응형(responsive)

=> PWA 단점 ㅜㅜ

  • 브라우저 의존적: 브라우저가 PWA를 지원해야 함.
  • 제한된 네이티브 기능: 일부 네이티브 기능은 여전히 지원 어려움.

=> PWA 적용 기업

스타벅스

스벅 홈페이지 (starbucks.com)을 모바일 환경에서 접속하면 , PWA를 홈 화면에 설치 가능하다!

별 차이가 없지요 ?

기능도 차이 없다.

 

트위터

Twitter Lite 라는 이름으로 제공중이다.

인터넷 속도나 기기 성능이 낮은 모바일 사용자를 위한 경량화 버전.

대기시간 30% 이상 감소 , 로딩 속도 75% 이상 향상됨!

 

그 외 트리바고 , 넷플릭스 등등 PWA 기술 적용하는 기업이 많다!

 

 

3. Expo에 대해서

  • Expo : React Native를 이용해서 네이티브 모바일 앱을 쉽게 만들 수 있게 도와주는 도구임.
  • 웹앱을 네이티브 앱으로 포팅하는 데 유용함.

=> Expo 간단한 구현법

1. Expo CLI 설치 : 전역 설치 필요

npm install -g expo-cli

 

2. 새 프로젝트 생성 : 기본 설정으로 시작

expo init KnowGet

 

3. WebView 추가 : 웹앱 표시하기 위해 사용함

// App.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <View style={styles.container}>
      <WebView source={{ uri: 'https://your-web-app-url' }} style={styles.webview} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

 

4. 실행 : Expo 앱으로 실행해서 테스트

expo start

 

5. pwa 설정 추가

{
  "expo": {
    "name": "My PWA App",
    "platforms": ["ios", "android", "web"],
    "web": {
      "favicon": "./path-to-favicon.png",
      "config": {
        "manifest": {
          "short_name": "MyPWA",
          "theme_color": "#ffffff",
          "background_color": "#ffffff",
          "display": "standalone",
          "scope": "/",
          "start_url": "/"
        }
      }
    }
  }
}

 

6. 배포

npx expo build:web

 

=> Expo 장점

  • 네이티브 기능 사용 가능: 카메라, 위치 정보, 푸시 알림 등 다양한 네이티브 기능 사용 가능.
  • 스토어 배포 용이: iOS, Android 스토어에 배포 가능. 크로스 플랫폼 애플리케이션을 쉽게 구축
  • 빠른 개발 환경: 다양한 도구와 라이브러리가 이미 설정되어 있어 개발 속도가 빠름.
  • Expo를 사용하면 PWA 개발이 단순

=> Expo 단점

  • 패키지 크기 증가: Expo의 모든 기능이 포함되면서 앱의 크기가 커질 수 있음.
  • 맞춤화 제한: Expo가 지원하지 않는 네이티브 기능은 사용하기 어려움.

4. Spring + Vue 기반에서 실시간 알림 서비스 구현 시 적합한 방법

일단 우리는 spring + vue3 사용해서 만든 웹 서비스를 웹앱으로 구현하는 것이 목표이기 때문에 그에 맞는 적합한 방법을 찾아두자.

 

=> 정답은 없지만 Expo 를 사용한다면 ?

실시간 API 연동과 푸시 알림 기능이 필요하면 Expo를 이용한 네이티브 앱이 적합함.

이유는 아래와 같음.

 

1. 네이티브 기능 지원 :
Expo는 WebSocket, Firebase, 네이티브 푸시 알림 등을 완전히 지원함.
이 덕분에 실시간 데이터와 푸시 알림 기능을 원활하게 구현할 수 있음.
Expo는 WebSocket, Socket.io와 같은 라이브러리를 사용하여 실시간 데이터 전송 및 상호작용을 지원
Expo는 자체 푸시 알림 서비스를 제공하여 iOS 및 Android에서 푸시 알림을 쉽게 설정하고 관리할 수 있게 함.

 

WebSocket 및 Socket.io 지원 =>

npm install socket.io-client
import io from 'socket.io-client';
const socket = io('http://your-server-url');
socket.on('connect', () => {
  console.log('Connected to server');
});

 

Expo 푸시 알림 서비스:=>

npx expo install expo-notifications

 

import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

async function sendPushNotification() {
  const message = {
    to: 'ExponentPushToken[xxxxxxxxxxxxxx]',
    sound: 'default',
    title: 'New Notification',
    body: 'You have a new message!',
    data: { data: 'goes here' },
  };
  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Accept-encoding': 'gzip, deflate',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

 

 

2. 크로스 플랫폼 지원 :
Expo 앱은 iOS와 Android 스토어에 배포할 수 있어 사용자들에게 설치를 쉽게 제공할 수 있음.

 

좀 급하게 쓴 게시글이라 추후 보완 (예제 코드들 추가 등등..) 해서 올리겠슴니다.

윾진이었습니다,

티스토리툴바