Aracılığıyla paylaş

Android için PWA veya Karma web uygulaması geliştirmeye başlama

Bu kılavuz, web'de ve cihaz platformlarında (Android, iOS, Windows) kullanılabilecek tek bir HTML/CSS/JavaScript kod tabanı kullanarak Windows üzerinde karma web uygulaması veya Aşamalı Web Uygulaması (PWA) oluşturmaya başlamanıza yardımcı olur.

Web tabanlı uygulamalar, doğru çerçeveleri ve bileşenleri kullanarak Android cihaz üzerinde kullanıcılara yerel uygulamaya çok benzeyen bir şekilde çalışabilir.

PWA veya Karma web uygulamasının özellikleri

Android cihazlara yüklenebilen iki ana web uygulaması türü vardır. Uygulama kodunuzun bir uygulama paketine (karma) katıştırılmış olması veya bir web sunucusunda (pwa) barındırılması arasındaki temel farktır.

  • Hibrit web uygulamaları: Kod (HTML, JS, CSS) bir APK içinde paketlenmiş ve Google Play Store aracılığıyla dağıtılabilir. Görüntüleme altyapısı, oturum veya önbellek paylaşımı olmadan kullanıcıların internet tarayıcısından yalıtılır.

  • Aşamalı Web Uygulamaları (PWA): Kod (HTML, JS, CSS) web'de bulunur ve APK olarak paketlenmiş olması gerekmez. Kaynaklar bir Hizmet Çalışanı kullanılarak gerektiğinde indirilir ve güncelleştirilir. Chrome tarayıcısı uygulamanızı işler ve görüntüler, ancak yerel görünür ve normal tarayıcı adres çubuğunu içermez. Depolamayı, önbelleği ve oturumları tarayıcıyla paylaşabilirsiniz. Bu temelde Chrome tarayıcısının kısayolunu özel modda yüklemeye benzer. PWA'lar, Güvenilen Web Etkinliği kullanılarak Google Play Store'da da listelenebilir.

PWA'lar ve hibrit web uygulamaları, yerel bir Android uygulamasına çok benzer:

  • App Store üzerinden yüklenebilir (Google Play Store ve/veya Microsoft Store)
  • Kamera, GPS, Bluetooth, bildirimler ve kişi listesi gibi yerel cihaz özelliklerine erişebilirsiniz
  • Çevrimdışı Çalışma (İnternet bağlantısı yok)

PWA'ların birkaç benzersiz özelliği de vardır:

  • Android giriş ekranına doğrudan web'den yüklenebilir (App Store olmadan)
  • Google Play Store üzerinden Güvenilir Web Etkinliği kullanılarak ayrıca yüklenmesi yapılabilir.
  • Web araması yoluyla bulunabilir veya URL bağlantısı aracılığıyla paylaşılabilir
  • Yerel kod paketleme gereksinimini önlemek için bir Hizmet Çalışanı kullanın

Karma uygulama veya PWA oluşturmak için bir çerçeveye ihtiyacınız yoktur, ancak bu kılavuzda PhoneGap (Cordova ile) ve Ionic (Angular veya React kullanan Cordova veya Kapasitör ile) gibi birkaç popüler çerçeve ele alınacaktır.

Apache Cordova

Apache Cordova , eklentileri kullanarak yerel bir WebView'da yaşayan JavaScript kodunuz ile yerel Android platformu arasındaki iletişimi basitleştirebilen bir açık kaynak çerçevedir. Bu eklentiler, kodunuzdan çağrılabilen ve yerel Android cihaz API'lerini çağırmak için kullanılabilen JavaScript uç noktalarını kullanıma sunar. Bazı örnek Cordova eklentileri pil durumu, dosya erişimi, titreşim / halka tonları gibi cihaz hizmetlerine erişimi içerir. Bu özellikler genellikle web uygulamaları veya tarayıcılar tarafından kullanılamaz.

Cordova'nın iki popüler dağılımı vardır:

  • PhoneGap: Adobe tarafından destek sonlandırıldı.

  • İyonik

Iyonik

Ionic , uygulamanızın kullanıcı arabirimini (UI) her platformun (Android, iOS, Windows) tasarım diliyle eşleşecek şekilde ayarlayan bir çerçevedir. Ionic, Angular veya React kullanmanızı sağlar.

Uyarı

Cordova'ya alternatif olarak Capacitor adlı yeni bir Ionic sürümü vardır. Bu alternatif, uygulamanızın web'e daha uygun hale gelmesi için kapsayıcıları kullanır.

Gerekli araçları yükleyerek Ionic'i kullanmaya başlama

Ionic ile bir PWA veya karma web uygulaması oluşturmaya başlamak için önce aşağıdaki araçları yüklemelisiniz:

Ionic Cordova ve Angular ile yeni bir proje oluşturma

Komut satırınıza aşağıdakileri girerek Ionic ve Cordova yükleyin:

npm install -g @ionic/cli cordova

Komutunu girerek "Sekmeler" uygulama şablonunu kullanarak bir Ionic Angular uygulaması oluşturun:

ionic start photo-gallery tabs

Uygulama klasörüne geçin:

cd photo-gallery

Uygulamayı web tarayıcınızda çalıştırın:

ionic serve

Daha fazla bilgi için Ionic Cordova Angular belgelerine bakın. Uygulamanızı karma olmaktan PWA'ya nasıl taşıyacağınızı öğrenmek için Ionic belgelerinin Angular uygulamanızı PWA yapma bölümünü ziyaret edin.

Ionic Capacitor ve Angular ile yeni bir proje oluşturma

Komut satırınıza aşağıdakileri girerek Ionic ve Cordova-Res yükleyin:

npm install -g @ionic/cli native-run cordova-res

"Tabs" uygulama şablonunu kullanarak bir Ionic Angular uygulaması oluşturun ve komutu girerek Capacitor'u ekleyin:

ionic start photo-gallery tabs --type=angular --capacitor

Uygulama klasörüne geçin:

cd photo-gallery

Uygulamayı PWA yapmak için bileşenler ekleyin:

npm install @ionic/pwa-elements

@ionic/pwa-elements içeri aktarmak için dosyanıza src/main.ts aşağıdakileri ekleyin:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Uygulamayı web tarayıcınızda çalıştırın:

ionic serve

Daha fazla bilgi için Ionic Capacitor Angular belgelerine bakın. Uygulamanızı karma olmaktan PWA'ya nasıl taşıyacağınızı öğrenmek için Ionic belgelerinin Angular uygulamanızı PWA yapma bölümünü ziyaret edin.

Ionic ve React ile yeni bir proje oluşturma

Komut satırınıza aşağıdakileri girerek Ionic CLI'yi yükleyin:

npm install -g @ionic/cli

Şu komutu girerek React ile yeni bir proje oluşturun:

ionic start myApp blank --type=react

Uygulama klasörüne geçin:

cd myApp

Uygulamayı web tarayıcınızda çalıştırın:

ionic serve

Daha fazla bilgi için Ionic React belgelerine bakın. Uygulamanızı karma olmaktan PWA'ya nasıl taşıyacağınızı öğrenmek için Ionic belgelerinin React uygulamanızı PWA yapma bölümünü ziyaret edin.

Ionic uygulamanızı bir cihazda veya öykünücüde test etme

Ionic uygulamanızı bir Android cihazında test etmek için cihazınızı takın (önce geliştirme için etkinleştirildiğinden emin olun), ardından komut satırınıza şunu girin:

ionic cordova run android

Ionic uygulamanızı bir Android cihaz öykünücüsü üzerinde test etmek için şunları yapın:

  1. Java Development Kit (JDK), Gradle ve Android SDK'sı gibi gerekli bileşenleri yükleyin.

  2. Android Sanal Cihazı (AVD) oluşturma: Bkz. [Android geliştirici kılavuzu]](https://developer.android.com/studio/run/managing-avds.html).

  3. Ionic'e uygulamanızı derleyip öykünücüye dağıtması için komut girin: ionic cordova emulate [<platform>] [options]. Bu durumda komutu şu şekilde olmalıdır:

ionic cordova emulate android --list

Daha fazla bilgi için Ionic belgelerindeki Cordova Öykünücüsü'e göz atın.