Skip to content
This repository has been archived by the owner on Apr 1, 2024. It is now read-only.

NIFCLOUD-mbaas/SwiftRichPushApp

BranchesTags
 
 

Repository files navigation

【Swift】
プッシュ通知受信時にWebViewを表示しよう(リッチプッシュ)

2016/10/26作成（2023/09更新）

画像1

概要

  • ニフクラmobile backendの『プッシュ通知』機能において、プッシュ通知にURLを設定し配信できる『リッチプッシュ』機能を実装したサンプルプロジェクトです
  • リッチプッシュ機能を使うと、プッシュ通知にURLを設定し配信を行った場合、ユーザープッシュ通知を開封する際にWebViewとして表示することが可能です
  • 簡単な操作ですぐに ニフクラmobile backendの機能を体験いただけます★☆
  • このサンプルはSwift5（iOS13以降）に対応しています

ニフクラmobile backendって何？？

スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！

注1：詳しくはこちらをご覧ください

画像2

動作環境

  • Mac OS 13.4.1 (Venture)
  • Xcode Version 15.0
  • iPhone SE (iOS 17)
    • このサンプルアプリは、プッシュ通知を受信する必要があるため実機ビルドが必要です

※上記内容で動作確認をしています

プッシュ通知の仕組み

  • ニフクラ mobile backendのプッシュ通知は、iOSが提供している通知サービスを利用しています
  • iOSの通知サービス　APNs（Apple Push Notification Service）

画像10

  • 上図のように、アプリ（Xcode）・サーバー（ニフクラmobile backend）・通知サービス（APNs）の間でやり取りを行うため、認証が必要になります
  • 認証に必要な鍵や証明書の作成は作業手順の「0.プッシュ通知機能使うための準備」で行います

作業の手順

0.プッシュ通知機能使うための準備

【iOS】プッシュ通知の受信に必要な証明書の作り方(開発用)

  • 上記のドキュメントをご覧の上、必要な証明書類の作成をお願いします
  • 証明書の作成にはApple Developer Programの登録（有料）が必要です

画像i002

1. ニフクラmobile backendの会員登録とログイン→アプリ作成と設定

  • 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

画像3

  • アプリ作成されると下図のような画面になります
  • この２種類のAPIキー（アプリケーションキーとクライアントキー）はXcodeで作成するiOSアプリにニフクラmobile backendを紐付けるために使用します

画像4

  • 続けてプッシュ通知の設定を行います
  • ここで⑦APNs用証明書(.p12)の設定も行います

画像5

2. GitHubからサンプルプロジェクトをダウンロード

  • 下記リンクをブラウザで実行してプロジェクトをMacにダウンロードします
  • https://github.com/NIFCLOUD-mbaas/SwiftRichPushApp/archive/master.zip

3. Xcodeでアプリを起動

  • ダウンロードしたフォルダを開き、「SwiftRichPushApp.xcworkspace」をダブルクリックしてXcode開きます(白い方です)

画像09 画像06

  • 「SwiftRichPushApp.xcodeproj」（青い方）ではないので注意してください！

画像08

4. APIキーの設定

  • AppDelegate.swiftを編集します
  • 先程ニフクラmobile backendのダッシュボード上で確認したAPIキーを貼り付けます

画像07

  • それぞれYOUR_NCMB_APPLICATION_KEYとYOUR_NCMB_CLIENT_KEYの部分を書き換えます
  • このとき、ダブルクォーテーション（"）を消さないように注意してください！
  • 書き換え終わったらcommand + sキーで保存をします

5. 実機ビルド

  • 始めて実機ビルドをする場合は、Xcodeにアカウント（AppleID）の登録をします
  • メニューバーの「Xcode」＞「Preferences...」を選択します
  • Accounts画面が開いたら、左下の「＋」をクリックします。
  • Apple IDとPasswordを入力して、「Add」をクリックします

画像i29

  • 追加されると、下図のようになります。追加した情報があっていればOKです
  • 確認できたら閉じます。

画像i30

  • 次に「TARGETS」 ＞「General」を開きます
  • 「Idenrity」＞「Bundle Identifier」を入力します
    • AppID 作成時に指定した「Bundle ID」を入力してください

画像20

  • 次に「TARGETS」 ＞「Signing & Capabilities」を開きます
  • 「Teame」を選択します
    • 先ほど「Preferences」で設定したアカウント情報を選択します
    • 「Bundle Identifier」に応じて正しい「Provisioning Profile」が選択されればOKです
    • 正しく読み込まれない場合は、ダウンロードしたプロビジョニングプロファイルを一度 ダブルクリック して読み込んだ後リトライしてください

画像21

  • 上記画像の下方に表示されている「Push Notifications」はプッシュ通知を利用するために必要な設定です
    • このサンプルでは予め設定してあります
    • 上方「+Capability」から追加できます
  • 設定は完了です
  • lightningケーブルで登録した動作確認用iPhoneをMacにつなぎます
  • Xcode画面で左上で、接続したiPhoneを選び、実行ボタン（さんかくの再生マーク）をクリックします

6.動作確認

  • インストールしたアプリを起動します
  • プッシュ通知の許可を求めるアラートが出たら、必ず許可してください！
  • 起動されたらこの時点でデバイストークンが取得されます
  • ニフクラmobile backendのダッシュボードで「データストア」＞「installation」クラスを確認してみましょう！

画像12

7.リッチプッシュを送ってWebViewを表示させましょう

  • 動作確認のため、アプリを完全に閉じておきましょう
  • ニフクラmobile backendのダッシュボードで「プッシュ通知」＞「＋新しいプッシュ通知」をクリックします
  • プッシュ通知のフォームが開かれます
  • タイトル、メッセージ、URL を入力してプッシュ通知を作成します

画像11

  • 端末を確認しましょう！
  • アプリの状態により、WebView（リッチプッシュ）の表示のされ方は以下のようになります

アプリが起動していないときプッシュ通知を受信した場合

  • アプリを 完全に閉じた状態 でプッシュ通知を送った場合は、プッシュ通知が受信されます
  • 受信したプッシュ通知をタップするとWebViewが画面に表示されます
  • 画面下の「Close」をタップするとWebViewが閉じ、裏で起動していたアプリが表示されます
  • リッチプッシュによって表示されるWebViewは一度い閉じると再表示できません。

画像1

アプリが起動しているときプッシュ通知を受信した場合

  • アプリを起動している（画面に表示中/バックグラウンド起動中）状態でプッシュ通知を送った場合は、プッシュ通知自体は 表示されません ！（iOSの仕様）ただし、プッシュ通知が受信できていないわけではなく、正しく配信されていれば、WebViewが画面に表示されます

解説

SDKのインポートと初期設定

コード紹介

デバイストークン取得とニフクラmobile backendへの保存

  • AppDelegate.swiftのdidFinishLaunchingWithOptionsメソッドにAPNsに対してデバイストークンの要求するコードを記述し、デバイストークンが取得された後に呼び出されるdidRegisterForRemoteNotificationsWithDeviceTokenメソッドを追記をします
  • デバイストークンの要求はiOSのバージョンによってコードが異なります
//
//  AppDelegate.swift
//  SwiftRichPushApp
//
//  Created by Ikeda Natsumo on 2016/12/08 (update on 2020/03/23).
//  Copyright 2020 FUJITSU CLOUD TECHNOLOGIES LIMITED All Rights Reserved.
//

import UIKit
import NCMB
import UserNotifications

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate {

    var window: UIWindow?

    // APIキーの設定
    let applicationkey = "YOUR_NCMB_APPLICATIONKEY"
    let clientkey      = "YOUR_NCMB_CLIENTKEY"

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        // SDKの初期化
        NCMB.initialize(applicationKey: applicationkey, clientKey: clientkey)

        // Register notification
        registerForPushNotifications()

        // MARK: アプリが起動されるときに実行される処理を追記する場所
        if let notification = launchOptions?[.remoteNotification] as? [String: AnyObject] {
            NCMBPush.handleRichPush(userInfo: notification)
        }

        return true
    }

    // デバイストークンが取得されたら呼び出されるメソッド
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        let tokenParts = deviceToken.map { data in String(format: "%02.2hhx", data) }
        let token = tokenParts.joined()
        print("Device Token: \(token)")

        let installation = NCMBInstallation()
        installation.setDeviceTokenFromData(data: deviceToken)
        installation.saveInBackground { (error) in

        }
    }


    func application(
        _ application: UIApplication,
        didFailToRegisterForRemoteNotificationsWithError error: Error) {
        print("Failed to register: \(error)")
    }

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

        if let notiData = userInfo as? [String : AnyObject] {
            NCMBPush.handleRichPush(userInfo: notiData)
        }
    }

    func registerForPushNotifications() {
        UNUserNotificationCenter.current() // 1
            .requestAuthorization(options: [.alert, .sound, .badge]) { // 2
                granted, error in
                print("Permission granted: \(granted)") // 3
                guard granted else { return }
                self.getNotificationSettings()
        }
    }

    func getNotificationSettings() {
        UNUserNotificationCenter.current().getNotificationSettings { settings in
            print("Notification settings: \(settings)")
            guard settings.authorizationStatus == .authorized else { return }
            DispatchQueue.main.async {
                UIApplication.shared.registerForRemoteNotifications()
            }

        }
    }

}

リッチプッシュの取得

アプリが起動されるときプッシュ通知を開封する場合
  • アプリが起動されるときプッシュ通知を開封するる場合の処理は、didFinishLaunchingWithOptionsメソッド内に記述します
// MARK: アプリが起動されるときに実行される処理を追記する場所
if let userInfo = launchOptions?[UIApplicationLaunchOptionsKey.remoteNotification] as! [AnyHashable : Any]! {
    // リッチプッシュを表示させる処理
    NCMBPush.handleRichPush(userInfo)
}

iOS9以上におけるhttp通信設定

iOS9以降の端末ではhttps通信でないとリッチプッシュのWebViewで画像を表示することができません。そのためhttps通信の許可設定をする必要があります。

  • Info.plistに下記を追記します

画像18

  • コードの場合は以下のように設定します
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

9 watching

Forks

4 forks
Report repository

Releases 1

v1.0.0 Latest
May 28, 2020

Packages

No packages published

Languages

  • Swift 93.1%
  • Ruby 6.9%