Ana içeriğe atla
Apple, bir kullanıcının ana ekranına eklenen web uygulamaları için iOS ve iPadOS 16.4+ sürümünde push bildirimlerini desteklemeye başladı. Bu işlevsellik Safari, Chrome ve Edge tarayıcılarında çalışır ve web-öncelikli şirketler için yeni etkileşim fırsatları açar. Bu kapsamlı kılavuz, iOS web push bildirimlerini başarıyla uygulamak için ihtiyacınız olan her şeyi kapsar.

Mobil cihazda örnek web push bildirimi.

​
2025 için önemli güncellemeler

Tarayıcılar Arası Destek: Web push bildirimleri artık Safari, Chrome ve Edge dahil olmak üzere iOS/iPadOS 16.4+ üzerindeki tüm büyük tarayıcılarda çalışıyor. iOS 17+ İyileştirmeleri: İlgili API’ler varsayılan olarak etkinleştirilmiş gelişmiş implementasyon, web push’u kullanıcılar için daha erişilebilir hale getiriyor. Güvenilirlik Hususları: Bazı geliştiriciler, iOS web push bildirimlerinin başlangıçta çalıştığı ancak daha sonra beklenmedik şekilde durduğu ara sıra güvenilirlik sorunları bildiriyor. Bildirim teslimat oranlarınızı izleyin ve yedek etkileşim stratejilerinizin yerinde olmasını sağlayın.

​
Gereksinimler

  • iOS/iPadOS Sürümü: 16.4 veya üzeri
  • HTTPS Origin: Duyarlı tasarımla güvenli bağlantı
  • Web Uygulama Manifestosu: Doğru ayarlarla geçerli manifest.json dosyası
  • Ana Ekran Kurulumu: Web uygulaması, desteklenen herhangi bir tarayıcıdan kullanıcının ana ekranına eklenmelidir
  • Kullanıcı Tarafından Başlatılan Eylem: İzin istemleri görünmeden önce kullanıcı sitenizle etkileşime girmelidir
  • OneSignal Service Worker: Bildirim teslimatı için gereklidir

​
Progressive web app (PWA) kontrolü

Web siteniz zaten bir Progressive Web App (PWA) ise, ek site güncellemelerine gerek yoktur. Sitenizin bir PWA olarak uygun olup olmadığını denetlemek için Chrome DevTools’da Lighthouse’u kullanın.

​
Kurulum

​
1. Web uygulama manifestonuzu oluşturun

Bir Web Uygulama Manifestosu (manifest.json), web uygulamanızın bir kullanıcının cihazına yüklendiğinde nasıl göründüğünü ve davrandığını tanımlayan bir JSON dosyasıdır. iOS web push için bu dosya zorunludur.

​
Gerekli manifest alanları

manifest.json dosyanız bu temel alanları içermelidir:
  • $schema (önerilir): Doğrulama ve IDE desteği için JSON şema URL’si
  • name (gerekli): Kullanıcılara gösterilen tam uygulama adı
  • display (gerekli): iOS uyumluluğu için "standalone" veya "fullscreen" olarak ayarlanmalıdır
  • start_url (gerekli): Uygulama başlatıldığında giriş noktası URL’si
  • icons (gerekli): Birden fazla boyutta ikon nesneleri dizisi
  • id (önerilir): Birden fazla uygulama örneğine izin veren benzersiz tanımlayıcı

​
Örnek manifest dosyası

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
İmplementasyon adımları

  1. Dosya Yerleşimi: manifest.json’u web sitenizin root dizinine yerleştirin
  2. HTML Entegrasyonu: Tüm sayfaların <head> bölümüne bu link etiketini ekleyin:
<link rel="manifest" href="/manifest.json"/>
  1. İkon Hazırlığı: Birden fazla boyutta yüksek kaliteli PNG ikonları oluşturun (192x192, 256x256, 384x384, 512x512 piksel önerilir)
Manifest dosyalarını hızlıca oluşturmak için SimiCart Manifest Generator gibi araçları kullanın veya mevcut olanları Manifest Tester ile doğrulayın.

​
2. OneSignal service worker’ı ekleyin

Web SDK kurulumumuzu zaten tamamladıysanız ve diğer tarayıcılarda web push bildirimleri alabiliyorsanız, bu adım tamamlanmıştır. Ayrıntılı kurulum talimatları için OneSignal Service Worker belgelerine bakın.

​
3. İzin istemlerini yapılandırın

Web SDK kurulumunuzdaki mevcut Web izin istemleri iOS cihazlarda yalnızca kullanıcılar sitenizi ana ekranlarına ekledikten ve oradan açtıktan sonra çalışacaktır. Bu Apple’ın tasarım gereksinimidir.

​
4. Kullanıcıları “Ana Ekrana Ekle”ye yönlendirin

İzin istemlerinin ayarlarınıza göre göründüğü masaüstü veya Android cihazların aksine, iOS kolaylaştırmanız gereken belirli bir kullanıcı yolculuğu gerektirir.

​
Gerekli kullanıcı yolculuğu

Kullanıcılar bildirimleri almak için bu adımları tamamlamalıdır:
  1. iOS/iPadOS 16.4+ üzerinde Safari, Chrome veya Edge’de web sitenizi ziyaret edin
  2. Tarayıcının Paylaş düğmesine tıklayın
  3. Ana Ekrana Ekle seçeneğini seçin
  4. Uygulamayı cihazlarına kaydedin
  5. Uygulamayı ana ekrandan açın (tarayıcıdan değil)
  6. Yerel izin istemini tetiklemek için abone ol düğmenizle etkileşime girin

iOS'ta bir Web Sitesini Ana Ekrana Ekleme

​
Kullanıcı katılım stratejileri

Bu süreç sezgisel olmadığından, şunlar aracılığıyla net rehberlik uygulayın:
  • Web sitesi banner’ları: Özellikle mobil Apple cihazlarda bildirimlerin değerini açıklayan ve adım adım talimatlar sağlayan banner’lar görüntüleyin.
  • Görsel kılavuzlar: Kullanıcılara tam olarak nereye dokunacaklarını göstermek için ekran görüntüleri ve oklar kullanın.
  • Zamanlama: Rehberliği, kullanıcılar içeriğinizle etkileşim gösterdikten sonra sunun.

​
İmplementasyon örnekleri

Gerçek uygulamalardan etkili yaklaşımlar:

Kullanıcıları ana ekrana eklemeye teşvik eden örnek banner

Adım adım görsel rehberlik

Fayda odaklı mesajlaşma

Görsel ipuçlarıyla net eylem çağrısı

​
Açık kaynak çözümleri

Bu popüler açık kaynak banner çözümünü uygulamayı düşünün: GitHub Projesi: add-to-home-screen by rajatsehgal

rajatsehgal'in açık kaynak projesinden Ana Ekrana Ekle banner istemi örneği.

Ek banner örnekleri ve en iyi uygulamalar web.dev’de mevcuttur.

​
5. Test ve doğrulama

​
Manifest dosyası testi

  1. Erişilebilirlik Kontrolü: Herkese açık erişilebilirliği sağlamak için https://yoursite.com/manifest.json’a gidin
  2. Tarayıcı DevTools:
    • Chrome DevTools’u açın (F12)
    • Application sekmesi → Manifest’e gidin
    • Hataları veya uyarıları inceleyin
  3. Çevrimiçi Doğrulayıcılar:

​
Uçtan uca push bildirim testi

  1. Safari, Chrome veya Edge kullanarak iOS 16.4+ cihazda web sitenizi ziyaret edin
  2. Tarayıcının Paylaş düğmesine tıklayın
  3. Ana ekrana ekle’yi seçin
  4. Uygulamayı cihazınıza kaydedin
  5. Uygulamayı ana ekrandan açın (kritik adım)
  6. Abone ol düğmenizi tetikleyin - yerel izin istemi görünmelidir
  7. İzin verin ve bildirim teslimatını test edin

​
Önemli test notları

Yeniden test gereksinimleri: Aynı cihazda tekrar test etmek için:
  • Uygulamayı ana ekrandan kaldırın
  • Tarayıcı önbelleğini temizleyin (Ayarlar > Safari/Chrome/Edge > Önbelleği temizle)
  • Süreci tekrarlayın
İzin reddedildi kurtarma: İzin reddedilirse, izin isteminin tekrar görünmesi için ana ekran uygulaması kaldırılmalı ve yeniden eklenmelidir. Kontrol edilecek yaygın sorunlar:
  • display alanının "standalone" veya "fullscreen" olduğundan emin olun
  • Tüm ikon yollarının erişilebilir olduğunu doğrulayın
  • Manifest’in doğru MIME tipiyle (application/manifest+json) sunulduğunu onaylayın
  • CORS hataları için test edin

​
Sorun Giderme

Manifest yüklenmiyor: Dosya yolunu, HTTPS gereksinimini ve sunucunuzdaki MIME tipi yapılandırmasını kontrol edin. İkonlar görüntülenmiyor: Ikon dosyası erişilebilirliğini ve manifest’teki doğru boyut belirtimlerini doğrulayın. İzin istemi görünmüyor: Kullanıcının siteye ana ekran uygulaması üzerinden eriştiğinden ve önce etkileşimli bir öğeye tıkladığından emin olun. Bildirimler teslim edilmiyor: OneSignal service worker’ın düzgün kurulduğunu doğrulayın ve hatalar için tarayıcı konsolunu kontrol edin.

​
Sonraki adımlar

Artık bildirim göndermeye hazırsınız! iOS kullanıcılarınızla web push bildirimleriyle etkileşime başlamak için Push belgelerine devam edin veya Create message API’mizi kullanın.
Sürekli başarı için, iOS web push performans metriklerinizi izleyin ve diğer platformlarda sorunsuz deneyimler sağlarken iOS kullanıcıları için gerekli ek adımları zarif bir şekilde yöneten aşamalı geliştirme stratejileri uygulamayı düşünün.