PWA'ları Başlıca Uygulama Mağazalarında Yayınlama: Nedenler ve Nasıllar

Yayınlanan: 2021-01-18

İçindekiler

Google Play Store'dan başlayarak, birbiri ardına uygulama pazarı, Progressive Web Apps'ı (Progresif Web Uygulaması Nedir?) kendi mağazalarına davet etme çoğunluğuna atladı ve onu yazılım dağıtımı için yeni tercih edilen yaklaşım haline getirdi. Tüm bunlar oyundayken, uygulamanızın erişimini daha iyi genişletmek için bu yeni keşfedilen teknolojiden yararlanmamak israf olur.

Size tüm Aşamalı Web Uygulaması hareketi, özellikle de yayın süreci hakkında daha net bir bakış açısı sunmak için bugün büyük uygulama pazarlarındaki PWA'ların mevcut durumunu ve söz konusu mağazalarda bir PWA'nın nasıl yayınlanacağını inceleyeceğiz.

Aşamalı Web Uygulamanızı neden büyük uygulama mağazalarında yayınlamalısınız?

Eskiden Aşamalı Web Uygulamaları yalnızca web kurulumlarıyla (Ana Ekrana Ekle) sınırlıydı. Ancak zamanla, Google ve Microsoft gibi uygulama pazarları PWA'ların potansiyelini fark etmeye başladı ve geleceğin bu teknolojisinin benimsenmesini ileriye taşımak için girişimlerde bulundu.

Bu gönderiyi Instagram'da görüntüle

Bugün web inanılmaz derecede güçlü bir platform, ancak web uygulamalarının yapabilecekleri ile yerel uygulamaların yetenekleri arasında hala bir boşluk var. Aşamalı Web Uygulamaları bizi bu yolun bir parçası haline getiriyor, ancak gerçekten rekabet edebilmek için web'in de daha güçlü API'lere erişmesi gerekiyor. İyi haber! Geliyorlar! Yeni ve gelecek API'ler hakkında daha fazla bilgi edinmek için Sam Richard'ın "Yerel uygulama açığını kapatmak" başlıklı bu konuşmayı dinleyin. . . #SimiCart #ChromeDevSummit #ChromeDevSummit 2019 #SamRichard #pwa #nativeapp

SimiCart (@simicart.official) tarafından paylaşılan bir gönderi

Yetenekleriniz ve fonlarınız varsa, profesyonel görüşümüz, bunun için gitmeniz gerektiğidir - PWA omni-platformunuzu yapın. Ne de olsa, Twitter, Uber ve Spotify gibi büyük markaların tümü, çoğunluğa atladı ve mükemmel sonuçlarla karşılandı, bu teknolojinin gerçekten de pazarlama olmadığını ve üzerinde düşünmeye değer olduğunu kanıtladı. Microsoft, Aşamalı Web Uygulamalarını Windows'ta birincil deneyim haline getirmeyi planlayarak bir adım daha ileri gitti.

 Önerilen okuma : 12 En İyi Progresif Web Uygulaması Örneği.

PWA'nızı büyük uygulama mağazalarına nasıl yayınlarsınız?

Google Oyun mağazası

PWA hareketinin öncüsü olarak, Google Play Store'un Progresif Web Uygulamaları için kolları sıvadığını görmek şaşırtıcı olmaz. TWA (Güvenilir Web Etkinlikleri) yerinde olduğunda, tüm yayınlama dizileri çok daha kolay hale getirildi ve kısa sürede bitmesi gerekiyor.

Gereksinimler

  • Android Studio yüklendi
  • Bir Google Geliştirici hesabı
  • Çalışan ve kalite kontrolü yapılmış bir Aşamalı Web Uygulamaları.

Adım 1 : TWA Starter Android Uygulamasının bir klonunu yapın ve değiştirin

  • Aşağıdaki komutla svgomg-twa projesini klonlayın:
 git klonu https://github.com/GoogleChromeLabs/svgomg-twa.git
  • File > New > Import Project kullanarak projeyi Android Studio'ya aktarın.

/app/build.gradle , twaManifest amacınıza göre değiştirin. Neyin ve nasıl değiştirileceğine ilişkin ayrıntılar build.gradle dosyasında bulunabilir.

Not: applicationId , <com>.<your-brand>.<your-app> biçiminde olmalıdır.

Değişikliklerden sonra, /app/build.gradle dosyanız şöyle görünmelidir:

 def twaManifest = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // TWA'da açılan alan adı.
    launchUrl: '/', // TWA için başlangıç ​​yolu. Etki alanına göre olmalıdır.
    ad: 'SimiCart PWA', // Android Başlatıcı'da gösterilen ad.
    themeColor: '#ED8A19', // Durum çubuğu için kullanılan renk.
    navigasyonColor: '#303F9F', // Gezinme çubuğu için kullanılan renk.
    backgroundColor: '#baba', // Açılış ekranı arka planı için kullanılan renk.
    enableNotifications: false, // Bildirim yetkilendirmesini etkinleştirmek için true olarak ayarlayın.
    // Uygulamanız için kısayolları buraya ekleyin. Her kısayol aşağıdaki alanları içermelidir:
    // - isim: Kısayolda görünecek dize.
    // - short_name: |name| ise daha kısa dize kullanılır çok uzun.
    // - url: Uygulamayı başlatmak için URL'nin mutlak yolu (örn. '/create').
    // - simge: Simge olarak kullanılacak çizilebilir klasördeki kaynağın adı.
    kısayollar: [
        isim: 'SimiCart'ı Aç', 
        short_name: 'Aç', 
        url: '/aç', 
        simge: 'sıçrama'
    ]
,
    // Açılış ekranı kaldırılırken oynatılacak milisaniye cinsinden kararma animasyonunun süresi.
    sıçramaScreenFadeOutSüre: 300
]

2. Adım : Bir anahtar deposu oluşturun ve APK'yı doğrulayın

APK'nızın doğrulanması için anahtar depoları veya yükleme anahtarları gereklidir. Bir anahtar deposu oluşturmak için Android Studio'yu başlatın ve Oluştur → İmzalı Paket/APK Oluştur seçeneğine gidin ve gerekli alanları doldurun.

Yeni anahtar deposu oluştur - Android Studo

Bir Anahtar Deposu oluşturduktan sonra, aşağıdaki komutları kullanarak SHA256 parmak izini ondan çıkarmanız gerekir:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 
 Giriş türü: PrivateKeyEntry
...
Sertifika parmak izleri:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? bu satırı kopyala

Adım 3 : Dijital Varlık Bağlantısını Yapılandırın

Web içeriğinizin sahiplik doğrulaması için, daha sonra APK'nıza bağlanmak için kullanılabilecek bir Dijital Varlık Bağlantısı gereklidir.

Bir ekstre dosyası oluşturun

Daha önce çıkardığınız SHA256 parmak izini kullanın ve İfade Listesi Oluşturucu ve Test Cihazı ile bir ifade dosyası oluşturun.

Bir ekstre dosyası oluşturduktan sonraki adım, Digital Asset Tool'dan gelen bilgileri içeren, herkesin erişebileceği bir dosya oluşturmaktır. Dosya, web barındırıcınıza ve şu konuma yerleştirilmelidir:

 .iyi bilinen/varlık bağlantıları.json

Bu dosyanın konumu, web uygulamanızın oluşturma sürecine bağlıdır, ancak normalde konuşlandırılmış dizinlerde, yani 'genel' veya 'dist' dizinlerde olmalıdır.

Her şey bittiğinde, yapmanız gereken bir sonraki ve son adım, uygulamanızı dağıtmaktır.

4. Adım : Uygulamanızı Google Play'de oluşturun ve yayınlayın

Google Play Konsolunuz varsayılan ayarlardayken, Tüm Uygulamalar → Uygulama Oluştur seçeneğine gidin.

Dahili Test Oluşturun

Uygulamanızın Dahili Test Kanalı oluşturmak için Uygulama sürümleri → Dahili Test Kanalı → Sürüm oluştur seçeneğine gidin.

İmzalı APK Oluşturun

Android Studio'da, Oluştur → İmzalı Paket/APK Oluştur'a gidin ve daha önce çıkardığımız SHA256 anahtar deposunu kullanın. Her iki imza sürümü kutusunu da işaretlediğinizden emin olun.

Android Studio'da imzalı APK oluşturun

APK'yı yükleyin

Artık bu sürecin sonuna geldiniz. Apk'nizi yüklemek için Google Play Store, Uygulama Sürümleri → Dahili Test Kanalı → Sürümü Düzenle seçeneğine gidin.

Mağaza Girişini tamamlamayı unutmayın

Uygulamanızın inceleme süreci için listelenebilmesi için gerekli tüm alanların doldurulması gerekir. Bu alanlar, fiyatlandırma ayrıntıları, mağaza girişi, içerik derecelendirmesi vb. gibi önemli bilgiler için gereklidir. Bu işlem tamamlandığında, tüm gerekli alanların doldurulduğunu belirten dört yeşil onay işareti ️ görmelisiniz.

Ve bu kadar. PWA'nız artık incelemeye hazır ve birkaç saat içinde genel olarak indirilmeye hazır olacak.

Apple Uygulama Mağazası

Tüm büyük uygulama pazarları arasında Apple App Store, PWA'lara karşı en az sıcak ve hatta düşmanca olanı olabilir.

Tam Safari motoru iPhone'un içindedir. Ve böylece, tıpkı iPhone'daki uygulamalar gibi tam olarak görünen ve davranan harika Web 2.0 ve Ajax uygulamaları yazabilirsiniz. Ve bu uygulamalar iPhone servisleriyle mükemmel bir şekilde bütünleşebilir. Arama yapabilirler, e-posta gönderebilirler, Google Haritalar'da bir konum arayabilirler.

Steve Jobs, 2007

iOS'ta, PWA'lar özellikler açısından ciddi şekilde sınırlıdır . Anında iletme bildirimleri için destek yoktur, web uygulaması bildirimi yalnızca kısmen desteklenir ve Yeni Uygulama Galerisi gibi yeni özellikler genellikle PWA'ları tamamen yok sayar. Ve bu nedenle, Apple'ın App Store İnceleme Yönergeleri uyarınca PWA'nın Apple App Store'da hoş karşılanmaması yalnızca mantıklıdır:

Uygulamanız, onu yeniden paketlenmiş bir web sitesinin ötesine taşıyan özellikler, içerik ve kullanıcı arayüzü içermelidir. Uygulamanız özellikle kullanışlı, benzersiz veya "uygulama benzeri" değilse, App Store'a ait değildir.

Minimum İşlevsellik, App Store İnceleme Yönergeleri

Apple, PWA'nın tüm özelliklerini sekteye uğratmak için elinden geleni yaptığından, Cordova gibi yerel bir uygulama sarmalayıcıyla bile bir PWA yayınlama çabası boşunadır. Şimdilik, yalnızca gelecekteki iOS sürümlerinin PWA için daha iyi destek getireceğini umabiliriz, ancak şu andan itibaren PWA'yı Apple App Store'da yayınlamak mümkün değildir , bu nedenle hedef kitlenizin çoğu varsa, bunun yerine yerel bir uygulama yaklaşımı düşünmelisiniz. iOS tabanlı cihazları kullanır.

 Devamını oku: iOS 14 Beta'daki PWA'lar: İnce Değişiklikler

Microsoft Mağazası

Windows 10 ve PWA: Yazılım Teslimatının Geleceği makalemizde belirtildiği gibi, Microsoft bir süredir Progressive Web App mağazasının temellerini atıyor ve adım adım gerçeğe dönüşüyor. Daha popüler markalardan gelen PWA'lar, uygulama pazarlarının her yerinde ve diğerlerinin izleyeceği daha az örnek sonuç olmadan şimdiden dolmaya başladı.

Google gibi, Microsoft da PWA'ları memnuniyetle karşılar ve ayrıca yerel UWP uygulamalarını popüler hale getirmeyi ve hibrit uygulamalarla değiştirmeyi planlıyor - yerel kabuklara sarılmış bir tür Aşamalı Web Uygulaması.

Teoride, Progresif Web Uygulamanızı Microsoft Store'da yayınlamak , başlangıçta Bing'i kaliteli PWA'lar için bir tarama mekanizması olarak kullanan otomatik bir süreç olarak planlandığından, hiç çaba harcamanıza gerek yoktur. Ancak, her şey hala deneysel bir aşamadadır ve planlandığı kadar etkili bir şekilde çalışmaz, bu nedenle PWA'nızı bir Windows uygulama paketi (.appx) olarak manuel olarak göndermeniz gerekir. Ancak endişelenmeyin, süreç belirli bir uygulama mağazası kadar sinir bozucu değil.

Gereksinimler

  • Bir Windows Geliştirme Merkezi hesabı
  • PWA Oluşturucu
  • Mağaza politikalarına uygun, çalışan ve kalite kontrolü yapılmış bir Aşamalı Web Uygulaması

1. Adım : Uygulamanız için bir ad ayırın

Microsoft Store'da bir uygulama yayınlamanın ilk adımı bir ad ayırmaktır. Deli bir delikanlı var olan her ismi ayırmaya karar verirse ne olacağını merak ediyorsanız: merak etmeyin, isim rezervasyonu 3 ay sonra sona erecek.

Bir ad ayırın - Microsoft Mağazası

Gerekli alanları doldurun ve bu bilgiler daha sonra gerekli olacağından bir yere not edin.

2. Adım: PWABuilder kullanarak bir AppX oluşturun

Yukarıda belirtildiği gibi, PWABuilder, büyük uygulama pazarlarında yayınlanabilen işlevsel bir paket oluşturmanın harika bir yoludur. Yalnızca PWA'nın benimsenmesini ilerletmek amacıyla Microsoft tarafından geliştirilen piyasadaki ilk araçlardan biridir.

Manifest Oluştur

PWABuilder - Manifest Oluştur

PWABuilder'da PWA'nızın URL'sini girin ve Başlayın'a tıklayın. Özellikle Microsoft Store için oluşturulmamış PWA'lar için genellikle gerekli olan manifest.json dosyanızdaki eksik bilgileri otomatik olarak belirlediği ve/veya doldurduğu için bu adımın çok önemli olduğunu unutmayın.

 Önerilen okuma: PWA Bildirimi: Web uygulamanızın tezahürünü oluşturmanın kolay yolu

Sonraki adım, PWA'nız için hizmet çalışanları oluşturmaktır, ancak sizinkinin, hizmet çalışanlarının zaten entegre olduğu tipik bir Aşamalı Web Uygulaması olduğunu varsayarsak, bu adım atlanacak ve son adıma geçeceğiz: .appx paketinizi alma.

AppX oluştur

PWABuilder - AppX oluştur

AppX oluştur'u tıkladığınızda, şu açılır pencereye benzer bir şey görmelisiniz:

PWABuilder - AppX oluştur

Daha önceki bilgilerin kullanışlı olabileceği yer burasıdır. Alanları doldurun ve .appx paketini içeren bir indirme kutusu gösterilecektir. İndirin ve artık PWA'nızı Microsoft Store'da yayınlamaya hazır olacaksınız.

PWABuilder tarafından oluşturulan AppX paketi

PWA'nızı mağazada yayınlamadan önce test etmek istemeniz durumunda, Geliştirici Modu test_install.ps1 üzerinde sağ tıklayın PowerShell ile Çalıştır'ı etkinleştirerek Windows'ta test etme seçeneği her zaman vardır. Bunu yapmak, PWA'nızı otomatik olarak masaüstünüze ve Başlat menüsüne ekler; buradan başlatılıp her şeyin düzgün çalışıp çalışmadığını görmek için test edilebilir.

3. Adım: Uygulama paketinizi Microsoft Store'a gönderin

PWA'nızı Microsoft Store'da yayınlamak için daha önce indirdiğiniz .zip içindeki paket klasörüne gitmeniz gerekir. Bu klasörde, Microsoft Store'da yayınlamanız gereken her şey bulunur. Açıklamalar için, bu klasör yalnızca web üzerindeki PWA'nıza ve diğer ilgisiz Mağaza meta verilerine bir yönlendirme mekanizması işlevi gördüğü için kodlarınızın hiçbirini içermez.

PWA paketi appX

Windows.appx dosyasını bulduktan sonra Geliştirme Merkezinizdeki gönderim sayfasına gidin ve gerekli bilgileri doldurun:

Windows Geliştirme Merkezi gönderimi
' Paketler ' sekmesi, windows.appx dosyanızı yüklemek istediğiniz yerdir.

Tüm adımları tamamladıktan ve gerekli tüm alanları doldurduktan sonra, PWA'nızın artık inceleme sürecine hazır olduğunu belirten “ Mağazaya Gönder ” düğmesi yanmalıdır. Bu işlemin tamamlanması bir saatten birkaç güne kadar sürecektir; sona erdiğinde, PWA'nız onaylanacak ve herkese açık/özel indirmeler için mevcut olacaktır (Dev Merkezi'ndeki uygunluk ayarlarınıza bağlıdır).

Çözüm

Tüm bunlardan sonra, belki de hala neden bir Aşamalı Web Uygulaması oluşturmanız gerektiğini merak ediyorsunuz - bir tane yayınlamak için tüm bu zahmetten çok daha az. Ve böyle temel sorular sormakta haklısın.

Progressive Web App, yazılım dağıtımının geleceği ve Web Teknolojisinin Evriminde bir sonraki doğal adım olduğunu adım adım kanıtlıyor. Şu an itibariyle, tüm cihazlarda birleşik ve ilgi çekici deneyimin yüksek dönüşümlerin anahtarı olduğu e-ticaret dünyasının her yerinde zaten yaygın olarak kullanılmaktadır.

Yeni bir teknoloji olduğundan, olduğu gibi bir Aşamalı Web Uygulaması oluşturmak zaten yeterince zor. SimiCart ile, piyasadaki eksiksiz ve en uygun maliyetli çözümü sağladığımız için artık Magento PWA'nızın geliştirme aşamaları hakkında endişelenmenize gerek yok.

simicart PWA'yı keşfedin