• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12#.8ij9db899 

Progressive Web Apps with React.js: Part I — Introduction

프로그레시브 웹 앱은 새로운 기술을 활용하여 최고의 모바일 사이트 및 기본 앱을 사용자에게 제공합니다. 그들은 신뢰성 있고 빠르며 매력적입니다. 네트워크 상태에 관계없이 보안 원점 및 로드에서 시작됩니다.

프로그레시브 웹 앱스 (PWA)의 세계에는 새로운 것이 있으며, Webpack과 같은 React 및 JS 모듈 번들과 같은 라이브러리를 사용하여 기존 아키텍처와 얼마나 호환되는지 궁금 할 수 있습니다. PWA는 도매 재 작성(Wholesale rewrite)을 요구합니까? 어떤 웹 성능 메트릭에 주목해야 합니까? 이 일련의 게시물에서 React 기반 웹 응용 프로그램을 PWA로 바꾸는 경험을 나눌 것입니다. 우리는 또한 사용자가 경로에 필요한 것과 다른 스크립트를 모두 버리는 것이 왜 빠른 성능을 위한 좋은 아이디어인지 설명합니다.

Lighthouse

PWA 체크리스트부터 시작하겠습니다. 이를 위해 PWA 기능에 대한 앱 감사 도구를 사용하고 에뮬레이트된 모바일 조건에서 앱이 웹 성능을 높이는 기준을 충족하는지 확인할 수있는 등대 (Lighthouse)를 사용할 것입니다. Lighthouse는 Chrome 확장 프로그램 (이 버전을 가장 자주 사용함)과 CLI로 제공되며 둘 다 다음과 같은 보고서를 제공합니다.

최상위 감사(audit) 등대 (Lighthouse)는 모바일 세상을 위해 세련된 최신 웹 우수 사례 모음을 효과적으로 운영합니다.

• 네트워크 연결이 안전합니다.
• 사용자가 홈 화면에 추가하라는 메시지를 표시 할 수 있습니다.
• 설치된 웹 응용 프로그램이 사용자 정의 시작 화면으로 실행됩니다.
• 오프라인 / 불안정한 연결에 앱로드 가능
• 페이지로드 성능이 빠름
• 모바일 친화적 인 디자인
• 사이트가 점진적으로 향상됨
• 브랜드 표시 줄과 일치하는 주소 표시 줄

그 사이에, Lighthouse에 대한 시작 안내서가 있으며 원격 디버깅을 통해 작동합니다. 멋지다.

스택에 어떤 라이브러리가 있는지에 관계없이 위 목록의 모든 내용을 약간의 작업만으로 오늘 수행 할 수 있음을 강조하고자 합니다. 그러나 주의 사항이 있습니다.

모바일 웹이 느린 것을 알고 있습니다.

웹은 문서 중심 플랫폼에서 일류 응용 프로그램 플랫폼으로 진화했습니다. 동시에 우리 컴퓨팅의 대부분은 빠르고 신뢰할 수있는 네트워크 연결을 갖춘 강력한 데스크톱 컴퓨터에서 느린(slow), 색다른(flaky) 또는 둘 다(or both) 연결이있는 상대적으로 낮은 전력의 모바일 장치로 이동했습니다. 이는 향후 10억 명의 사용자가 온라인에 접속하는 세계에서 특히 그러합니다. 빠른 모바일 웹의 잠금을 해제하려면 다음 단계를 따르세요.

• 현실적인 네트워크 연결 (예: DevTools의 일반 3G)에서 실제 모바일 장치를 테스트하기 위해 집합 적으로 전환해야합니다. chrome://inspect와 WebPageTest (video)는 여러분의 친구입니다. Lighthouse는 터치 이벤트, 뷰포트 에뮬레이션 및 조절 된 네트워크 연결 (150ms 대기 시간, 1.6Mbps 처리량)으로 Nexus 5X를 에뮬레이트합니다.

• 사용중인 JS 라이브러리가 모바일을 염두에두고 개발되지 않은 경우 상호 작용할 때 perf에 대한 힘든 전투를 수행 할 수 있습니다. 우리는 대표적인 장치로 5 초 이내에 대화식으로 작업하는 것을 이상적으로 목표로하고 있습니다. 따라서 앱 코드 예산의 상당 부분은 ❤입니다.

몇 가지 작업을 통해 Housing.com에서 설명한대로 제한된 네트워크 조건에서 실제 장치에서 잘 수행되는 React로 PWA를 작성할 수 있습니다. 우리는이 시리즈의 후반부에서 이것을 어떻게 자세하게 설명하는지 이야기 할 것입니다.

즉, 이것은 많은 라이브러리 개선을 위해 노력하고있는 분야이며, 물리적인 장치에서 성능을 유지하려는 경우에 필요할 수도 있습니다. Preact가 실제 장치로 perf에서 수행중인 A+ 작업을 살펴보십시오.

Open-source React Progressive Web App samples

React로 제작되고 Lighthouse에 최적화 된 PWA의 비교적 단순한 예제를 수행 한 후에 관심이 있을 수 있습니다. ReactHN은 - 서버 측 렌더링 및 오프라인 지원 또는 iFixit을 사용하는 HackerNews 클라이언트 - React로 구축되었지만 상태 관리를 위해 Redux를 사용하는 하드웨어 복구 안내서입니다. 

Lighthouse 보고서의 각 항목을 확인하고 React.js 시리즈의 특정 팁을 계속 진행하기 위해 필요한 작업을 수행해 봅시다.

Network connection is secure

Tooling and tips for HTTPS

HTTPS는 나쁜 액터(bad-actors)가 앱과 사용자가 사용하는 브라우저 간의 통신을 방해하지 못하도록하며, Google이 암호화되지 않은 수치스러운(shame) 사이트로 몰고가는 것을 읽었을 수 있습니다. Service Worker와 같은 강력한 새 웹 플랫폼 API는 HTTPS를 통해 안전한 출처를 필요로 하지만 좋은 소식은 무료 SSL 인증서를 제공하는 LetsEncrypt와 Cloudflare와 같은 저렴한 옵션을 통해 모든 사람에게 엔드 투 엔드 트래픽 암호화를 제공하는 덕분입니다. 이 설정을 얻는 것이 훨씬 간단합니다.

개인 프로젝트의 경우 일반적으로 app.yaml 파일에 'secure' 매개 변수를 추가하면 appspot.com 도메인을 통해 SSL 트래픽을 제공하는 Google App Engine에 배포합니다. Universal Rendering에 대한 Node.js 지원이 필요한 React 응용 프로그램의 경우 Node on App Engine을 사용합니다. Github Pages와 Zeit.co는 이제 HTTPS도 지원합니다.

Chrome DevTools 보안 패널을 사용하면 보안 인증서 및 혼합 콘텐츠 오류에 대한 문제를 확인할 수 있습니다.

사이트 보안 강화를위한 몇 가지 팁:

• 보안되지 않은 요청 ("HTTP"연결)을 "HTTPS"로 업그레이드 하여 필요에 따라 사용자를 리디렉션하십시오. 콘텐츠 보안 정책 및 업그레이드가 안전하지 않은 요청을 살펴보십시오.
• "http://"를 참조하는 모든 링크를 "https://"로 업데이트하십시오. 타사 스크립트 또는 컨텐트를 사용하는 경우 HTTPS를 통해 리소스를 사용할 수있게 만드는 방법에 대해 그들에게 이야기하십시오.
• 페이지를 제공 할 때 HTTP Strict Transport Security (HSTS) 헤더를 사용하십시오. 이것은 브라우저가 HTTPS로 사이트에 대해서만 이야기하도록하는 지시어입니다.

Deploying HTTPS : Green Lock과 그 너머와 Mythbusting HTTPS : 보안에 대한 도시의 전설을 엿볼 수 있습니다.

User can be prompted to Add to Homescreen

다음은 앱에 대한 "홈 화면에 추가"환경 (favicon, 응용 프로그램 이름 표시, 방향 등)을 사용자 정의하는 것입니다. 이는 웹 응용 프로그램 매니 페스트 (Web Application Manifest)를 추가하여 얻을 수 있습니다. 나는 대개 여기에서 가장 많은 작업을 포함하는 브라우저 간 (및 OS) favicon을 사용자 정의하지만 realfavicongenerator.net과 같은 도구는 경험에서 많은 고통을 겪습니다.

사이트가 대부분의 장소에서 작동해야하는 "최소한"의 파비콘에 대해 많은 논의가 있었습니다. Lighthouse는 홈 스크린 아이콘에 192px 아이콘을, 그리고 귀하의 스플래시 스크린에 512px를 제공 할 것을 제안했습니다. 필자는 메타 태그가 더 많이 포함되어 있음에도 불구하고 개인적으로 realfavicongenerator의 출력을 고수합니다.

일부 사이트는 플랫폼별로 맞춤화 된 favicon을 제공하기를 원할 수 있습니다. 이 주제에 대한 자세한 지침은 프로그레시브 웹 앱 디자인 아이콘을 확인하는 것이 좋습니다.

웹 응용 프로그램 매니페스트 설정을 사용하면 앱 설치 프로그램 배너에 액세스 할 수 있으므로 자주 PWA를 사용하는 사용자에게 네이티브 프롬프트를 표시 할 수 있습니다. 사용자가 앱과 유용한 상호 작용을 할 때까지 프롬프트를 지연시킬 수도 있습니다. Flipkart는 주문 확인 페이지에 프롬프트가 표시 될 가장 좋은 시간을 찾았습니다.

Chrome DevTools 응용 프로그램 패널은 응용 프로그램 > 매니페스트를 통해 웹 응용 프로그램 매니페스트 검사를 지원합니다.

이렇게하면 시작 URL 및 테마 색상과 같은 매니페스트 및 미리보기 속성에 나열된 favicon이 파싱됩니다. 그 사이에 관심있는 경우 웹 앱 매니페스트에 대한 툴링 팁 에피소드가 있습니다.)

Installed web app will launch with custom splash screen

Android 용 Chrome의 이전 버전에서는 앱의 홈 화면 아이콘을 탭하면 문서의 첫 번째 프레임이 화면에 표시되기까지 최대 200ms (또는 느린 사이트에서는 여러 초)가 걸릴 수 있습니다.

이 시간 동안 사용자는 흰색 화면을 보게되어 사이트의 인식 성능이 저하됩니다. Chrome 47 이상에서는 브라우저에서 무언가를 칠할 준비가 될 때까지 화면 색상을 지정하는 데 사용되는 스플래시 화면 (background_color, Web App Manifest의 이름 및 아이콘 기반)을 사용자 정의 할 수 있습니다. 이것은 당신의 webapp을 "native"에 더 가깝게 느낍니다.

또한 Realfavicongenerator.net은 이제 매니 페스트를위한 스플래시 스크린 미리보기 및 사용자 정의를 지원하여 간편하게 시간을 절약 할 수 있습니다.

참고 : Android 용 Firefox 및 Android 용 Opera는 웹 응용 프로그램 매니페스트, 시작 화면 및 홈 화면에 추가 기능을 지원합니다. iOS에서 Safari는 여전히 홈 화면에 아이콘 추가 기능을 지원하고 독점적인 스플래시 화면 구현을 지원하는 데 사용되었지만 iOS9에서는 깨진 것 같습니다. 필자는 Web App Manifest를 지원하기 위해 Webkit에 대한 기능 요청을 제출했습니다. 그래서 행운을 빌었습니다.

Design is mobile-friendly

여러 기기에 최적화 된 앱에는 문서의 <head>에 메타 뷰포트가 있어야합니다. 이것은 아주 명백하게 보일지도 모르지만, 사람들이 이것을 무시하는 많은 React 프로젝트를 보았습니다. 고맙게도 create-react-app에는 기본적으로 유효한 메타 뷰포트가 포함되어 있으며 Lighthouse는 누락 된 경우 플래그를 지정합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

프로그레시브 웹 앱에서 모바일 웹 환경을 최적화하는 데 많은 노력을 기울이고 있지만 이것이 데스크톱을 잊어 버리는 것을 의미하지는 않습니다. 잘 만들어진 PWA는 Housing.com에서 설명한대로 다양한 뷰포트 크기, 브라우저 및 장치에서 원활하게 작동 할 수 있습니다.

이 시리즈의 Part 2에서는 React와 Webpack으로 페이지로드 성능을 살펴 보겠습니다. 코드 분할, 경로 기반 청킹(route-based chunking) 및 PRPL 패턴을 통해 상호 작용성을 보다 빨리 달성 할 수 있습니다.

당신이 React를 처음 접한다면 Wes Bos의 React for Beginners가 좋다는 것을 발견했습니다.