front-end

[PWA] react에서 PWA 구현

React에서 PWA 구현하는 방법을 알아보자. 일단 create-react-app으로 react 앱을 생성할 것이다. 이때 template 옵션을 cra-template-pwa와 함께 생성하면 된다. npx create-react-app [프로젝트명] --template cra-template-pwa 타입스크립트를 지원하려면 아래와 같이 typescript를 추가로 입력하면 된다. npx create-react-app [프로젝트명] --template cra-template-pwa-typescript template cra-template-pwa 템플릿으로 생성을 하면 Google에서 PWA를 위해 만든 라이브러리인 Workbox가 미리 세팅이 되어 caching 기능을 사용할 수 있도록 만들어진다. ..

2024. 1. 9. 19:03

front-end

[PWA] iOS에서 web push 발송

PWA의 웹푸시 기능 테스트를 하면서 안드로이드의 경우 큰 문제없이 푸시발송이 되지만, iOS는 처음부터 정상적으로 되지 않았다. 그래서 푸시발송을 위해 반드시 필요한 부분을 기억하고자 정리하게 되었다. iOS의 웹푸시는 작년(2023년 하반기 정식지원)부터 지원하는 기능으로 안드로이드보다 불편한것 같다. 여러 가지 제약으로 인해 많은 사용이 되지는 않을 것 같지만, 꼭 필요한 사람에게는 유용한 기능일듯 하다. 아래는 iOS의 safari에서 웹푸시를 수신하기 위한 내용이다. 준비사항 우선 Apple Web Push로 push를 전송하고 safari에서 웹푸시를 받기 위해서 아래사항을 반드시 지켜야 한다. 웹화면에 추가 iOS 버전 확인 (16.4 이상) 및 safari의 Notificaiton API ..

2024. 1. 9. 19:02

front-end

[PWA] Web Push Notification

웹 푸시의 장점 푸시 알림을 왜 사용해야 할까? 푸시 알림을 사용하면 앱(브라우저)가 닫혔을 때도 표시할 수 있다. 백그라운드 프로세스가 있어서 푸시알림을 받을 수 있는 service worker를 사용할 수 있다. 이는 이전에 Android, iOS의 네이티브 애플리케이션의 주요 특징이었지만, 지금은 웹 애플리케이션에서도 가능하다. 푸시 알림은 2가지로 구성되어 있다. 하나는 앱으로 전송하는 서버와 사용자에게 전송되는 알림이다. 우선 사용자의 Nofification을 활성화 할 필요가 있다. 그렇지 않으면 어떤 알림도 표시되지 않는다. 첫 번째 사용자에게 권한을 요청한다. 한번만 승인을 하면 된다. 원한다면 나중에 권한을 제거할 수 있다. 알림은 javascript로 실행이 된다. 사용자가 글을 작성하..

2024. 1. 8. 19:08

front-end

[PWA] Background Sync

Send data event when you're offline Background Sync는 어떻게 동작하는가? Background Sync는 인터넷이 안되는 환경에서 데이터를 전송하는 것이다. 브라우저 웹페이지에서 사용자가 서버로 데이터를 등록한다. 하지만 인터넷 연결이 안되면 등록이 실패할 것이다. 우리의 목표는 서버로 데이터를 전송하는 것이다. 대부분의 경우는 성공하겠지만 인터넷이 안되는 상황에는 그런일이 발생할 가능성이 있다. service worker로 offline 페이지를 표시할 수 있지만, 데이터 전송을 하는 경우는 어떻게 하나? 이런 경우 요청을 일단 저장하고 나중에 가능할 때 전송하면 되지 않을까? service worker는 전송 데이터를 캐싱을 하지는 못한다. 응답만을 캐싱..

2024. 1. 8. 18:52

front-end

[PWA] Caching

Providing Offline Support 웹 앱에서 리소스 캐싱을 하면 오프라인 상태에서도 사용할 수 있다. 그런데 인터넷 연결이 안되는 환경에서 웹앱을 꼭 사용해야할까? 이러한 유스케이스는 여러가지가 있을 수 있는데 그 사례를 한번 보자. 왜 offline 접근을 지원해야 할까? 느린 인터넷 환경(Poor Connection) - 많은 관중들이 군집해 있는 빅 스포츠 이벤트가 있다고 생각해보자. 때때로 인터넷 연결이 느릴수도 혹은 안될수도 있다. 그 중에 여러분은 새 인터넷 뉴스를 보고 싶을 수도 있다. 뉴스를 보기위해서는 몇 개의 이미지와 html 파일만 필요하지만 인터넷이 안되서 동작하지 않는다. 그런 환경에서 service worker로 리소스 파일을 캐싱하여 페이지를 표시할 수 있다. 인터..

2024. 1. 7. 20:27

front-end

[PWA] Service Worker

service worker 많은 훌륭한 기능을 가지고 있다. 인터넷이 안되는 환경에서도 사용할 수 있게 하고 푸시 알림, 백그라운드 동기화와 같은 차세대 애플리케이션 기능을 사용할 수 있게 한다. Service Worker는 무엇인가? 일반적인 javascript부터 이야기 해보자. HTML 페이지에는 기본적으로 로딩되는 javascript 파일이 있다. javascript는 싱글스레드로 동작한다. 사용자가 웹페이지에 방문하면 HTML을 리턴하고 그 페이지에 있는 javascript는 하나의 스레드에서 동작한다는 것이다. 만일 여러개의 javascript 파일이 동일 페이지에서 로딩된다고 할지라도 하나의 스레드에서 코드가 실행된다. 페이지에서 로딩된 javascript 파일은 DOM에 접근할 수 있다. ..

2024. 1. 7. 20:02

front-end

[PWA] Web App Manifest

다음으로 Progressive Web App을 구성하는 핵심기술을 한번 알아보자. PWA에서 가장 중요한 것 중 하나는 web app manifest 파일이다. 하나의 파일로 구성되어 있으며 브라우저에 특정 정보를 줄 수 있으며 애플리케이션이 다르게 표시될 수도 있다. 또한 홈화면 바로가기 아이콘을 설치할 수 있게 한다. 네이티브 앱같이 모바일 디바이스의 홈스크린에 추가할 수 있고 네이티브 앱 처럼 열 수도 있다. 왜 필요한가? Web App Manifest ==> Make Your Web App Installable 사용자들이 웹페이지에 방문하고 다음번에 다시 방문하려면 즐겨찾기에 등록하거나 브라우저에 URL을 입력해야 한다. manifest 파일을 통해 홈화면 아이콘으로 생성해두면 사용자 인터렉션을 ..

2024. 1. 6. 21:21

front-end

[PWA] Progressive Web App은 무엇인가?

PWA에 대해 많이 들어봤을 것이다. PWA는 한마디로 나타내기 어려운 용어이다. PWA는 기존 웹 페이지를 네이티브 모바일 앱과 같이 느끼게 할 수 있도록 하는 것이다. 과거에는 오프라인, 홈 화면 아이콘, 카메라, 위치, 동기화 등은 웹기술로는 하기 어려운 기능이었다. 하지만 2016년 Google I/O 개발자 컨퍼런스에서 처음 소개되고 발전되어서 지금은 웹앱으로도 많은 기능들을 지원한다. 참고: https://www.youtube.com/watch?v=srdKq0DckXQ PWA의 세 가지 키워드 Be reliable - 오프라인일 때도 빠르게 표시하고 사용할 수 있다. Fast - 사용자 액션에 빠르게 응답한다. Engaging - 모바일 디바이스에서 네이티브 앱처럼 느끼게 한다. Mobile ..

2024. 1. 6. 21:03