Help us understand the problem. What is going on with this article?

ReactNativeを利用したOTAの仕組みについて

More than 1 year has passed since last update.

Retty Advent Calendar 2018 8日目の記事です。

はじめまして。本日は@PONTA-N がお送りします。
最近はスクラムについて話したりKotlinの勉強会と称して脱いでいたりしていますが、本業はエンジニアであり開発もしているんだぞという事をお話をさせていただきます。

RettyのiOSアプリについて

実はRettyのiOS版アプリでは一部の画面でReactNatvieを利用しています。
主にここ半年の間に新しく実装されたリコメンド機能で使われています。

スクリーンショット 2018-12-08 14.45.03.png

なぜReactNativeを使っているのか?

新しい施策の場合、ユーザーのリアクションを見てボタンの色や文言など簡単なものは今すぐにでも改善しユーザーの元へ届けたいというお気持ちがあります。
しかしiOSアプリの場合はAppleに申請を行い、審査を待ってリリースするという手順を踏む必要がある為、実装してからユーザーの手元に届くまでに数日のラグがあります。
細かい変更の為に高頻度で申請していくのは時間が掛かりすぎてしまいあまり現実的ではありません。
そこでOTA(OverTheAir)の仕組みを取り入れるためにReactNativeを利用する事にしました。

OTAの仕組み

スクリーンショット 2018-12-08 15.59.34.png

AWS S3にjsbundle及びメタデータをアップロードをしており、それをクライアント側で取得する事で実現しました。

メタデータはアプリのバージョンやビルドバージョンなどが記述されています。
クライアント側では起動時にメタデータの中身を比較して最新のものだった場合にjsbundleをダウンロードして更新するようにしています。

導入した事で発生した問題

後方互換の問題

ReactNative側のコードは常に最新のものにアップデートされる為、過去のアプリバージョンではネイティブ側にメソッドが存在しなかったり、ネイティブ側からコンポーネントに渡しているプロパティに齟齬があった場合はクラッシュするなどのバグが発生していました。

対応方法

ネイティブのメソッドを利用する時にはguardする

新しいバージョンで実装したネイティブ側のメソッドをReactNative側で呼び出す実装を行った場合、過去のアプリバージョンにてReactNative側のコードがアップデートされてしまった時に、ネイティブ側にメソッドが存在しない為TypeErrorが発生してしまいます。
なので基本的にネイティブ側のメソッドを使う場合は、存在チェックを行い早期リターンをするなどしてメソッドが存在しなくても動く実装にしました。

バージョン毎に分岐するコードを入れる

基本的には上記の実装にて対応をしていますが、それだけではどうしても対応できない場合はアプリバージョンを比較してコードを出し分けるようにしました。
これを多用してしまうとコードが巨大化してしまう為あまり使わないようにしています。

後方互換は2バージョンまでにする

上記の対応で後方互換対応ができましたが、アップデートを重ねる度に考慮しなければいけない事が増えていきます。
そこでS3側に最新のjsbundleがアップロードされていても、2バージョン以上離れている場合には更新しない対応をいれました。

2バージョン分であれば対応する範囲が狭まりますし、人の手で最終チェックができる量となりました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away