프로그레시브 웹 앱 소개
대부분의 개발자는 적어도 주위에 윙윙 거리는 소리를 들었습니다. 프로그레시브 웹 앱. 이들은 Google과 같은 기술 회사에서 널리 지원되며 빠르게 성장하고 있습니다. 다중 장치 웹 응용 프로그램의 표준.
하지만, 정확히 무엇입니까? 전형적인 것의 차이 및 진보적 인 웹 앱?
개발자 용, 그게 다름 아닌 세계 다.. 프로그레시브 웹 앱은 최신 웹 API를 사용하여 네이티브 앱 경험 만들기 브라우저에서. 즉, 개발자는 하이브리드 프레임 워크를 사용하지 않고도 빠른 로딩 동적 인 앱을 만들 수 있습니다..
이 가이드에서는 프로그레시브 웹 앱의 기본, 몇 가지 기본 기능 및 자신 만의 빌드를 시작할 수있는 방법.
프로그레시브 웹 앱이란??
프로그레시브 웹 앱 (또는 PWA) 웹 브라우저 API 활용 모든 기기의 브라우저에서 기본 앱 환경을 만들 수 있습니다..
궁극적으로 프로그레시브 웹 앱은 소수의 기술 개발자는 강력한 네이티브와 유사한 응용 프로그램을 만들 수 있습니다. 많은 사람들이 웹 API ~와 같은 서비스 근로자 API 아니면 그 푸시 API.
있다 꽤 많은 요구 사항들 PWA를 부르지 만 이것들은 가장 중요한 것들:
- 완전하다 모바일 반응 형.
- ~에 부합하다 점진적 향상.
- 할 수있다 국부적으로 설치하다 스마트 폰 및 태블릿에서.
- 오프라인으로 실행됩니다. 인터넷이없는 경우, 서비스 노동자를 이용하는 경우.
- 기능을 콘텐츠와 분리합니다. 앱 셸 사용.
- HTTPS상의 Builts 보안 강화.
- 발견 가능 Google 검색에서.
- 있음 동적 앱과 유사한 페이지 그러나 여전히 각각 자체 URL을 가짐.
너라면 작은 웹 앱을 만들 생각 대신 프로그레시브 웹 앱을 만들 수도 있습니다. 이것은 약간의 학습 곡선과 함께하지만 당신은 너무 많은 것을 가지고 있습니다. 사용자 경험에 대한 더 많은 제어 결과적으로.
프로그레시브 웹 앱의 기본 사항에 대해 알아보고 이들이 진드기가되는 점을 알아 봅니다..
봉사 종사자
모든 단일 프로그레시브 웹 앱 봉사 노동자가 필요하다.. 이것들은 교통 담당관과 같은 어디로 트래픽이 어디서, 어디에서 데이터가오고, 그리고 그것을 조정하는 방법 모든 것이 조직되고 캐싱된다..
간단히 말하면, 서비스 노동자 JavaScript 파일로 작동합니다. 웹 응용 프로그램의 백그라운드에서 실행됩니다. 언제든지 사용자 사건을 수행하다, 그것은 서비스 작업자 스크립트 데이터 가져 오기, 데이터 저장 또는 둘 다!
사용 Service Worker API ~이다. 본질적인 오프라인으로 지원되는 PWA를 실행하는 방법에 대해 설명합니다. 이것은 당신이 보기간에 데이터 전송 어떻게 할 수 있니? 로컬 데이터베이스에서 데이터 요청. 그러나 이것은 PWA 프로젝트를 통해 학습 한 대부분 고급 내용입니다..
엿보기 봉사 노동자 요리 책 ...에 대한 기본 스 니펫 과 라이브 데모. 이것은 다른 사람들이 한 일을 공부함으로써 배우는 환상적인 방법입니다. 자신의 앱에서 복제하기.
프로그레시브 웹 앱을 만들기를 원한다면 Service Worker API로 시작하십시오.. 그냥 땜장이하고 간단한 데모를 로컬로 설정하십시오. 이것은 나중에 기초 작업을 할 것입니다. 사용자 지정 응용 프로그램 기능 및 페이지 작성 모두 서비스 노동자를 통해 달린다..
에 대한 초보자 가이드 과 상세한 코드 스 니펫, 나는 다음과 같은 자원을 특별히 추천한다.
- 서비스 근로자 시작하기
- 서비스 근로자 시작하기
- 서비스 작업자 예제 : 사용자 지정 오프라인 페이지 예제
앱 셸
대부분의 네이티브 앱 앱 셸 아키텍처 따라하기 데이터 및 앱 코드는 UI와 완전히 분리되어있다.. 응용 프로그램 쉘은 다음과 같습니다. 로컬에 캐시 됨 각 페이지가 매우 빠르게로드됩니다..
이것은 동일하게 유지된다. “기본 앱” 느낌이 어디에 인터페이스는 항상 표시되어 있습니다. 하지만 콘텐츠 / 기능로드가 다르게 매번. Google 개발자 사이트에서이 페이지를 확인하십시오. 앱 쉘 모델.
대부분의 앱에는 매우 간단한 응용 프로그램 쉘 아키텍처를 설계해야합니다. 마음 속의 단순함.
일반적으로 앱 셸에는 주요 요소:
- 상단 네비게이션 바 링크.
- 새로 고침 버튼 (선택 사항).
- 페이지 배경 컨테이너.
훌륭한 사례 연구를 여기서 찾을 수 있습니다. Google의 I / O Progressive Web App 셸 아키텍처. 그들은 또한 쉘 구조를 만들고, 캐싱하고, 모든 페이지마다 자동으로 가져 오기.
쉘 아키텍처를 다음과 같이 생각하십시오. 모든 정적 UI 요소 모든 단일 페이지에서 사용할 수 있습니다. 이들은 있어야한다. 나머지 코드와 구분된다. 쉽게 재사용 할 수 있도록 캐시됩니다. 체크 아웃 Google의 소개 엄청난 양의 코드로 시작하는 데 도움이되는 미리보기.
온라인 및 오프라인 지원
대부분의 네이티브 앱 인터넷없이 잘 돌아 가라.. 프로 그레시브 웹 앱은이 같은 행동을 따라야합니다..
서비스 직원을 통해 로컬 캐시 구축 각 페이지마다 JSON 코드가 있습니다. 이렇게하면 사용자는 웹 앱을 로컬에서 찾아보기. 너는 또한 매니페스트 파일을 포함하십시오. 아이콘, 스플래시 화면 및 기타 실행 설정을 정의하는 방법.
Service Worker API를 사용하는 경우 캐시 API 그것은 동일한 틀의 일부. 일반적으로 가장 좋은 방법은 데이터를 로컬에 저장 과 서비스 노동자로부터 접근 후에.
당신은 또한 수 모든 웹 앱 테스트 ~을 사용하여 등대, PWA 기술에 대한 기능 준수 및 지원 확인을위한 무료 도구.
항상 PWA 오프라인 지원이 필요하다. Service Worker API를 통해 낮은 연결 상태에서 작동. Lighthouse는 다른 기능과 함께 오프라인 지원을 테스트하는 가장 좋은 방법입니다..
실제 예제
살아있는 PWA를 배우고 그것이 어떻게 작동하는지 보는 것은 좋은 방법입니다. 그러나 Progressive Web App 시장은 여전히 떠오르는, 가장 훌륭한 것들이 너무 많습니다. 인터넷의 여러 구석에 흩어져있다..
하지만, 덕분에 PWA 바위 갤러리, PWA가 실제로 할 수있는 것을 과시하기 위해 몇 가지 훌륭한 예를 선정했습니다..
1. 환율 계산기
이것은 매우 간단하다. 환율 계산기 환율을 받고 현재를 계산합니다. 전 세계 통화 톤수 차이.
이 웹 앱이 완전히 반응하는, 터치 지원, 과 자동 업데이트 페이지 새로 고침없이.
이것들은 당신이 기대하는 기능 중 일부일뿐입니다. 전형적인 프로그레시브 웹 앱. 이 앱을 로컬로 저장할 수도 있습니다. 현재 환율을 확인하기 위해 JSON 파일에 연결하지만 휴대 전화로 오프라인으로 작업 할 수 있습니다..
2. 영어 악센트
나는 독특하고 믿을 수 없을 정도로 잘 디자인 되었기 때문에이 웹 앱을 좋아한다. 그만큼 영어 액센트 맵 온라인으로 비디오 큐 레이트 사람들이 미국과 영국의 특정 지역에서 액센트를받는 곳.
지도의 아무 곳이나 클릭하면 사람들이 특정 단어를 다른 지역에서 어떻게 발음하는지들을 수 있습니다. 앱이 번개처럼 빠르며 오픈 소스 GitHub에서 누구든지 체크 아웃 할 수 있도록.
내부는 React / Redux 와 중포 기지 그리고 Google지도에 대한 API 연결. 초보자가 공부하고 배울 수있는 매우 간단한 예제입니다..
3. Pokedex.org
아주 간단한 PWA는 이것입니다. Pokedex 앱 Nolan Lawson이 작성했습니다. 그는 또한이 코드를 자유롭게 출판했다. GitHub에서, 그래서 우리는 아직 또 다른 프로젝트입니다. 주위에 기웃 거리며 공부할 가치가있는.
이 데이터는 정적으로 유지 될 수 있으므로 로컬 엔진을 통해 처리 전화 한 PouchDB. 모든 데이터는 PokeAPI에서 가져와 일반 자바 스크립트로 저장합니다. 이것은 당신이 할 수 있다는 것을 의미합니다. 휴대 전화에 로컬로 저장 진정한 기본 응용 프로그램과 마찬가지로 인터넷 액세스가 있거나 없음으로 실행됩니다. 꽤 멋지다, 맞다.?
모든 것이 JavaScript 제공, 그래서 프론트 엔드 코드로 얼마나 많은 일을 할 수 있는지에 대한 증거가됩니다. 그것은 사용 많은 캐싱 Service Worker API를 사용하면 미친 빠르고 사용하기 쉽습니다..
4. 플립 카트
마지막으로 그리고 가장 놀랍게도 플립 카트 웹 사이트. 이 꽉 찬 전자 상거래 상점은 실제로 Progressive Web App입니다..
그 완전히 반응하는 과 동적으로 페이지를로드합니다.. 페이지 URL은 브라우저에 추가되므로 일반 웹 사이트처럼 복사하여 붙여 넣거나 공유 할 수 있습니다..
이것은 쉽게 내가 본 중 가장 복잡한 PWA. 나는 개발자가 모든 사용자를 위해 웹에서 그런 매끄러운 환경을 만들 수 있다는 사실에 놀랐다. 오프라인 오프라인 저장 장치 지원, 너무.
Flipkart 전체 소스 코드에 대한 저장소를 찾을 수는 없지만 GitHub의 Flipkart 페이지 와 더 작은 코드 스 니펫 개발자 팀에서.
더 많은 것을 배우기
프로그레시브 웹 앱은 엄청나게 인기가 있고 확실하게 증기를 얻습니다. 더 많은 개발자가 기본 / 하이브리드 앱에서 전환.
매년 열리는 정상 회담이 있습니다. 프로그레시브 웹 앱 서밋 무료로 시청할 수있는 YouTube에 동영상을 게시합니다. 이것은 좋은 방법입니다. 티켓을 지불하지 않고도 프로 지식을 습득한다..
그러나보다 자세한 정보를 원할 경우 PWA 코딩 가이드 이 자습서를 확실히 확인하십시오.
- 프로그레시브 웹 앱의 초보자 가이드
- React로 첫 번째 점진적 웹 앱 구축
- Polymer로 점진적인 웹 애플리케이션 구축
