Progressive Web Apps in 100 Seconds // Build a PWA from Scratch

https://www.youtube.com/watch?v=sFsRylCQblw

프로그레시브 앱은 2000 년 늦게 스마트 폰이 처음 등장했을 때 네이티브 모바일 앱과 구별 할 수없는 경험을 제공하는 웹 사이트를 구축합니다.

 오프라인 모드, 푸시 알림, 카메라, 지리적 위치 등 웹에서 사용할 수 없었던 모든 종류의 새로운 기능을 제공했으며 당시에는 Internet Explorer가 웹을 지원했습니다.

하지만 웹 개발자는 2020 년대에 대부분의 장치 기능에 액세스 할 방법이 없었습니다.

게임이 바뀌 었습니다. 웹 플랫폼은 네이티브 앱과 거의 동일한 기능에 도달했습니다. 네이티브 앱처럼 Twitter PWA를 설치하는 방법에 주목하세요.

연결없이 작동합니다. 기기 카메라와 상호 작용하고 푸시 알림을받을 수 있으며,

웹은 앱 스토어보다 훨씬 더 나은 배포를 제공하며 iOS, Android에서 Apple 작업은 말할 것도없고 수익의 30 %도 삭감하지 않습니다.

웹 사이트를 소유하고 있다면 단일 코드베이스의 웹을 진보적 인 웹 앱으로 전환하는 것이 생각보다 쉽습니다.

먼저 Chrome 개발자 도구에서 등대 도구를 열어 사이트에서 감사를 실행하세요.

사이트가 얼마나 잘 수행되는지 그리고 사이트를 빠르게로드하는 데 필요한 최소한의 PWA 자격을 얻기 위해 변경해야하는 사항을 알려줍니다.

모바일에서 액세스 가능 대부분의 사이트는 이미이 확인란을 선택 했으므로 더 어려운 요구 사항은 앱이 오프라인으로 작동하도록 만드는 것입니다.

탭이 열려있는 동안 웹 사이트는 일반적으로 단일 스레드에서 실행되지만 최신 웹 사이트는 이제 백그라운드에서 실행되는 스크립트 인 서비스 워커를 등록 할 수 있습니다.

캐싱 백그라운드 동기화를 수행하고 구현이 실제로 매우 간단합니다.

 브라우저가이 기능을 지원하는지 확인한 다음 일단 등록 된 작업자로 JavaScript 파일을 등록하면 Chrome Dev 도구의 애플리케이션 탭에서 활성화되어 작업자 파일에 자신의 코드를 작성하거나 다음 작업 상자 같은 라이브러리를 사용할 수 있습니다.

가장 중요한 것은 앱에서 URL을 캐시하여 오프라인으로 볼 수 있도록 애플리케이션 탭에서 현금 및 기타 백그라운드 서비스를 검사 할 수 있도록하는 것입니다.

마지막 단계는 아이콘과 아이콘이 포함 된 매니페스트 Jason 파일을 만드는 것입니다.

요구 사항이 충족되면 앱에 대한 기타 메타 데이터는 대부분의 기본 장치에 앱을 설치할 수 있고 Google Play 또는 Microsoft Store에 등록 할 수있는 PWA 성과 및 등대를 잠금 해제 할 수 있습니다.

PWA에 대해 확실히 알고 싶은 멋진 것들을 배우기 위해 100 초를 넘어가는 동안 1 분 동안 더 많은 것을 배우고 싶다면 100 초 안에 어울리세요.

먼저 PWA에 대해 확실히 알고 싶을 것입니다. 제가 지금하고 싶은 짧은 비디오는 PWA와 관련하여 알아야 할 멋진 것들 몇 가지를 덜어내는 것입니다.