개발 로그: Nuzlocke Tracker — 4부 — 앱 스토어에 PWA 배포

이것은 온라인 웹 앱 개발 경험을 설명하는 시리즈의 네 번째 부분입니다. 몇 달 동안 웹 앱에 다양한 변경 사항을 배포하고 모든 종류의 피드백(대부분 Reddit에서)을 받은 후 네이티브 앱 버전(iOS/Android)에 관심이 있는 여러 사람을 얻었습니다.

처음에는 해당 언어를 사용하지 않았기 때문에 엄청난 양의 작업이 될 것이라고 생각했습니다. 앱을 포팅하기 위해 React Native를 사용하는 것을 잠시 고려했습니다. 하지만 연구 중에 PWA(프로그레시브 웹 앱)를 Google Playstore와 Microsoft Store에 배포할 수 있다는 사실을 알게 되었습니다.

PWA 만들기

먼저 앱을 PWA로 만들어야 했습니다.

Create-React-App을 사용하여 내 반응 앱을 배포했습니다. 다행스럽게도 React 앱에서 PWA를 생성하기 위한 기본 제공 옵트인 서비스를 제공합니다. 추가 정보: https://create-react-app.dev/docs/making-a-progressive-web-app/ .

index.tsx 파일에 다음을 포함할 수 있습니다.

import * as serviceWorkerRegistration from 'serviceWorkerRegistration';

serviceWorkerRegistration.register();

이렇게 하면 PWA로 작동하는 데 필요한 모든 구성이 자동으로 수행됩니다. 추가 구성을 위해 public 폴더에서 manifest.json을 확인할 수 있습니다.

이것은 HTTPS에서만 작동한다는 점을 고려하십시오.

콘솔에서 PWA를 설치하는 서비스 워커를 볼 수 있습니다.

APK 만들기

이것이 해결되면 다음 단계는 PWA용 APK를 생성하는 것입니다. 운 좋게도 이를 위한 사이트가 이미 존재합니다! PWABuilder 앱을 Microsoft Store 및 Google Playstore(및 추가 보너스로 Samsung 앱 스토어)에 배포하는 데 필요한 모든 파일을 생성할 수 있습니다.



홈 페이지에는 PWA 범위를 지정하고 필요한 파일을 빌드하기 위한 입력이 있습니다.



이것은 PWA가 얼마나 잘 구성되었는지에 대한 점수를 제공합니다(이는 대부분 manifest.json 구성에 따라 다릅니다. 이 페이지 다음에는 생성된 스토어 패키지 파일이 있습니다.

매장에 배포

각 개별 상점 패키지에는 각각에 배포하는 방법에 대한 정보가 포함되어 있습니다. 대부분의 경우 APK를 업로드하기만 하면 됩니다. 지불이 필요한 경우 콘텐츠에 따라 요구 사항이 다를 수 있음을 고려하십시오.

또한 두 스토어 모두 스토어 등록정보에 대한 인앱 스크린샷과 몇 가지 다른 세부정보가 필요합니다.

승인을 기다리는 며칠 후 둘 다 사용 가능했습니다.

보너스

설명과 관련된 추가 작업의 대부분으로 Amazon Appstore에도 배포하기로 결정했습니다. 인앱 스크린샷은 이미 다른 스토어 목록에서 완료되었으며 이를 위해 각 웹 페이지로 라우팅하기만 하면 됩니다.



결말 생각
업데이트는 PWABuilder로 새 파일을 생성하고 재배포하는 것만큼 쉽습니다.

그리고 그게 다야! 앱 스토어에 대한 PWA 프로세스와 관련하여 질문이 있는 경우 아래 의견에 알려주십시오.