주요 앱 스토어에 PWA 퍼블리싱: 이유와 방법

Google Play 스토어를 시작으로 하나의 앱 마켓플레이스가 프로그레시브 웹 앱(프로그레시브 웹 앱이란?)을 스토어에 환영하는 유행에 뛰어 들어 소프트웨어 제공을 위한 새로운 접근 방식이 되었습니다. 이 모든 상황에서 앱의 범위를 더 잘 확장하기 위해 이 새로 발견된 기술을 활용하지 않는 것은 낭비입니다.

전체 프로그레시브 웹 앱 운동, 특히 게시 프로세스에 대한 더 명확한 관점을 제공하기 위해 오늘 주요 앱 마켓플레이스에서 PWA의 현재 상태와 해당 스토어에 PWA를 게시하는 방법을 검토할 것입니다.

프로그레시브 웹 앱을 주요 앱 스토어에 게시해야 하는 이유는 무엇입니까?

이전에는 Progressive Web Apps가 웹 설치(홈 화면에 추가)로만 제한되었습니다. 그러나 시간이 지남에 따라 Google 및 Microsoft와 같은 앱 마켓플레이스는 PWA의 잠재력을 인식하기 시작했고 미래의 이 기술 채택을 앞당기기 위한 이니셔티브를 마련했습니다.

능력과 자금이 있다면 PWA 옴니 플랫폼을 만들어야 한다는 전문적인 의견이 있습니다. 결국 Twitter, Uber 및 Spotify와 같은 대형 브랜드는 모두 대세에 뛰어들어 놀라운 결과를 얻었으며, 이 기술이 실제로 마케팅의 전부가 아니며 고려할 가치가 있음을 증명했습니다. Microsoft 자체도 Progressive Web Apps를 Windows의 기본 환경으로 만들 계획을 세워 한 단계 더 나아갔습니다.

 추천 자료 : 프로그레시브 웹 앱의 12가지 모범 사례.

주요 앱 스토어에 PWA를 게시하는 방법

구글 플레이 스토어

PWA 운동의 선구자로서 Google Play 스토어가 Progressive Web Apps를 위해 두 팔을 벌리고 있는 것을 보는 것은 놀라운 일이 아닙니다. TWA (신뢰할 수 있는 웹 활동)를 사용하면 전체 게시 시퀀스가 ​​훨씬 쉬워지고 즉시 완료되어야 합니다.

요구 사항

• 안드로이드 스튜디오 설치
• Google 개발자 계정
• 작동하고 품질이 검증된 Progressive Web Apps.

1단계 : TWA Starter Android 앱의 복제본을 만들고 수정

• 다음 명령을 사용하여 svgomg-twa 프로젝트를 복제합니다.

 자식 클론 https://github.com/GoogleChromeLabs/svgomg-twa.git

• File > New > Import Project 를 사용하여 프로젝트를 Android Studio로 가져옵니다.

/app/build.gradle 에서 twaManifest 를 목적에 맞게 수정하십시오. 무엇을 어떻게 변경하는지에 대한 세부 사항은 build.gradle 파일에서 찾을 수 있습니다.

참고: applicationId 는 <com>.<your-brand>.<your-app> 형식을 따라야 합니다.

수정 후 /app/build.gradle 은 다음과 같아야 합니다.

 def twa매니페스트 = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // TWA에서 열려 있는 도메인.
    launchUrl: '/', // TWA의 시작 경로입니다. 도메인에 상대적이어야 합니다.
    name: 'SimiCart PWA', // 안드로이드 런처에 표시되는 이름.
    themeColor: '#ED8A19', // 상태 표시줄에 사용되는 색상입니다.
    NavigationColor: '#303F9F', // 탐색 모음에 사용되는 색상입니다.
    backgroundColor: '#bababa', // 시작 화면 배경에 사용되는 색상입니다.
    enableNotifications: false, // 알림 위임을 활성화하려면 true로 설정합니다.
    // 여기에 앱에 대한 바로 가기를 추가합니다. 모든 바로 가기에는 다음 필드가 포함되어야 합니다.
    // - name: 바로 가기에 표시될 문자열입니다.
    // - short_name: |name|인 경우 더 짧은 문자열이 사용됨 너무 길어.
    // - url: 앱을 실행할 URL의 절대 경로(예: '/create').
    // - icon: 아이콘으로 사용할 드로어블 폴더의 리소스 이름입니다.
    단축키: [
        이름: '시미카트 열기', 
        short_name: '열기', 
        URL: '/열기', 
        아이콘: '튀기다'
    ]
,
    // 스플래시 화면을 제거할 때 재생될 페이드 아웃 애니메이션의 지속 시간(밀리초)입니다.
    스플래시스크린페이드아웃 지속시간: 300
]

2단계 : 키 저장소 생성 및 APK 확인

APK를 확인하려면 키 저장소 또는 업로드 키가 필요합니다. 키 저장소를 생성하려면 Android Studio 를 실행하고 Build → Generate Signed Bundle/APK 로 이동하여 필수 필드를 입력합니다.

키 저장소를 만든 후에는 다음 명령을 사용하여 키 저장소에서 SHA256 지문을 추출해야 합니다.

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 항목 유형: PrivateKeyEntry
...
인증서 지문:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? 이 줄을 복사

3단계 : 디지털 자산 링크 구성

나중에 APK에 연결하는 데 사용할 수 있는 웹 콘텐츠의 소유권을 확인하려면 디지털 자산 링크가 필요합니다.

명령문 파일 생성

앞서 추출한 SHA256 핑거프린트를 사용하여 Statement List Generator 및 Tester로 명령문 파일을 생성합니다.

명세서 파일을 생성했으면 다음 단계는 디지털 자산 도구의 정보가 포함된 공개적으로 액세스 가능한 파일을 생성하는 것입니다. 파일은 웹 호스트와 다음 위치에 있어야 합니다.

 .well-known/assetlinks.json

이 파일의 위치는 웹 앱의 빌드 프로세스에 따라 다르지만 일반적으로 배포된 디렉터리, 즉 'public' 또는 'dist' 디렉터리에 있어야 합니다.

모든 작업이 완료되면 다음이자 마지막 단계는 앱을 배포하는 것입니다.

4단계 : Google Play에서 앱 빌드 및 출시

기본 설정에서 Google Play Console을 사용하여 모든 애플리케이션 → 애플리케이션 만들기 로 이동합니다.

내부 테스트 만들기

앱 릴리스 → 내부 테스트 트랙 → 릴리스 만들기 로 이동하여 앱의 내부 테스트 트랙을 만듭니다.

서명된 APK 빌드

Android Studio에서 Build → Generate Signed Bundle/APK 로 이동하여 앞서 추출한 SHA256 키 저장소를 사용합니다. 두 서명 버전 상자를 모두 선택했는지 확인하십시오.

APK 업로드

당신은 이제 이 과정의 끝에 있습니다. APK를 업로드하려면 Google Play Store, App Releases → Internal Test Track → Edit Release 로 이동하세요.

스토어 등록정보를 작성하는 것을 잊지 마세요.

앱이 검토 프로세스에 나열되기 전에 모든 필수 필드를 작성해야 합니다. 이 필드는 가격 세부정보, 스토어 등록정보, 콘텐츠 등급 등과 같은 중요한 정보에 필요합니다. 이 프로세스가 완료되면 모든 필수 필드가 채워졌음을 나타내는 4개의 녹색 확인 표시 ️가 표시됩니다.

그리고 그게 다야. 이제 PWA를 검토할 준비가 되었으며 몇 시간 내에 공개 다운로드할 준비가 됩니다.

애플 앱스토어

모든 주요 앱 마켓플레이스 중에서 Apple App Store는 PWA를 가장 덜 환영하거나 심지어 적대적인 곳일 수 있습니다. 이는 Steve Jobs가 Progressive Web Apps로 가득 찬 미래를 처음으로 구상한 사람이라는 점을 고려하면 일종의 아이러니입니다.

전체 Safari 엔진은 iPhone 내부에 있습니다. 따라서 iPhone의 앱과 똑같이 보이고 동작하는 놀라운 Web 2.0 및 Ajax 앱을 작성할 수 있습니다. 그리고 이러한 앱은 iPhone 서비스와 완벽하게 통합될 수 있습니다. 전화를 걸고 이메일을 보내고 Google 지도에서 위치를 찾을 수 있습니다.

스티브 잡스, 2007

iOS에서 PWA는 기능면에서 심각하게 제한 됩니다. 푸시 알림은 지원되지 않으며 웹 앱 매니페스트는 부분적으로만 지원되며 새 앱 갤러리와 같은 새로운 기능은 종종 PWA를 완전히 무시합니다. 그리고 이 때문에 Apple의 App Store 검토 지침에 따라 PWA는 Apple App Store에서 환영받지 못하는 것뿐입니다.

앱에는 재포장된 웹사이트를 뛰어넘는 기능, 콘텐츠 및 UI가 포함되어야 합니다. 앱이 특별히 유용하지 않거나, 고유하지 않거나, "앱과 유사하지 않으면" 앱 스토어에 속하지 않습니다.

최소 기능, App Store 검토 지침

Apple은 PWA의 모든 기능을 무력화하기 위해 최선을 다하기 때문에 Cordova와 같은 기본 앱 래퍼를 사용하는 경우에도 PWA를 게시하려는 모든 노력은 헛된 것입니다. 현재로서는 향후 iOS 버전이 PWA에 대한 더 나은 지원을 제공할 수 있기를 바랄 뿐이지만 현재로서는 Apple App Store에 PWA를 게시하는 것이 불가능합니다 . iOS 기반 장치를 사용합니다.

 더 읽어보기: iOS 14 베타의 PWA: 미묘한 변경 사항

마이크로소프트 스토어

Windows 10 및 PWA: 소프트웨어 딜리버리의 미래 기사에서 언급했듯이 Microsoft는 꽤 오랫동안 프로그레시브 웹 앱 스토어의 토대를 마련해 왔으며 단계적으로 현실이 되고 있습니다. 더 인기 있는 브랜드의 PWA가 이미 앱 마켓플레이스 전체에 사용되고 있으며 다른 사람들도 따라야 할 모범적인 결과를 보여주고 있습니다.

Google과 마찬가지로 Microsoft는 PWA를 환영 하며 더 나아가 네이티브 UWP 앱을 대중화하고 하이브리드 앱으로 대체할 계획입니다. 네이티브 셸로 포장된 일종의 프로그레시브 웹 앱입니다.

이론적으로 프로그레시브 웹 앱을 Microsoft Store에 게시 하는 것은 원래 고품질 PWA를 위한 크롤링 메커니즘으로 Bing을 사용하는 자동 프로세스로 계획되었기 때문에 전혀 노력이 필요하지 않습니다. 그러나 모든 것이 아직 실험 단계에 있으며 계획만큼 효과적으로 작동하지 않기 때문에 PWA 를 Windows 앱 패키지 (.appx)로 수동으로 제출해야 합니다. 그러나 걱정하지 마십시오. 프로세스가 특정 앱 스토어만큼 신경 쓰이지 않습니다.

요구 사항

• Windows 개발자 센터 계정
• PWA빌더
• 상점 정책을 충족하는 작동 및 품질 검사된 Progressive Web App

1단계 : 앱 이름 예약

Microsoft Store에 앱을 게시하는 첫 번째 단계는 이름을 예약하는 것입니다. 한 미친 젊은이가 존재하는 모든 이름을 예약하기로 결정했다면 어떻게 될지 궁금하신가요? 걱정 마세요. 이름 예약은 3개월 후에 만료됩니다.

이 정보는 나중에 필요하므로 필수 필드를 채우고 어딘가에 메모해 두십시오.

2단계: PWABuilder를 사용하여 AppX 생성

위에서 언급했듯이 PWABuilder는 주요 앱 마켓플레이스에 게시할 수 있는 기능적 패키지를 생성하는 좋은 방법입니다. PWA 채택을 앞당기기 위한 목적으로만 Microsoft에서 개발한 시장 최초의 도구 중 하나입니다.

매니페스트 생성

PWABuilder에서 PWA의 URL을 입력하고 시작하기 를 클릭합니다. 이 단계는 manifest.json 에서 누락된 정보를 자동으로 식별 및/또는 채우므로 중요합니다. 이는 Microsoft Store용으로 특별히 제작되지 않은 PWA에 종종 필요합니다.

 추천 자료: PWA 매니페스트: 웹 앱 매니페스트를 쉽게 만드는 방법

다음 단계는 PWA를 위한 서비스 워커를 구축하는 것이지만 귀하의 것이 서비스 워커가 이미 통합되어 있는 일반적인 프로그레시브 웹 앱이라고 가정하면 이 단계를 건너뛰고 .appx 패키지를 얻는 마지막 단계로 넘어갈 것입니다.

AppX 생성

AppX 생성을 클릭하면 다음과 같은 팝업이 표시되어야 합니다.

여기에서 이전 정보가 유용할 수 있습니다. 필드를 채우면 .appx 패키지가 포함된 다운로드 상자가 표시됩니다. 다운로드하면 이제 PWA를 Microsoft Store에 게시할 수 있습니다.

PWA를 스토어에 게시하기 전에 테스트하려는 경우 개발자 모드 를 활성화하여 Windows에서 테스트할 수 있는 옵션이 항상 있습니다. → test_install.ps1 을 마우스 오른쪽 버튼으로 클릭 → PowerShell로 실행 . 이렇게 하면 바탕 화면과 시작 메뉴에 PWA가 자동으로 추가되며 여기에서 모든 것이 제대로 작동하는지 테스트하고 시작할 수 있습니다.

3단계: 앱 패키지를 Microsoft Store에 제출

PWA를 Microsoft Store에 게시하려면 이전에 다운로드한 .zip 내의 패키지 폴더로 이동해야 합니다. 이 폴더에는 Microsoft Store에 게시하는 데 필요한 모든 것이 있습니다. 설명을 위해 이 폴더에는 웹의 PWA 및 기타 관련 없는 스토어 메타데이터에 대한 지시 메커니즘 역할만 하기 때문에 코드가 포함되어 있지 않습니다.

windows.appx를 찾았으면 개발자 센터의 제출 페이지로 이동하여 필요한 정보를 입력합니다.

모든 단계를 완료하고 모든 필수 필드를 채우면 " Submit to the Store " 버튼에 불이 들어와 PWA가 검토 프로세스를 위한 준비가 되었음을 나타냅니다. 이 프로세스를 완료하는 데 한 시간에서 며칠이 걸립니다. 완료되면 PWA가 인증되고 공개/비공개 다운로드가 가능합니다(개발 센터의 가용성 설정 에 따라 다름).

결론

이 모든 후에도 여전히 프로그레시브 웹 앱을 구축해야 하는 이유가 무엇인지 궁금할 것입니다. 그리고 당신은 그러한 근본적인 질문을 하는 것이 옳습니다.

프로그레시브 웹 앱은 소프트웨어 제공의 미래이자 웹 기술의 진화에서 자연스러운 다음 단계로 스스로를 단계적으로 증명하고 있습니다. 현재로서는 모든 장치에서 통합되고 매력적인 경험이 높은 전환율 의 핵심인 전자 상거래 세계의 모든 곳에서 이미 널리 사용되고 있습니다.

새로운 기술이기 때문에 하나의 Progressive Web App을 있는 그대로 구축하는 것은 이미 충분히 어렵습니다. SimiCart를 사용하면 시장에서 완전하고 최고의 비용 효율적인 솔루션을 제공하므로 더 이상 Magento PWA 의 개발 단계에 대해 걱정할 필요가 없습니다.