TIL: PWA란?(실패) - part1

두선아 Dusuna·2022년 8월 21일
0

📖 reference:
1. New PWA Training https://web.dev/new-pwa-training/
2. Mobile Apps - Web vs. Native vs. Hybrid https://www.youtube.com/watch?v=ZikVtdopsfY
3. 프로그래스 웹 앱: 오프라인으로 전환 https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0
4. PWA builder https://www.pwabuilder.com/
5. PWA builder Github https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md

💡 
**PWA 관련 개념 정리, 튜토리얼 정리**
공부시간: 8월 22일 13:00~16:30
목   표: PWA 배포해서 알림 기능 사용해보기
주   제: 네이티브 앱, 모바일 웹, 하이브리드 앱
        PWA,PWAbuilder
        
🥚🐣🐥🐓🤯

💡 
기존 반응형, 또는 모바일 웹으로 개발한 웹 페이지를 PWA로 배포해
휴대폰 알림 등 네이티브 기능을 사용해보고 싶었습니다.
오늘 학습에서 배포에 성공하지 못했기 때문에 part2로 다시 정리할 예정입니다...

PWA, Progressive Web App?

HTML, CSS, JS와 같은 웹 페이지를 App으로 만들고 배포할 수 있는 기능

18일부터 모바일 웹 형식의 팀 프로젝트를 진행하면서

PWA 배포에 흥미가 생겨서 사용법을 익히기 전에,

네이티브 앱, 모바일 웹, 하이브리드 앱, 프로그래시브 웹 앱에 대해서 알아보았습니다.

1. 네이티브 앱, Native App

  • 기본적인 형태의 앱

    네이티브 앱은 각 OS 환경의 가이드와 프레임 워크로 만들어짐
    각각의 SDK를 보유, Single platform

    • 각 스토어에 등록

      모바일 OS개발 도구배포
      iOSSwift, (이전에는 Objective-C)앱스토어
      안드로이드자바, 코틀린플레이스토어

    1. 장점

      • 각 OS의 모든 자원과 기능을 활용할 수 있다.
      • 우수한 성능의 앱을 만들 수 있다. interactive & intuitive

    2. 단점

      • 비용이 비싸다.
      • 특정한 개발 도구를 사용해야 한다.
      • 업데이트를 스토어에 올릴 때 검수기간이 있음
        • 안드로이드(약 몇 시간), iOS(약 며칠)
          각 OS에서 동시에 출시하지 못할 수 있다.

2. 모바일 웹 / 웹 앱, Mobile Web, Web App

  • HTML / CSS / JS
  • 모바일 환경에 특화된 웹 사이트
  • 브라우저 내에서 작동
    1. 장점
      • 스토어를 사용하지 않으므로 유지보수가 쉽다.
      • 언어나 기술에 제한이 없다.
      • 네이티브 앱, 하이브리드 앱보다 비용이 저렴하다.
      • 브라우저를 사용하는 모든 플랫폼에서 사용할 수 있다.
    2. 단점
      • 스마트폰의 모든 자원과 기능을 활용할 수 없음
      • 브라우저내에서만 작동할 수 있다.
      • 네이티브 앱보다 느리다.
      • 모바일 desktop에 아이콘으로 적용할 수 없다.
      • 앱 스토어에 등록할 수 없다.

3. 하이브리드 모바일 웹 Hybrid App Advantages

  • HTML / CSS / JavaScript
    1. 장점
      • 네이티브앱보다 저렴하고 개발 속도가 빠르다.
      • 한 종류의 앱으로 모든 플랫폼에서 사용할 수 있다.
      • 브라우저가 필요하지 않음
      • API를 사용해 디바이스 유틸리티에 접근할 수 있다.
    2. 단점
    • 네이티브 앱보다 느리다.
    • 모바일 웹보다 비용이 비싸다.
  • 주요 개발 툴
    • React Native, Ionic, Cordova / PhoneGap, Xamarin, Mobile Angular UI

4. 프로그래시브 웹 앱 PWA

  • 앱을 배포하고, 앱 안에서 Web View를 통해 웹 페이지를 보여준다.
    • Web View
      • 화면을 보여주는 창
    • Native Level
      • Web View에서 만들고, 웹사이트가 구현할 수 없는 네이티브 기능은 Native레벨에서 처리한다.
  • 특징
    • 개발자의 선택에 따라 순수 iOS 또는 Android를 선택하거나, ionic, Adobe PhoneGap, Cordova 등 프레임워크 선택
    • 사파리에서 “홈 화면에 추가”하면 아이콘으로 사용
    • 통신이 안되는 환경에서도 앱의 오프라인 기능을 사용
  • 푸시 알람, 스토어 출시

PWA 튜토리얼

필요사항

  1. 배포할 웹 페이지
  2. HTTPS 배포는 필수
    • PWA에서 보안은 중요한 요소
  3. Application Manifest
    • app 설정
  4. Sevice Worker
    • 요청을 통제하고 관리

0. 튜토리얼 링크

New Progressive Web App training now available
pwabuilder-web/next-steps.md at V2 · pwa-builder/pwabuilder-web

1. LightHouse 검사 or PWA builder 적합도 검사

2. manifest.json 추가

  • index.html의 레벨에 manifest.json 추가
  • 앱의 테마색, 배경색

3. service-worker.js 추가

  • CRA의 pwa 템플릿 활용
    yarn create react-app . --template cra-template-pwa

4. 리소스 사전 캐시

  • https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#3
  • index.html의 태그 안에 script 추가
    if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => { // 윈도우 로드 시 비동기로 실행
    try {
      const reg = await navigator.serviceWorker.register('서비스 워커 파일 경로');
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}
  • 오프라인 시 작동

    • 사전 캐싱
      - Cache Storage API를 사용하여 열리고 precacheResources에 지정된 파일 및 경로가
      cache.addAll 메서드를 사용하여 캐시에 로드
      - 파일이 필요하거나 요청할 때 캐시하지 않고, 설치 중 미리 캐시
      앱이 오프라인일 때 200 상태 코드로 응답할 수 있다.

      // Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

5. 아이콘 설치 버튼 on off

  • 원하는 위치에 버튼 만듦
  • install.js
    • window의 event ‘beforeinstallprompt’ : 서비스워커가 설치 팝업을 띄울 준비
    • deferredInstallPrompt = event : 변수에 이벤트 할당
    • deferredInstallPrompt.prompt() : 설치 팝업

5. PWA Builder

  • PWA 적합도 판별
  • 파일 Generate ⇒ download PWABuilder
  • 설치가 가능하려면 무엇이 필요합니까? What does it take to be installable?

    manifest.json 충족 기준

    • 웹 앱이 아직 설치되지 않음
    • 사용자 참여 휴리스틱 충족
    • HTTPS를 통해 제공
    • 다음을 포함하는 웹 앱 매니페스트를 포함합니다.
      • short_name 또는 name
      • icons - 192px 및 512px 아이콘을 포함해야 합니다.
      • start_url
      • display fullscreen , standalone 또는 minimal-ui 중 하나여야 합니다.
      • prefer_related_applications이 존재하거나 false여서는 안 됩니다.
    • fetch 핸들러에 서비스 워커를 등록합니다.

Ngrok: 로컬 호스트를 https 배포

ngrok - secure introspectable tunnels to localhost

ngrok http 5000
  • 리액트
ngrok http 3000 -host-header="localhost:3000”

token에러 처리에 1시간

  1. authtoken은 하이퍼 

    ngork authtoken 토큰

  2. 시동 코드는 VSC 터미널

    ngork authtoken 토큰
profile
두선아 Dusuna
안녕하세요.
이전 포스트

노션 페이지 복구👍

다음 포스트

Vite 간단 사용법

0개의 댓글