Bildirim Kanalları ve Zengin İçerik
Farklı bildirim türleri için Android'de bildirim kanalları oluşturun, bildirimlere görseller ve eylem düğmeleri ekleyin ve iOS'ta rozet sayısını yapılandırın.
Bildirim Kanalları ve Zengin İçerik, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.
Bildirim Kanalları Nedir?
Bildirim kanalları, Android kullanıcılarının bağımsız olarak denetleyebildiği bildirim kategorileridir. Android 8'de (API 26) kullanıma sunulan kanallar, kullanıcıların uygulamanızdan hangi bildirim türlerini almak istediklerine karar vermesini sağlar; örneğin 'Mesajlar'a izin verip 'Promosyonlar'ı engelleyebilirler. Her kanalın kendi ses, titreşim ve önem ayarları vardır.
Kanallar yalnızca Android'e özgü bir kavramdır. iOS'un bildirim kategorileri ve kullanıcı ayarları üzerinden kendi bildirim yönetimi vardır; ancak kanalların doğrudan karşılığı yoktur. Kanal kurulumu kodunu her zaman bir Platform.OS denetimiyle koruyun.
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';
async function setupChannels() {
if (Platform.OS !== 'android') return;
// Create your app's notification channels:
await Notifications.setNotificationChannelAsync('messages', { ... });
await Notifications.setNotificationChannelAsync('reminders', { ... });
await Notifications.setNotificationChannelAsync('promotions', { ... });
}Bildirim Kanalı Oluşturma
Notifications.setNotificationChannelAsync(channelId, config) ile bir kanal oluşturun. Yapılandırma; name (kullanıcılara Ayarlar'da gösterilir), importance (bildirimlerin ne kadar görünür olacağı), vibrationPattern, lightColor ve enableVibrate seçeneğini içerir.
Kanallar kalıcıdır; oluşturulduktan sonra kullanıcılar bunları Ayarlar'da değiştirebilir ve uygulamanız kullanıcı tercihlerini geçersiz kılamaz. Kanalları kullanmadan önce oluşturun ve kanal kimliği aracılığıyla uygulama yeniden kurulumları arasında da kalıcı oldukları için bu kurulumu her uygulama başlatılışında çağırın.
await Notifications.setNotificationChannelAsync('messages', {
name: 'Messages',
description: 'New messages from other users',
importance: Notifications.AndroidImportance.HIGH,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#0066CC',
enableVibrate: true,
enableLights: true,
showBadge: true,
lockscreenVisibility: Notifications.AndroidNotificationVisibility.PUBLIC,
});Kanallar İçin Önem Düzeyleri
importance düzeyi, bildirimin kullanıcıyı ne kadar güçlü biçimde böleceğini denetler:
- NONE (0) — hiç görünmez
- MIN (1) — ses yok, başlık yok; bildirim çekmecesinde görünür
- LOW (2) — ses yok, başlık yok; bildirim çekmecesinde görünür
- DEFAULT (3) — ses çıkarır, başlık olarak görünür
- HIGH (4) — ses çıkarır, belirgin biçimde görünür
- MAX (5) — her zaman gösterilir, ekranı uyandırır
Zamana duyarlı iletişimler (mesajlar, aramalar) için HIGH; bilgilendirici güncellemeler ve tanıtım içeriği için DEFAULT veya LOW kullanın.
// Different channels with appropriate importance:
await Notifications.setNotificationChannelAsync('calls', {
name: 'Incoming Calls',
importance: Notifications.AndroidImportance.MAX, // wakes screen
});
await Notifications.setNotificationChannelAsync('news', {
name: 'News Updates',
importance: Notifications.AndroidImportance.LOW, // unobtrusive
});
await Notifications.setNotificationChannelAsync('marketing', {
name: 'Promotions',
importance: Notifications.AndroidImportance.MIN, // nearly invisible
});Bildirimleri Kanallara Atama
Bir Android cihazına anlık bildirim gönderirken, bildirim mesajına channelId ekleyerek hangi kanala ait olduğunu belirtin. Kanal belirtilmezse bildirim varsayılan kanala düşer. Daha eski Android sürümlerinde (API 26'nın altında) kanal kimliği yok sayılır.
Bildirimleri kanallara doğru şekilde atamak önemlidir; 'Promosyonlar' kanalını sessize alan kullanıcılar 'Mesajlar' kanalının etkin kalmasını bekler. Bildirim türlerini tek bir kanalda karıştırmak, kullanıcıların önemli bildirimleri de sessize almasına yol açar.
// In push notification payload:
const message = {
to: pushToken,
title: 'Alice: Hey, are you free tonight?',
body: 'New message from Alice',
channelId: 'messages', // routes to messages channel
data: { screen: 'Chat', conversationId: 'alice_123' },
};
// For a promotional notification:
const promo = {
to: pushToken,
title: 'Weekend Sale — 30% off!',
channelId: 'promotions', // low importance, unobtrusive
};Android'de Bildirim Grupları
Kullanıcının uygulamanızdan birden fazla okunmamış bildirimi olduğunda Android, bildirim alanının aşırı dolmasını önlemek için bunları genişletilebilir tek bir bildirimde gruplandırabilir. Gruplandırmayı, bildirim yükünde groupId ayarlayarak ve bir özet bildirimi oluşturarak yapılandırın.
Gruplandırılmış bildirimler daraltıldığında sayıyla birlikte yığınlanmış bir görünüm gösterir, genişletildiğinde ise tek tek bildirimleri gösterir. Bu, kullanıcının uygulamayı açmadan önce çok sayıda mesaj alabileceği sohbet uygulamaları için önemlidir.
// Send individual notifications with group ID:
const messageNotif = {
to: token,
title: 'Alice: Hello!',
channelId: 'messages',
android: {
groupId: 'chat_messages',
tag: 'msg_alice_1',
},
};
// Send group summary:
const summary = {
to: token,
title: '3 new messages',
channelId: 'messages',
android: {
groupId: 'chat_messages',
groupSummary: true,
},
};Zengin Bildirimler: Görseller ve Büyük Metin
Android, başlık ve gövde metninin ötesine geçen zengin bildirim stillerini destekler. BigPicture stili, genişletilmiş bildirimde büyük bir görsel gösterir. BigText stili ise bildirim genişletildiğinde birden çok satır metin gösterir. Bu stiller, bildirimleri daha bilgilendirici ve ilgi çekici hâle getirir.
expo-notifications içinde, bildirim içeriğinde android.bigPicture veya android.bigText alanlarını kullanın. Zengin bildirimler, Android kanal desteği gerektirir ve düz metin bildirimlerine kıyasla etkileşimi artırır.
const richNotification = {
to: token,
title: 'New photo from Alice',
body: 'Alice shared a photo with you',
channelId: 'messages',
android: {
imageUrl: 'https://myapp.com/photos/photo123.jpg', // big picture
color: '#FF6B6B',
actions: [
{ title: 'View', action: 'view_photo' },
{ title: 'Dismiss', action: 'dismiss' },
],
},
};iOS'ta Zengin Bildirimler
iOS, bildirim hizmeti uzantıları aracılığıyla zengin bildirimleri destekler. Bunlar, uygulamada bildirimleri gösterilmeden önce yakalayan ve görsel ekleyebilen, içeriği değiştirebilen veya medya indirebilen ayrı hedeflerdir. Bunun için expo-notifications'ın yönetilen API'si dışında yerel kod gerekir.
Daha basit kullanım senaryolarında iOS anlık bildirimleri, APNs yükünde mutable-content: 1 bayrağı ve bir medya eki URL'si içerebilir; bunlar bir Bildirim Hizmeti Uzantısı tarafından işlenir. Expo yönetilen uygulamalarında bunun için bir yapılandırma eklentisi veya çıplak iş akışı gerekir.
// iOS push payload (APNs level):
// expo-notifications sends this automatically
// when you set content fields:
const iOSPushPayload = {
aps: {
alert: {
title: 'New photo from Alice',
body: 'Alice shared a photo with you',
},
sound: 'default',
badge: 3,
'mutable-content': 1, // allows service extension to modify
'content-available': 1, // allows background fetch
},
};iOS Rozet Sayısını Yönetme
iOS'ta rozet sayısı, ana ekrandaki uygulama simgesinin üzerinde kırmızı bir sayı olarak görünür. Rozet sayısını anlık bildirim yükünün badge alanında ayarlayın. Sunucu, artış miktarını değil, her zaman toplam okunmamış sayısını (mutlak sayı) göndermelidir; çünkü birden çok cihazın aynı rozet sayısını göstermesi gerekir.
Kullanıcı tüm bildirimleri açıp okuduğunda, Notifications.setBadgeCountAsync(0) ile rozeti 0 olarak sıfırlayın. Bu çağrıyı bildirim listesini gösteren ekrana ekleyin; böylece kullanıcı gelen kutusunu kontrol ettiğinde rozet doğal olarak temizlenir.
// Push payload — absolute unread count:
const notification = {
to: token,
title: 'Alice sent you a message',
body: 'Click to read',
badge: 5, // total unread, not +1
};
// In app, when inbox is opened:
import * as Notifications from 'expo-notifications';
useEffect(() => {
return navigation.addListener('focus', () => {
Notifications.setBadgeCountAsync(0); // clear on inbox open
});
}, [navigation]);Bildirim Seslerini Özelleştirme
Hem iOS hem de Android özel bildirim seslerini destekler. Ses dosyalarını uygulama paketine ekleyin ve dosya adlarıyla belirtin. iOS'ta 30 saniyeden kısa .aiff, .wav veya .caf dosyaları bildirim sesi olarak kullanılabilir. Android'de sesler kanal düzeyinde yapılandırılır.
Expo yönetilen iş akışında ses dosyalarını assets klasörüne ekleyin ve bunlara bir yapılandırma eklentisi veya çıplak iş akışı aracılığıyla başvurun. Birçok uygulama özel sesleri kullanmayıp kullanıcıların fark etmeye zaten alışık olduğu varsayılan sistem sesini kullanır.
// iOS: add sound file to iOS app bundle
// Android: create channel with sound
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('messages', {
name: 'Messages',
importance: Notifications.AndroidImportance.HIGH,
sound: 'message_sound', // filename without extension
});
}
// In push payload:
{
to: token,
sound: 'default', // use system default
// Or: sound: 'message_sound.aiff' on iOS
}Bildirim Kanallarını Silme
Bildirim türlerinizi yeniden yapılandırırsanız eski kanalları Notifications.deleteNotificationChannelAsync(channelId) ile silebilirsiniz. Aynı ID'ye sahip bir kanalı silip yeniden oluşturmak, kullanıcı özelleştirmelerini sıfırlar. Bu tartışmalı bir işlemdir, çünkü kullanıcı tercihlerini geçersiz kılar.
En iyi uygulama: Kullanıcıların özelleştirmiş olabileceği kanalları silmekten kaçının. Bunun yerine, daha iyi adlara sahip yeni kanallar oluşturup yeni bildirimleri bu kanallara yönlendirerek eski kanalları kullanımdan kaldırın. Eski kanallar boş hâle gelir ancak Ayarlar'da görünmeye devam eder (uygulama yeniden yüklenince kaybolurlar).
// Get all current channels:
const channels = await Notifications.getNotificationChannelsAsync();
console.log('Active channels:', channels.map(c => c.id));
// Delete a deprecated channel:
await Notifications.deleteNotificationChannelAsync('old_alerts');
// CAUTION: this resets any user customizations
// for that channel ID if recreatedBildirim İzni Durumu ve Uygulama İçi Ayarlar
İşletim sistemi düzeyindeki izin verilmiş olsa bile uygulama içinde bildirim tercihlerini denetleme seçenekleri sunun. Kullanıcılar, mesaj bildirimlerini etkin tutarken pazarlama bildirimlerini devre dışı bırakabilmelidir. Kullanıcı ve bildirim türü başına sunucu tarafında tercih bayrakları uygulayın.
Ayrıca işletim sistemi izni reddedildiğinde, Linking.openSettings() kullanarak Ayarlar uygulamasını açan bir düğmenin bulunduğu anlaşılır bir arayüz sunun. Bu, kullanıcıların izinleri farkında olmadan reddettiklerinde uygulamanızın bozuk olduğunu düşünmesini önler.
import { Linking } from 'react-native';
import * as Notifications from 'expo-notifications';
async function checkAndPromptPermission() {
const { status } = await Notifications.getPermissionsAsync();
if (status === 'denied') {
Alert.alert(
'Notifications Disabled',
'Enable notifications in Settings to receive important updates.',
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'Open Settings', onPress: () => Linking.openSettings() },
]
);
}
}Kısa Kontrol
Bu dersteki React Native Mobil Geliştirme kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: Android bildirim kanalları, bildirimleri türe göre gruplandırır ve kullanıcılara her kategorinin ses, titreşim ve görüntüleme ayarları üzerinde bağımsız denetim sağlar; MIN ile MAX arasındaki önem düzeyleri, bildirimlerin kullanıcıyı ne kadar yoğun biçimde böleceğini belirler; ayrıca anlık bildirim yüklerindeki channelId alanı, her bildirimi doğru kanala yönlendirir. Sırada, kalıcılığa sahip önbellekleme kullanarak çevrimdışı öncelikli veri getirmeyi TanStack React Query ile uygulayacağız.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Bildirim Kanalları ve Zengin İçerik” dersi ücretsiz mi?
Evet — “Bildirim Kanalları ve Zengin İçerik” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.
“Bildirim Kanalları ve Zengin İçerik” dersinde ne öğreneceğim?
Farklı bildirim türleri için Android'de bildirim kanalları oluşturun, bildirimlere görseller ve eylem düğmeleri ekleyin ve iOS'ta rozet sayısını yapılandırın. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Native Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Bildirim Kanalları ve Zengin İçerik” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İzin İsteme ve Push Token Alma
- Expo Push API ile Bildirim Gönderme
- Ön Plan ve Arka Plan Bildirimlerini Yönetme
- Bildirim Kanalları ve Zengin İçerik