> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notification Content Extension が実装されていない場合に iOS プッシュ通知（SDK バージョン 8.x.x）でプッシュテンプレートの問題を回避するには

> MoEngage プロジェクトに Notification Content Extension を実装して、SDK 8.x.x での iOS プッシュテンプレートの問題（カルーセル、色、フォント）を修正します。

## 問題

Notification Content Extension が実装されていない場合、プッシュテンプレート（カルーセル画像、背景色、フォントの色など）がプッシュ通知で正しく表示されません。

## 手順

次の手順を実行します。

1. Notification Content Extension ターゲットを作成します。

<img src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_381db3.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=0fc985fa38de6280a616e4781a1dc461" alt="NCE.png" width="1454" height="1040" data-path="images/moengage_381db3.png" />

* *Extension ターゲットに名前を付けます。* Extension ターゲットの名前を選択します。**Swift** は Objective-C プロジェクトでもシームレスに動作するため、言語として推奨されます。
  <img alt="name swift.png" src="https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6dbf7c.png?fit=max&auto=format&n=S2vOz7ciYYqlhjCf&q=85&s=5e245224750574529387283b1b1bb8b9" width="1412" height="1016" data-path="images/moengage_6dbf7c.png" />
* Notification Content Extension の **Signing & Capabilities** 設定に **AppGroupId** を追加します。 <img alt="signing.png" src="https://mintcdn.com/moengage/xaH8HoR16_YVDek5/images/moengage_cfae58.png?fit=max&auto=format&n=xaH8HoR16_YVDek5&q=85&s=a3527f3f3816071f7c615e0d337905a5" width="2560" height="836" data-path="images/moengage_cfae58.png" />
* Notification Content Extension の最小デプロイ iOS バージョンをメインアプリの iOS バージョンに合わせて設定します。
  <img alt="deployment.png" src="https://mintcdn.com/moengage/QVZKszouQuxXOzFr/images/moengage_1c1516.png?fit=max&auto=format&n=QVZKszouQuxXOzFr&q=85&s=c9223e4932dd28965fc3450a6b46a0ae" width="1920" height="455" data-path="images/moengage_1c1516.png" />

2. *MORichNotification フレームワークを Notification Content Extension ターゲットに統合します。*
   * podfile で Notification Content Extension を別のターゲットとして追加し、**MORichNotification** フレームワークをインストールします。
     ```swift Swift theme={null}
     target 'MoEngageDemo' do
       use_frameworks!
       pod 'MoEngage-iOS-SDK'
     end
     target 'MoEngageNotificationService' do
       use_frameworks! #use use_frameworks only if included in main target as in above scenario
       pod 'MoEngageRichNotification'
     end
     target 'MoegageRichContent" do
       use_frameworks! #use use_frameworks only if included in main target as in above scenario
       pod 'MoEngageRichNotification'
     end
     ```
3. **NotificationViewController.swift** ファイルのコード変更。
   ```swift Swift theme={null}
   import UIKit
   import UserNotifications
   import UserNotificationsUI
   import MoEngageRichNotification
   class NotificationViewController: UIViewController, UNNotificationContentExtension {
       @IBOutlet var label: UILabel?
       
       override func viewDidLoad() {
           super.viewDidLoad()
           MORichNotification.setAppGroupID("group.com.XXXXXXXXXXXXXXXX")
       }
       
       func didReceive(_ notification: UNNotification) {
           if #available(iOSApplicationExtension 12.0, *) {
               MORichNotification.addPushTemplate(toController: self, withNotification: notification) 
           } else {
               // Fallback on earlier versions
           }
       }
   }
   ```
4. Content Extension で **MainInterface.storyboard** を選択し、デフォルトのラベルを削除して、View の背景色を透明（clear）に設定します。
   <img alt="main.png" src="https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6c5271.png?fit=max&auto=format&n=S2vOz7ciYYqlhjCf&q=85&s=34b36b88e76bcafd3a7e0d5a3d1a2165" width="3360" height="1646" data-path="images/moengage_6c5271.png" />
5. Info.plist の変更：
   ```swift Swift theme={null}
   <key>NSExtensionAttributes</key> 
   <dict>
         <key>UNNotificationExtensionCategory</key>
         <string>MOE_PUSH_TEMPLATE</string>
         <key>UNNotificationExtensionDefaultContentHidden</key>
         <true/>
         <key>UNNotificationExtensionInitialContentSizeRatio</key>
         <real>1.2</real>
         <key>UNNotificationExtensionUserInteractionEnabled</key>
         <true/>
   </dict>
   ```
   <img src="https://mintcdn.com/moengage/431DqtwGIOyvyx6H/images/moengage_8c6d4d.png?fit=max&auto=format&n=431DqtwGIOyvyx6H&q=85&s=e6fe9803d52a0fadb808a7b73fd900ec" alt="NSExtension.png" width="1948" height="786" data-path="images/moengage_8c6d4d.png" />
6. *メインアプリターゲットの Build Phases を確認します。*
   * Embed App Extensions/Embed Foundation Extensions で、**Copy only when installing** が選択されていないことを確認します。
     <img alt="copy only.png" src="https://mintcdn.com/moengage/8EX_gHAg3q4zA1kw/images/moengage_241f44.png?fit=max&auto=format&n=8EX_gHAg3q4zA1kw&q=85&s=d2aab1d20a5d0fe6004b9d5ae33d8a79" width="2740" height="930" data-path="images/moengage_241f44.png" />
7. *構成間で appGroupId を統一します。*
   * プロジェクト内のすべてのスキームと構成（例：Debug/Release/QA/UAT）で **appGroupId** が一致していることを確認します。
8. *ビルド構成を揃えます。*

   * プロジェクトを実行またはアーカイブする際は、メインターゲット、Notification Service Extension、Notification Content Extension ターゲットの Build Configuration が同じスキーム/構成を指していることを確認します。
     <img src="https://mintcdn.com/moengage/wIFGWsQFEjsz2j4v/images/moengage_e1336f.png?fit=max&auto=format&n=wIFGWsQFEjsz2j4v&q=85&s=207b9b83a0aefc0eddef82b846173bce" alt="debug.png" width="1750" height="556" data-path="images/moengage_e1336f.png" />

   <img src="https://mintcdn.com/moengage/B1ZqBU-ISgaoSx_O/images/moengage_585502.png?fit=max&auto=format&n=B1ZqBU-ISgaoSx_O&q=85&s=04f1c8f7eed31ca9065b7a076e503e2d" alt="target.png" width="1832" height="446" data-path="images/moengage_585502.png" />

   <img src="https://mintcdn.com/moengage/eF2J43N9Ckga5Apm/images/moengage_2f8b4e.png?fit=max&auto=format&n=eF2J43N9Ckga5Apm&q=85&s=28643713cc01798320f29dfacf13201c" alt="duplicate.png" width="1826" height="976" data-path="images/moengage_2f8b4e.png" />
