PWA 란 무엇입니까?

프로그레시브 웹 앱은 웹에 도달할 수 있는 사용자 경험이며 다음과 같습니다.

신뢰성 - 불확실한 네트워크 조건에서도 즉시 로드하고 다운사우루스를 표시하지 않습니다.
빠름 - 비단결처럼 부드러운 애니메이션과 버벅거리는 스크롤 없이 사용자 상호 작용에 빠르게 응답합니다.
참여 - 몰입형 사용자 경험을 통해 장치에서 자연스러운 앱처럼 느껴집니다.

이 새로운 수준의 품질을 통해 Progressive Web Apps는 사용자의 홈 화면에서 한 자리를 차지할 수 있습니다.

1. 서비스 워커 등록

서비스 워커란?
서비스 작업자(주요 리소스를 미리 캐시하는 클라이언트측 프록시)를 사용하면 PWA가 즉시 로드하고 즉시 제공할 수 있습니다.
네트워크 상태에 관계없이 사용자에게 안정적인 경험을 제공합니다.

public 폴더(public/worker.js)에 새worker.js 파일을 만들고 다음 코드를 추가합니다.

Let CACHE_NAME = 'your-app-name';
Let urlsToCache = [
  '/',
  '/completed'
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  Let cacheWhitelist = ['your-app-name'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

메모! 위의 코드에서 (your-app-name)을 앱 이름으로 바꿉니다.

2. 이제 HTML 업데이트

공용 폴더(public/index.html)에서 index.html 파일을 업데이트합니다.
클라이언트의 브라우저가 서비스 워커를 지원하는지 확인합니다. 앱의 body 태그(public/index.html) 안에 아래 코드를 추가하기만 하면 됩니다.

<script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
          }, function(err) {
            console.log('Worker registration failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by browser.');
      }
    </script>

3. ServiceWorker 활성화

이제 src 폴더(src/index.js)에 있는 앱index.js으로 이동합니다.

이제 마지막 줄의 코드 아래처럼 업데이트serviceWorker.unregister() to serviceWorker.register()

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();

다시 시작(npm start)하고 React 앱을 다시 로드합니다. 콘솔에 "Worker registration successful"메시지가 표시되어야 합니다.

4. manifest.json 파일 생성

매니페스트는 웹 애플리케이션에 대해 브라우저에 알리고 사용자의 모바일 장치 또는 데스크톱에 '설치'되었을 때 어떻게 작동해야 하는지 알려주는 간단한 JSON 파일입니다. Chrome에서 홈 화면에 추가 프롬프트를 표시하려면 매니페스트가 있어야 합니다.

일반적인 매니페스트 파일에는 앱 이름, 사용해야 하는 아이콘, 시작할 때 시작해야 하는 start_url 등에 대한 정보가 포함되어 있습니다.

{
    "name": "your-app-name",
    "short_name": "your-app-name",
    "icons": [
        {
            "src": "img/logo.png",
            "sizes": "92x92",
            "type": "image/png"
        },
        {
            "src": "/img/logo.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "img/logo.png",
            "sizes": "152x152",
            "type": "image/png"
        }        
    ],
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#f0f2f5",
    "theme_color": "#96f2d7"
}

그게 다야 🎉 축하합니다. 작동하는 프로그레시브 웹 앱을 만들었습니다!

내 작업에 감사하고 더 멋진 콘텐츠를 위해 나를 팔로우하려면 하트 ❤️를 주세요.

이것은 "이르샤드 알리"

React PWA 데모 확인: https://www.irshadali.site