PWA 란 무엇입니까?

웹 페이지를 Android 또는 iOS에 관계없이 휴대 전화에서 실행할 수 있는 앱으로 변환하는 방법에 대해 궁금한 적이 있습니까?

또는 웹사이트 상단에 있는 작은 +(더하기) 아이콘을 보고 이 웹사이트를 어떻게 설치할 수 있는지 궁금하십니까? 글쎄, PWA는 귀하의 질문에 대한 답변입니다.
PWA는 무엇입니까?

PWA 또는 Progressive Web Apps는 하이브리드 또는 일반 웹사이트 또는 웹 페이지와 모바일 애플리케이션의 혼합입니다. 그들은 당신에게 두 세계의 힘을 제공합니다. 그리고 요즘 PWA가 상당한 인기를 얻고 있습니다. 제품용 모바일 앱을 빌드하기 위해 Kotlin이나 flutter와 같은 다른 언어를 배울 필요가 없고 기존 웹사이트를 모바일 애플리케이션으로 변환할 수 있기 때문입니다. Google Play 및 App Store에 제출할 수도 있습니다.
물론 모바일 앱용으로 특별히 설계된 언어와 경쟁할 수는 없지만 여전히 PWA는 많은 시간 동안 유용하며 Android, iOS 및 브라우저에 대해 별도로 코딩할 필요가 없습니다.
PWA는 로컬 저장소, 캐시, 푸시 알림, 오프라인 액세스 및 많은 멋진 기능과 같은 모든 기본 앱 기능에 액세스할 수 있으므로 이 모든 것이 흥미로우면 자세히 살펴보겠습니다.
PWA의 이점
교차 플랫폼 지원

PWA는 os 빌드가 아닌 브라우저 빌드이므로 Android, ios 또는 노트북 등 모든 시스템에서 실행할 수 있습니다.
속도

PWA는 서비스 작업자를 사용하기 때문에 표준 웹 사이트에 비해 훨씬 빠릅니다. 서비스 작업자는 처음 로드할 때 웹 사이트의 콘텐츠를 캐시 형태로 저장하여 모든 추가 로드를 훨씬 빠르게 해줍니다.
오프라인 모드

이것이 표준 웹 사이트에 없는 가장 큰 기능이지만 서비스 작업자를 사용하여 앱의 오프라인 버전을 로드하거나 데이터를 처음으로 캐시하고 이후 로드에 제공하여 더 나은 사용자 경험을 제공할 수 있습니다.
SEO 친화적

간단히 말해서 SEO는 검색 페이지 결과(예: Google)에서 귀하의 웹사이트가 더 높은 순위에 오르도록 하는 방법입니다. 따라서 PWA는 엄밀히 말하면 웹사이트이기 때문에 콘텐츠가 색인화되고 검색 엔진에서 검색될 수 있으며 이로 인해 앱이 더 많은 잠재고객에게 도달할 수 있습니다.
낮은 개발 비용

프로젝트를 위해 웹 개발자와 앱 개발자를 별도로 고용할 필요가 없으며 기존 웹 사이트를 즉시 PWA로 변환할 수 있습니다.

그리고 다른 많은 것.

예, 브라우저 호환성 문제 및 휴대폰의 모든 기능을 완전히 제어할 수 없다는 것과 같은 PWA를 사용하는 데는 몇 가지 단점이 있지만 여전히 플러스 포인트는 모든 비용에 대한 보상을 받습니다.

자, 이제 이야기는 충분히 했으니 PWA를 구성하는 요소가 무엇인지 살펴보겠습니다.

A manifest.json file: This is a JSON file which contains all the information about how your app will look, which initial page to load when your app starts, all the icons which the app should use and it also tells the browser that it's a PWA and how it should behave after being installed.

A service worker: A service worker is just a javascript file that runs as soon as your app loads and keeps running in the background. It helps you to control all the network requests, push notifications, cache items, etc.. In short, this script takes care of all the functionality part of your app and thus is the core of any PWA.

A secure HTTPS connection: As, by now, you must have realized PWA's are highly robust, so they only work on trusted connections, to make sure there is no harm to user's data and overall security, and in general to user experience.

이제 이 세 가지 기능을 코드에 추가하고 매니페스트 및 서비스 작업자 파일을 HTML에 연결해야 합니다. 가셔도 좋습니다. 대부분의 브라우저는 귀하의 앱이 PWA임을 감지하고 사용자가 귀하의 사이트를 방문할 때 홈 화면에 설치하는 옵션을 제공합니다. 그렇지 않으면 .apk 파일을 생성하여 잘 알려진 PWA 스토어 또는 앱에 게시할 수 있습니다. 가게.

PWA는 그 자체로 방대한 주제입니다. 더 많은 것이 있지만 시작하려면 이 세 가지가 필수적이며 휴식을 취하면 호기심이 저절로 해결됩니다.