프로그레시브 웹 앱 튜토리얼: 첫 번째 PWA 만들기

Google이 자체적으로 만들고 현재 Windows 10과 같은 인기 있는 플랫폼에 푸시되고 있는 PWA는 푸시 알림, 매력적인 앱 인터페이스, 오프라인 기능, 앱 설치와 같은 기능을 포함하여 이전에 기본 애플리케이션에 독점적이었던 많은 작업을 수행할 수 있습니다. .

이것이 바로 우리가 알고 있는 웹을 근본적으로 변화시킬 수 있는 전면적인 대규모 운동이기 때문에 PWA의 출현이 더 이상 일시적으로 설정되지 않는 이유입니다. PWA를 구축하는 프로세스가 이전보다 훨씬 간소화되어 관심 있는 일반 사용자에게 적합하므로 신규 사용자의 경우 이 새로운 기술을 아는 것이 너무 늦지 않았습니다.

최고의 학습 목적을 위해 오늘은 React, Node.js 및 Firebase를 사용하여 완전한 기능을 갖춘 PWA를 만들 것입니다.

전제 조건

• Node.js 버전 >= 8.10
• npm 버전 >= 5.6

참고 : npm 버전은 Node.js 를 설치할 때 항상 최신 버전의 npm 패키지 관리자와 함께 제공되므로 문제가 되지 않아야 합니다.

1. create-react-app 으로 SPA 생성

먼저 작업할 견고한 것이 필요하며 create-react-app 은 이러한 목적을 위한 완벽한 도구입니다.

 npx create-react-app my-PWA
cd my-pwa
npm 시작

위의 명령은 학습할 수 있는 React 기반 환경을 만드는 데 도움이 됩니다.

HTTPS를 통해 제공

HTTPS는 웹의 새로운 표준이며 PWA가 등장하면서 점점 더 주류가 되었습니다. 일반적으로 PWA는 서비스 워커 자체가 HTTPS 없이는 작동할 수 없으므로 HTTPS를 통해 제공 되어야 합니다. 그러나 우리는 localhost 환경에서 작업하고 있기 때문에 필요하지 않습니다.

2. 오프라인에서 작동하도록 설정

기본적으로 create-react-app 서비스 작업자는 사용자가 연결이 없거나 후속 방문 시 오프라인 캐싱 및 콘텐츠 로드를 처리하도록 사전 구성되어야 합니다.

서비스 워커는 간단히 말해서 페이지와 별도의 스레드에서 실행되는 JavaScript 스크립트이므로 DOM 구조에 액세스할 수 없습니다. 이 새로운 접근 방식은 서비스 작업자가 이제 PWA의 모든 일반적인 기능(오프라인 기능, 푸시 알림 등)을 처리할 뿐만 아니라 무거운 계산을 덜어주는 데 큰 역할을 하므로 보다 진보적이고 성능을 향상시키는 기능을 제공합니다. 별도의 스레드에 웹사이트의

PWA에 서비스 워커를 설치하려면 /src/index.js 를 살펴봐야 합니다.

index.js 에서 다음 줄을 찾으십시오.

 serviceWorker.unregister()

unregister() 를 register() )로 변경하면 my-pwa 를 프로덕션 모드 에서 실행할 때 서비스 워커가 자동으로 등록됩니다. PWA가 최신 로컬 변경 사항을 포함하지 않고 캐시된 자산만 로드하는 경우가 발생할 수 있으므로 개발 모드에서 서비스 워커를 활성화하지 않는 것이 좋습니다.

my-pwa 를 프로덕션 모드에서 실행하려면:

 npm 실행 빌드
npx 서브 빌드 

그런 다음 Chrome을 열고 localhost:5000 으로 이동하여 검사하면 이제 애플리케이션 탭에서 서비스 워커가 제대로 실행되는 것을 볼 수 있습니다.

그리고 Cache Storage 카테고리 아래에는 사이트의 오프라인 콘텐츠가 제대로 캐시되고 있는지 확인하려는 곳이 있습니다.

참고 : 비프로덕션 모드에서 서비스 워커를 등록하는 해결 방법이 있습니다. 이것은 src/serviceWorker.js 에서 process.env.NODE_ENV === 'production' 라인을 제거함으로써 달성됩니다.

이에 대해 더 파고들어 React의 사전 구성된 구성에 의존하지 않고 처음부터 자신의 서비스 워커를 만들고 싶다면 우리가 있습니다. 이 자습서에서는 간단한 웹 앱에서 오프라인 우선 프로그레시브 웹 앱을 만드는 방법을 보여줍니다.

3. 홈 화면에 추가 설정

지금까지 모든 것이 제대로 완료되었다면 my-pwa 의 프로덕션 빌드를 시작할 때 작은 설치 아이콘(+)이 표시되어야 합니다.

모든 것이 자동으로 수행되기 때문에 이 모든 것이 어떻게 가능했는지 궁금할 것입니다. 걱정하지 마세요. 그래서 우리가 여기 있습니다.

PWA A2HS(홈 화면에 추가)를 준비하려면 manifest.json 이 필요합니다. create-react-app 과 함께 제공되는 manifest.json 은 앱 아이콘이 사용자에게 표시되는 방식을 결정하고 시작 화면 모양을 정의하는 매우 기본적인 JSON 파일입니다. 이를 사용자 정의하려면 /public/manifest.json 에서 기존 파일을 변경하십시오.

 {
  "short_name": "내 첫 번째 PWA",
  "이름": "간단한 PWA 만들기",
  "아이콘": [
    {
      "src": "favicon.ico",
      "크기": "64x64 32x32 24x24 16x16",
      "유형": "이미지/x-아이콘"
    },
    {
      "src": "logo192.png",
      "유형": "이미지/png",
      "크기": "192x192"
    },
    {
      "src": "logo512.png",
      "유형": "이미지/png",
      "크기": "512x512"
    }
  ],
  "start_url": ".",
  "디스플레이": "독립형",
  "테마_색상": "#000000",
  "background_color": "#ffffff"
}

여기에 있는 대부분의 내용은 자명하지만, manifest.json 및 PWA 설치로 이어지는 이벤트에 대해 더 자세히 알고 싶다면 이에 대한 글을 작성했습니다. 확인하는 것을 잊지 마십시오.

참고 : manifest.json 이 작동하려면 index.html 에 포함해야 합니다. 기본적으로 create-react-app 이 이미 이 작업을 수행해야 합니다.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

PWA를 서비스 워커에 등록하고 적절한 manifest.json 을 가지고 있으면 사용자가 앱을 시작하면 beforeinstallpromt 가 실행되어 사용자의 홈 화면에 PWA를 설치할 수 있는 권한을 요청합니다.

그러나 우리는 A2HS(홈 화면에 추가) 프로세스의 표면을 긁고 있을 뿐이며 아직 배울 것이 더 많다는 점에 유의해야 합니다. 무엇이든 배울 수 있는 가장 좋은 방법은 처음부터 구축하는 것이므로 PWA의 이 특정 기능에 대한 짧은 가이드를 준비했습니다. 이 가이드는 PWA 설치 이벤트의 몇 가지 중요한 부분을 안내합니다.

또는 게으르고 의욕이 없다면 저희가 도와드리겠습니다. 매니페스트 생성기는 이 전체 프로세스를 자동화하도록 만들어졌습니다.

4. 푸시 알림 설정

브라우저는 푸시 알림 지원에 있어 먼 길을 왔습니다. 최근에 Chrome은 비행기 모드에서 알림을 표시할 수 있도록 알림 트리거를 도입했습니다. 이는 푸시 알림의 큰 발전입니다.

그리고 지금쯤이면 이 튜토리얼에서 Firebase를 사용하는 부분이 어디에 있는지 궁금할 것입니다. 자, 바로 이것입니다. 이 부분에서는 Firebase를 사용하여 푸시 알림을 PWA에 통합하는 프로세스, 특히 HTTPS 요청을 사용하여 메시지를 보낼 수 있는 클라우드 메시징 기능에 대해 알아봅니다.

그러나 전체 프로세스가 약간 길기 때문에 전체 프로세스를 더 잘 추적할 수 있도록 자체 푸시 알림 통합 자습서를 준비했습니다. 이 자습서를 사용하면 사용자 토큰이나 사용자 그룹에 푸시 알림을 보내려고 할 때 문제가 발생하지 않아야 합니다.

결론

그리고 그것이 완전한 PWA를 위한 것입니다. 튜토리얼의 어느 부분에서든 막혔다면 언제든지 질문을 보내주세요. 최선을 다해 답변해 드리겠습니다!

더 읽어보기:
Magento 2에서 PWA를 통합하는 방법