프로그레시브 웹 응용 프로그램을 만드는 방법

Sep 11, 2025

어떻게

모바일은 웹의 트래픽의 절반 이상을 차지할 수 있으며 웹 응용 프로그램을 사용하면 사용자가 브라우저에서 라이벌 애플리케이션에 대한 것들을 수행 할 수 있지만 문제가 있습니다. 연결 및 장치의 품질은 전 세계적으로 대량으로 다릅니다.

서울에서의 번개가 빠른 연결에 이르기까지 사용자 모두와 건물 인도의 사용자는 최신의 사용성 챌린지이며 진보적 인 웹 앱이 솔루션입니다.

PWAS는 프로그레시브 향상을 사용하여 가장 중요한 내용을 먼저로드 한 다음 필요에 따라 프리젠 테이션 및 기능성 엑스트라를 추가합니다. 즉, 모든 사용자가 가능한 한 빨리 동일한 핵심 경험을 얻을 수 있습니다. 가능한 가장 넓은 잠재 고객에게 다가 가고 싶다면 Pwas는가는 길입니다.

매력적인 사용자 경험을위한 10 단계

프로그레시브 웹 응용 프로그램은 웹에 많은 혜택과 기능을 제공하지만 전체 응용 프로그램을 다시 작성할 필요가 없습니다. 모든 앱은 몇 가지 추가 레이어를 추가하여 PWA로 변환 할 수 있습니다.

최상의 결과를 얻으려면 처음부터 성능에 강력한 강조를 원할 것입니다. 그러나 그것은 모든 웹 앱에 해당됩니다. 여기서 우리는 당신의 앱을 진보적으로 만드는 단계를 걸어 갈 것입니다.

원활하게 실행중인 사이트를 작성하려면 다음을 수행하십시오. 웹 호스팅 자리 켜져 있고 괜찮습니다 웹 사이트 빌더 ...에

01. HTTPS를 통해 봉사하십시오

솔직히 말해 봅시다. 어쨌든이 일을해야합니다. SSL은 사용자가 사이트를 사용하여 사용자가 안전하게 느끼는 것을 웹에 추가 보안 계층을 추가합니다. PWAS를 사용하면 HTTPS가 서비스 근로자를 사용하고 홈 화면 설치를 허용하는 데 필수적입니다. 도메인 등록자의 SSL 인증서를 거의 비용으로 구입 한 다음 호스팅 서비스를 통해 구성 할 수 있습니다.

02. 응용 프로그램 셸을 만듭니다

앱 셸은 사용자가 보는 첫 번째 일인 첫 번째 일입니다. 인라인 CSS를 사용하여 인라인 CSS에서는 인라인 HTML 문서에 완전히 존재해야하며 사용자가 필요한 것보다 오래 동안 쳐다 보지 않도록 사용자가 흰색 화면을 쳐다 보지 않도록하십시오. 응용 프로그램 쉘은 프로그레시브 향상 패턴의 일부를 형성합니다. 앱은 가능한 한 빨리 사용자 콘텐츠를 제공 한 다음 더 많은 데이터 (자바 스크립트)로드로 점진적으로 향상시켜야합니다.

아래 예제는 React.js 응용 프로그램에서 가져옵니다. 사용자는 앱의 개요와 index.html의 로딩 표시기가 제공됩니다. 그런 다음 JavaScript가로드되고 부팅 되돌아 가면 전체 응용 프로그램이 셸 내에 렌더링됩니다.

& lt;! - index.html - & gt; & lt; body & gt; & lt; div id = "root"& gt; & lt; Div ID = "컨테이너"& gt; & lt; div class = "내부 컨테이너"& gt; & lt; div id = "header"& gt; & lt; img src = "/ assets / icon.png"alt = "logo"/ & gt; & lt; h1 & gt; 채팅 & lt; / h1 & gt; & lt; / div & gt; & lt; Div ID = "로딩 - 컨테이너"& gt; & lt; img src = "/ assets / icon.png"alt = "logo"id = "로더"/ & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; // index.js. reactedom.erender ( & lt; app / gt; document.getElementById ( 'root') );

03. 서비스 업체를 등록하십시오

PWA Goodies의 전체 스펙트럼을 활용하려면 (푸시 알림, 캐싱, 설치 프롬프트) 서비스 작업자가 필요합니다.

운 좋게도, 그들은 꽤 쉽게 설정할 수 있습니다. 아래에서는 먼저 사용자의 브라우저가 서비스 근로자를 지원하는지 확인합니다. 그런 다음, 그렇다면 우리는 여기에 서비스 작업자 파일을 등록하는 데 앞서 이동할 수 있습니다. Service-Worker.js. ...에 이 시점에서 해당 파일 안에는 특별한 것은 필요하지 않습니다. 비워 둘 수 있습니다.

그러나 아래 예제에서는 세 가지 주요 서비스 근로자 수명주기 이벤트를 활용하는 방법을 보여줍니다. 사용자가 먼저 페이지를 방문하면 '설치'입니다. 등록이 완료되기 직전에 '활성화'; 응용 프로그램이 네트워크 요청을하면 '페치'를 제공합니다. 마지막 하나는 캐싱 및 오프라인 기능과 관련이 있습니다.

& lt; script & gt;
  if ( '탐색기의'serviceworker ') {
  window.addeventListener ( 'load', function () {
  Navigator.ServiceWorker.Register ( 'service-worker.js'). 그런 다음 (함수 (등록) {
  // 등록이 성공했습니다
  console.log (등록! ');
  }, 함수 (ERR) {
  // 등록 실패 :(
  console.log ( 'ServiceWorker 등록 실패 :', Err);
  }). catch (함수 (오류) {
  console.log (Err);
  });
  });
  } else {
  console.log ( '서비스 작업자는 지원되지 않음');
  }
  & lt; / script & gt;
// service-worker.js.
self.addeventListener ( '설치', 함수 () {
  console.log ( '설치!');
});
self.addeventListener ( "활성화", 이벤트 = & gt; {
  console.log ( '활성화!');
});
self.addeventListener ( 'fetch', 함수 (이벤트) {
  console.log ( '페치!', event.request);
});

04. 푸시 알림을 추가합니다

서비스 작업자는 사용자가 웹 푸시 API를 통해 푸시 알림을 수신 할 수있게합니다. 액세스하려면 다음을 활용할 수 있습니다 self.registration.pushmanager. 서비스 작업자 파일 내에서. 푸시 알림을 보내는 것은 백엔드 설정에 크게 의존하기 때문에 여기에서 다이빙을하지 않을 것입니다.

처음부터 앱을 시작하는 경우 Google의 Firebase 서비스는 상대적으로 통증없는 푸시 알림을 위해 Firebase Cloud 메시징과 함께 제공됩니다 (설계 파일을 안전하게 지키는지 확인하십시오. 클라우드 스토리지) ...에 아래 코드는 푸시 API를 통해 푸시 알림에 등록하는 방법을 보여줍니다.

 Navigator.ServiceWorker.ready.then (기능 (등록) {
  if (! registration.pushmanager) {
    경고 ( '푸시 알림 지원 없음');
    거짓 반환;
  }
  // 푸시 관리자에서`푸시 알림을 구독합니다
  registration.pushmanager.subscribe ({
  userVisivelOnly : true // ancation allowing yention.
  })
  .then (함수 (가입) {
  console.log ( '가입');
  })
  .catch (함수 (오류) {
  console.log ( '가입 오류 :', 오류);
  });
})

05. 웹 앱을 추가하십시오

응용 프로그램을 설치할 수있게하려면 다음을 포함시켜야합니다. manifest.json. 응용 프로그램의 루트 디렉토리에서. 앱 스토어에 제출할 수있는 것과 비슷한 응용 프로그램에 대한 설명으로이를 생각할 수 있습니다. 아이콘, 스플래시 화면, 이름 및 설명이 포함됩니다.

사용자의 홈 화면에서 실행될 때 응용 프로그램이 나타나는 방법에 대한 구성이 있습니다. 브라우저에서 주소 표시 줄을 표시 하시겠습니까? 상태 표시 줄을 원하는 색상은 무엇입니까? 등등. 적절한 것입니다 manifest.json. 다양한 장치에 대한 아이콘 크기의 전체 스펙트럼을 포함해야합니다. 아래 코드는 매니페스트가 포함될 수있는 속성 중 일부의 미리보기입니다.

 {
  "short_name": "채팅",
  "이름": "채팅",
  "아이콘": [
  {
  "src": "/ 자산 / icon.png",
  "크기": "192x192",
  "유형": "이미지 / png"
  }
  ],
  "start_url": "/? utm_source = homescreen",
  "background_color": "# e05a47",
  "theme_color": "# e05a47",
  "디스플레이": "독립형"
}

06. 설치 프롬프트를 구성합니다

사용자가 서비스 근로자와 매니페스트와 함께 PWA를 방문하면 Chrome은 다음과 같은 경우 사용자가 사이트를 두 번 방문해야합니다. 방문 사이에는 5 분이 소요됩니다.

여기에있는 아이디어는 사용자가 귀하의 신청서에 관심을 보여줄 때까지 기다린 것입니다. 그런 다음 그들의 장치의 고정물을 묻도록 요청합니다 (이것은 투자를 묻는 원시 앱 접근 방식과는 대조적으로 대조적입니다.

그러나 사용자가 특별한 유용한 조치를 취하는 것과 같이 다른 상황에서 설치 프롬프트를 표시하려는 경우가있을 수 있습니다. 그렇게하기 위해, 우리는 그를 가로 챌 수 있습니다 beforeinstallprompt. 이벤트 및 나중에 저장 한 다음 Fit을 볼 때 프롬프트를 배포합니다.

 window.addEventListener ( 'beforeInstallPrompt', E = & gt;
  console.log ( 'beforeInstallPrompt 이벤트 해제');
  e.preventDefault ();
  // 이벤트를 숨겨 나중에 트리거 할 수 있습니다.
  이것은, eDeferredPrompt = e;
  거짓 반환;
  });
// 프롬프트를 트리거하려는 경우 :
이명. PROMPT.PROMPT ();
  이것은, edeferredPrompt.UserChoice.then (선택 = & gt; {
  console.log (선택);
  });
이것은 edeferredprompt = null;

07. 앱의 성능을 분석하십시오

공연은 PWA의 마음과 영혼입니다. 응용 프로그램은 모든 네트워크 조건에서 사용자에게 빠르게되어야합니다. 캐싱 및 오프라인 기능은 많은 도움이되지만 하루가 끝나면 사용자가 서비스 작업자 기술을 지원하기 위해 브라우저가없는 경우에도 응용 프로그램이 빠르게되어야합니다. 이것은 프로그레시브 향상의 정의입니다. 장치 근대성 또는 네트워크 상태에 관계없이 모든 사람에게 훌륭한 경험을 제공합니다.

이렇게하려면 유용한 메트릭 세트가 레일 시스템입니다. RAIL은 Google이 '사용자 중심 성능 모델'을 호출하는 것 - 앱의 성능을 측정하기위한 지침 세트입니다.

약어는 응답을 의미합니다 (사용자 작업에 응답하는 데 걸리는 시간), 애니메이션 (60fps의 애니메이션 속도 유지), 유휴 (앱이 추가 자산을로드하고 캐시하는 데 시간을 할 때 시간을 사용하지 않아도됩니다) 로드 (1 초 이내에 앱로드).

다음은 Meggin Kearney가 제공 한 기술적 인 벤치 마크의 테이블이 있습니다. Google 웹 기초 ...에

delay and user reaction — 오른쪽 상단의 아이콘을 클릭하여 이미지를 확대하십시오.

08. 등대가있는 앱을 감사하십시오

Google은 웹의 미래로 진보적 인 웹 앱을 밀어 넣는 가장 큰 챔피언입니다. 따라서 PWA 개발을 안내하기위한 유용한 도구를 제공했습니다.

이전에는 등대라고 불리우며 Chrome 60의 Chrome Extension으로 공급됩니다. Chrome DevTools의 일부는 '감사'탭 아래에 있습니다. 등대가 다른 조건에서 응용 프로그램을 실행하고 PWA 가이드 라인에 따라 응답과 성공을 측정하는 것입니다. 그런 다음 100의 점수를 제공합니다. 동시에 웹 모범 사례에서 앱을 득점 할 수도 있습니다.

다음 텍스트는 Lighthouse가 측정 된 값 목록입니다. 사용 중에도 설명이 표시됩니다.

서비스 근로자를 등록합니다
오프라인으로 200 개로 응답합니다
JavaScript를 사용할 수없는 경우 일부 콘텐츠가 포함되어 있습니다
HTTPS를 사용합니다
HTTP 트래픽을 HTTPS로 리디렉션합니다
페이지 하중은 3G에서 충분히 빠릅니다
사용자는 웹 응용 프로그램을 설치하라는 메시지를 표시 할 수 있습니다
사용자 정의 스플래시 화면으로 구성됩니다
주소 막대는 브랜드 색상과 일치합니다
A. & lt; meta name = "뷰포트"& gt; 태그를 가지고있다 폭 또는 초기 스케일
콘텐츠는 뷰포트에 맞게 크기가 정확하게 크기입니다

이 기사는 원래 웹 디자이너에 나타났습니다. 여기를 구독하십시오 ...에

관련 기사:

PWAS : 모바일 혁명에 오신 것을 환영합니다
모바일 앱에서 애니메이션을 사용하는 방법
9 놀라운 PWA 비밀

프로그레시브 웹 응용 프로그램을 만드는 방법

01. HTTPS를 통해 봉사하십시오

02. 응용 프로그램 셸을 만듭니다

03. 서비스 업체를 등록하십시오

04. 푸시 알림을 추가합니다

05. 웹 앱을 추가하십시오

06. 설치 프롬프트를 구성합니다

07. 앱의 성능을 분석하십시오

08. 등대가있는 앱을 감사하십시오

어떻게 - 가장 인기있는 기사

디자인 포트폴리오를 개선하는 방법

종이 접기 스튜디오가있는 모바일 앱을 프로토 타입하는 방법

Zbrushcore에서 디지털 방식으로 조각하는 방법

잉크에 유기 텍스처 생성

설득력을 칠하는 방법

사용자 정의 Maya 인터페이스 만들기

3D 인쇄를위한 작업 준비 : 8 탑 팁

Zbrush에서 만화 머리를 조각하고 포즈하는 방법

카테고리