सामग्री पर जाएं
उपयोगकर्ता गाइडसहायता डेमो अनुरोध करें साइन इन करें
Pushwoosh.com

tvOS मोडल रिच मीडिया

Pushwoosh SDK संस्करण 6.11.0 से, आप tvOS डिवाइस (Apple TV) पर मोडल रिच मीडिया भेज सकते हैं।

tvOS के लिए मोडल रिच मीडिया एक इंटरैक्टिव HTML-आधारित कंटेंट डिस्प्ले प्रदान करता है जो Apple TV के रिमोट कंट्रोल नेविगेशन के लिए अनुकूलित है। रिच मीडिया को विभिन्न स्थितियों, एनिमेशन और फोकस नेविगेशन समर्थन के साथ अनुकूलित किया जा सकता है।

रिच मीडिया पेजों के बारे में अधिक जानकारी के लिए, कृपया हमारी गाइड देखें।

इंस्टॉलेशन

Anchor link to

PushwooshTVOS मॉड्यूल वैकल्पिक है और इसे Swift Package Manager या CocoaPods का उपयोग करके आपके tvOS प्रोजेक्ट में एकीकृत किया जा सकता है।

Swift Package Manager

Anchor link to

अपने tvOS प्रोजेक्ट में Pushwoosh पैकेज जोड़ें:

  1. Xcode में, File → Add Package Dependencies… चुनें।
  2. रिपॉजिटरी URL दर्ज करें: https://github.com/Pushwoosh/Pushwoosh-XCFramework
  3. नवीनतम संस्करण चुनें।
  4. अपने tvOS लक्ष्य में निम्नलिखित फ्रेमवर्क जोड़ें:
    • PushwooshFramework
    • PushwooshCore
    • PushwooshBridge
    • PushwooshLiveActivities
    • PushwooshTVOS

CocoaPods

Anchor link to

अपने Podfile में जोड़ें:

target 'YourTvOSApp' do
  platform :tvos, '13.0'


  pod 'PushwooshXCFramework'
  pod 'PushwooshXCFramework/PushwooshTVOS'
end

फिर चलाएँ:

Terminal window
pod install

बेसिक इंटीग्रेशन

Anchor link to

1. अपने AppDelegate में Pushwoosh को कॉन्फ़िगर करें

Anchor link to

आवश्यक मॉड्यूल आयात करें और अपने एप्लिकेशन कोड के साथ Pushwoosh को कॉन्फ़िगर करें:

import UIKit
import PushwooshTVOS
import PushwooshFramework


@main
class AppDelegate: UIResponder, UIApplicationDelegate {


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {


        // Configure Pushwoosh with your app code
        Pushwoosh.TVoS.setAppCode("XXXXX-XXXXX")


        // Register for push notifications
        Pushwoosh.TVoS.registerForTvPushNotifications()


        return true
    }
}

2. डिवाइस टोकन पंजीकरण को संभालें

Anchor link to

Pushwoosh के साथ डिवाइस को पंजीकृत करने के लिए डिवाइस टोकन हैंडलर लागू करें:

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Pushwoosh.TVoS.registerForTvPushNotifications(withToken: deviceToken) { error in
        if let error = error {
            print("Failed to register: \(error)")
        } else {
            print("Successfully registered for push notifications")
        }
    }
}


func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
    Pushwoosh.TVoS.handleTvPushRegistrationFailure(error)
}

3. आने वाले पुश नोटिफिकेशन को संभालें

Anchor link to

रिच मीडिया कंटेंट के साथ आने वाले पुश नोटिफिकेशन को प्रोसेस करें:

func application(_ application: UIApplication,
                 didReceiveRemoteNotification userInfo: [AnyHashable: Any],
                 fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {


    // Handle push notification and display rich media if present
    if Pushwoosh.TVoS.handleTVOSPush(userInfo: userInfo) {
        completionHandler(.newData)
    } else {
        completionHandler(.noData)
    }
}

रिच मीडिया कॉन्फ़िगरेशन

Anchor link to

पोजिशनिंग

Anchor link to

tvOS के लिए मोडल रिच मीडिया को स्क्रीन पर पांच स्थानों पर रखा जा सकता है:

// Center position (default)
Pushwoosh.TVoS.configureRichMediaWith(position: .center, presentAnimation: .none, dismissAnimation: .none)


// Left side of the screen
Pushwoosh.TVoS.configureRichMediaWith(position: .left, presentAnimation: .fromLeft, dismissAnimation: .toLeft)


// Right side of the screen
Pushwoosh.TVoS.configureRichMediaWith(position: .right, presentAnimation: .fromRight, dismissAnimation: .toRight)


// Top of the screen
Pushwoosh.TVoS.configureRichMediaWith(position: .top, presentAnimation: .fromTop, dismissAnimation: .toTop)


// Bottom of the screen
Pushwoosh.TVoS.configureRichMediaWith(position: .bottom, presentAnimation: .fromBottom, dismissAnimation: .toBottom)

उपलब्ध स्थिति विकल्प:

enum PWTVOSRichMediaPosition {
    case center     // कंटेंट स्क्रीन के केंद्र में स्थित है (डिफ़ॉल्ट)
    case left       // कंटेंट स्क्रीन के बाईं ओर स्थित है
    case right      // कंटेंट स्क्रीन के दाईं ओर स्थित है
    case top        // कंटेंट स्क्रीन के शीर्ष पर स्थित है
    case bottom     // कंटेंट स्क्रीन के नीचे स्थित है
}

प्रेजेंट एनिमेशन

Anchor link to

नियंत्रित करें कि रिच मीडिया कंटेंट स्क्रीन पर कैसे दिखाई देता है:

enum PWTVOSRichMediaPresentAnimation {
    case none        // कोई एनिमेशन नहीं, कंटेंट तुरंत दिखाई देता है (डिफ़ॉल्ट)
    case fromTop     // कंटेंट स्क्रीन के ऊपर से स्लाइड करता है
    case fromBottom  // कंटेंट स्क्रीन के नीचे से स्लाइड करता है
    case fromLeft    // कंटेंट स्क्रीन के बाईं ओर से स्लाइड करता है
    case fromRight   // कंटेंट स्क्रीन के दाईं ओर से स्लाइड करता है
}

डिसमिस एनिमेशन

Anchor link to

नियंत्रित करें कि रिच मीडिया कंटेंट स्क्रीन से कैसे गायब हो जाता है:

enum PWTVOSRichMediaDismissAnimation {
    case none       // कोई एनिमेशन नहीं, कंटेंट तुरंत गायब हो जाता है (डिफ़ॉल्ट)
    case toTop      // कंटेंट स्क्रीन के ऊपर की ओर स्लाइड करता है
    case toBottom   // कंटेंट स्क्रीन के नीचे की ओर स्लाइड करता है
    case toLeft     // कंटेंट स्क्रीन के बाईं ओर स्लाइड करता है
    case toRight    // कंटेंट स्क्रीन के दाईं ओर स्लाइड करता है
}

कॉन्फ़िगरेशन उदाहरण

Anchor link to

एनिमेशन के साथ बाईं ओर दिखाई देने के लिए रिच मीडिया को कॉन्फ़िगर करें:

Pushwoosh.TVoS.configureRichMediaWith(
    position: .left,
    presentAnimation: .fromBottom,
    dismissAnimation: .toLeft
)

स्लाइड एनिमेशन के साथ नीचे दिखाई देने के लिए रिच मीडिया को कॉन्फ़िगर करें:

Pushwoosh.TVoS.configureRichMediaWith(
    position: .bottom,
    presentAnimation: .fromBottom,
    dismissAnimation: .toBottom
)

बिना एनिमेशन के केंद्र में दिखाई देने के लिए रिच मीडिया को कॉन्फ़िगर करें:

Pushwoosh.TVoS.configureRichMediaWith(
    position: .center,
    presentAnimation: .none,
    dismissAnimation: .none
)

क्लोज बटन कॉन्फ़िगरेशन

Anchor link to

डिफ़ॉल्ट रूप से, रिच मीडिया प्रस्तुतियों के नीचे एक क्लोज बटन प्रदर्शित होता है। यदि आवश्यक हो तो आप इस बटन को छिपा सकते हैं:

// Hide the system Close button
Pushwoosh.TVoS.configureCloseButton(false)

Apple TV के लिए फोकस नेविगेशन

Anchor link to

tvOS SDK Apple TV के रिमोट कंट्रोल के लिए फोकस नेविगेशन को स्वचालित रूप से प्रबंधित करता है। आपके रिच मीडिया HTML कंटेंट में इंटरैक्टिव तत्व (बटन, लिंक) Apple TV रिमोट का उपयोग करके फोकस करने योग्य होंगे।

फोकस व्यवहार

Anchor link to
  • HTML कंटेंट में फोकस करने योग्य तत्वों का स्वचालित रूप से पता लगाया जाता है
  • उपयोगकर्ता Apple TV रिमोट पर डायरेक्शनल पैड का उपयोग करके तत्वों के बीच नेविगेट कर सकते हैं
  • वर्तमान में केंद्रित तत्व को एक दृश्य हाइलाइट मिलता है
  • उपयोगकर्ता रिमोट पर केंद्र बटन दबाकर केंद्रित तत्वों को सक्रिय कर सकते हैं
  • सिस्टम क्लोज बटन (जब दिखाई दे) भी फोकस नेविगेशन का हिस्सा है

HTML कंटेंट के लिए सर्वोत्तम अभ्यास

Anchor link to

tvOS रिच मीडिया के लिए HTML कंटेंट बनाते समय:

  1. मानक इंटरैक्टिव HTML तत्वों का उपयोग करें: <button>, <a>, <input />
  2. स्पष्ट फोकस संकेत के लिए इंटरैक्टिव तत्वों के बीच पर्याप्त अंतर सुनिश्चित करें
  3. फोकस नेविगेशन को सत्यापित करने के लिए Apple TV सिम्युलेटर के साथ अपने कंटेंट का परीक्षण करें
  4. iOS की तुलना में बड़े टच टारगेट का उपयोग करने पर विचार करें (न्यूनतम 250pt चौड़ाई अनुशंसित है)

संपूर्ण इंटीग्रेशन उदाहरण

Anchor link to

यहां सभी सुविधाओं को दर्शाने वाला एक संपूर्ण उदाहरण है:

import UIKit
import PushwooshTVOS
import PushwooshFramework


@main
class AppDelegate: UIResponder, UIApplicationDelegate {


    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {


        // Configure Pushwoosh
        Pushwoosh.TVoS.setAppCode("XXXXX-XXXXX")


        // Configure rich media appearance
        Pushwoosh.TVoS.configureRichMediaWith(
            position: .center,
            presentAnimation: .fromBottom,
            dismissAnimation: .toTop
        )


        // Show close button (default)
        Pushwoosh.TVoS.configureCloseButton(true)


        // Register for push notifications
        Pushwoosh.TVoS.registerForTvPushNotifications()


        return true
    }


    func application(_ application: UIApplication,
                     didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Pushwoosh.TVoS.registerForTvPushNotifications(withToken: deviceToken) { error in
            if let error = error {
                print("Failed to register: \(error)")
            } else {
                print("Successfully registered")
            }
        }
    }


    func application(_ application: UIApplication,
                     didFailToRegisterForRemoteNotificationsWithError error: Error) {
        Pushwoosh.TVoS.handleTvPushRegistrationFailure(error)
    }


    func application(_ application: UIApplication,
                     didReceiveRemoteNotification userInfo: [AnyHashable: Any],
                     fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {


        if Pushwoosh.TVoS.handleTVOSPush(userInfo: userInfo) {
            completionHandler(.newData)
        } else {
            completionHandler(.noData)
        }
    }
}

समस्या निवारण

Anchor link to

फोकस नेविगेशन समस्याएं

Anchor link to

यदि फोकस नेविगेशन ठीक से काम नहीं कर रहा है:

  1. सत्यापित करें कि आपका HTML कंटेंट मानक इंटरैक्टिव तत्वों (<button>, <a>) का उपयोग करता है
  2. फोकस व्यवहार को सत्यापित करने के लिए Apple TV सिम्युलेटर में परीक्षण करें
  3. सुनिश्चित करें कि इंटरैक्टिव तत्वों का आकार और अंतर पर्याप्त है
  4. जांचें कि आपका HTML/CSS फोकस स्थितियों में हस्तक्षेप नहीं करता है

वास्तविक डिवाइस उदाहरण

Anchor link to

यहां बताया गया है कि रिच मीडिया एक वास्तविक Apple TV डिवाइस पर कैसा दिखता है:

tvOS Rich Media on Apple TV

स्क्रीनशॉट Apple TV पर प्रदर्शित रिच मीडिया कंटेंट को दिखाता है:

  • ग्रेडिएंट पृष्ठभूमि के साथ कस्टम HTML लेआउट
  • Apple TV रिमोट कंट्रोल के लिए अनुकूलित इंटरैक्टिव बटन
  • सभी इंटरैक्टिव तत्वों के लिए फोकस नेविगेशन समर्थन

संदर्भ

Anchor link to