이 문서는 WebView에 구현한 버튼을 통해 Android 또는 iOS에서 Feed 지면을 실행시키는 방법을 설명합니다.

개요

아래 가이드의 준비와 같이 Web에 버튼을 구현한 후, Android 에서 구현 혹은 iOS 에서 구현 가이드를 참조하여 각각의 플랫폼에서 Feed 지면을 표시하는 방법을 설명합니다.

준비

우선 WebView에서 Feed 지면을 표시하기 위한 버튼을 구현합니다.

<html>
<head>    
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>    
  <title>TEST</title>
</head>
<body>    
  <input type='button' onClick='showFeed()' value='show feed' />    
  <script type='text/javascript'>        
    const showFeed = () => {            
      var userAgent = navigator.userAgent;
      if (/android/i.test(userAgent)) {
        BuzzAdBenefitJSBridge.showFeed()            
      }
      if (/iPad|iPhone|iPod/.test(userAgent)) {                
        webkit.messageHandlers.BuzzAdBenefitJSBridge.postMessage('showFeed')            
      }        
    }    
  </script>
</body>
</html>

Android 에서 구현

Step 1. interface 정의

public interface BuzzAdBenefitJSBridge {
    void showFeed();
}

Step 2. JavascriptInterface 추가 및 showFeed 구현

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.buzzvil.buzzad.benefit.presentation.feed.BuzzAdFeed

public class WebToFeedActivity extends AppCompatActivity implements BuzzAdBenefitJSBridge {    
  
  private WebView webView;
  
  @Override    
  protected void onCreate(@Nullable Bundle savedInstanceState) {        
    super.onCreate(savedInstanceState);        
    setContentView(R.layout.your_activity_web_to_feed);        
    webView = findViewById(R.id.your_web_view);        
    webView.getSettings().setJavaScriptEnabled(true);        
    webView.getSettings().setUseWideViewPort(true);        
    webView.addJavascriptInterface(this, "BuzzAdBenefitJSBridge");        
    webView.loadUrl("YOUR_URL");    
  }
    
  @Override
  @JavascriptInterface
  public void showFeed() {
      new Handler().post(new Runnable() {
          @Override
          public void run() {
              new BuzzAdFeed.Builder().build().show(WebToFeedActivity.this);
          }
      });
  }
}

위 예제가 구현된 샘플앱은 아래 링크에서 확인할 수 있습니다.
https://github.com/Buzzvil/buzz-sdk-samples/tree/master/buzzad-benefit

iOS 에서 구현

Objective-C

Step 1. interface 정의

@import UIKit;

NS_ASSUME_NONNULL_BEGIN

@interface WebToFeedViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

Step 2. ScriptMessageHandler 추가 및 showFeed 메시지 처리 로직 구현

#import "WebToFeedViewController.h"

@import WebKit;
@import BuzzAdBenefit;

@interface WebToFeedViewController () <WKScriptMessageHandler>

@property (strong, nonatomic, readwrite) WKWebView *webView;

@end

@implementation WebToFeedViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  WKUserContentController *contentController = [[WKUserContentController alloc] init];
  [contentController addScriptMessageHandler:self name:@"BuzzAdBenefitJSBridge"];
  config.userContentController = contentController;

  _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
  NSURL *url = [NSURL URLWithString:@"YOUR_URL"];
  NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
  [_webView loadRequest:urlRequest];
  [self.view addSubview:_webView];
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  if ([message.body isEqualToString:@"showFeed"]) {
    // Show Feed
    BZVBuzzAdFeed *buzzAdFeed = [BZVBuzzAdFeed feedWithBlock:^(BZVBuzzAdFeedBuilder * _Nonnull builder) {
      builder.config = [BZVFeedConfig configWithBlock:^(BZVFeedConfigBuilder * _Nonnull builder) {
        builder.unitId = @"YOUR_FEED_UNIT_ID";
      }];
    }];

    BZVFeedViewController *feedViewController = [buzzAdFeed viewController];
    [self presentViewController:feedViewController animated:YES completion:nil];
  }
}

@end

위 예제가 구현된 샘플앱은 아래 링크에서 확인할 수 있습니다.
https://github.com/Buzzvil/buzz-sdk-samples/tree/master/buzzad-benefit-ios

Swift [WIP]

import UIKit
import WebKit
import BuzzAdBenefit

class WebToFeedViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let contentController = WKUserContentController()
        contentController.add(self, name: "BuzzAdBenefitJSBridge")
        config.userContentController = contentController

        webView = WKWebView(frame: view.bounds, configuration: config)
        if let url = URL(string: "YOUR_URL") {
            let urlRequest = URLRequest(url: url)
            webView.load(urlRequest)
        }
        view.addSubview(webView)
    }
  }
}

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if let body = message.body as? String, body == "showFeed" {
            let buzzAdFeed = BZVBuzzAdFeed { builder in
                builder.config = BZVFeedConfig { builder in
                    builder.unitId = "YOUR_FEED_UNIT_ID"
                }
            }
            
            let feedViewController = buzzAdFeed.viewController
            present(feedViewController, animated: true, completion: nil)
        }
    }
}

Buzzvil Developer Guides

WebView로 BuzzAd-Benefit SDK 피드(Feed) 엔트리포인트 연동하기

개요

준비

Android 에서 구현

iOS 에서 구현

Objective-C

Swift [WIP]

Related content