はじめに

NativeScript(NativeScript-Vue) の Application Lifecycle について。

アプリの起動や終了、バックグラウンドへの移動などを検出して処理させることができる。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 共通イベント
      1. NativeScript-Vue の場合
      2. イベント詳細
    2. Android 専用イベント
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-android": {
  "version": "6.4.1"
},
"tns-ios": {
  "version": "6.4.2"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────┐
│ Plugin                        │ Version │
│ @nativescript/theme           │ ^2.2.1  │
│ @vue/devtools                 │ ^5.0.6  │
│ nativescript-socketio         │ ^3.2.1  │
│ nativescript-toasty           │ ^1.3.0  │
│ nativescript-vue              │ ^2.4.0  │
│ nativescript-vue-devtools     │ ^1.2.0  │
│ tns-core-modules              │ ^6.0.0  │
│ vuex                          │ ^3.1.1  │
└───────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

共通イベント

参考: Use Application Events - Application Lifecycle - NativeScript Docs

以下のイベントに対してイベントハンドラの設定が可能。

  • launchEvent: アプリ起動
  • suspendEvent: アプリ中断
  • resumeEvent: アプリ再開
  • displayedEvent: UI 要素の描画完了
  • orientationChangedEvent: デバイス縦横変化検出
  • exitEvent: アプリ終了
  • lowMemoryEvent: メモリ低下
  • uncaughtErrorEvent: エラー発生

どのイベントも tns-core-modules/application を使って application.on で検出。

1
2
const application = require("tns-core-modules/application");
application.on(application.launchEvent, (args) => {});

NativeScript-Vue の場合

NativeScript の場合、公式の例だとイベントハンドラを設定しつつ application.run を実行している。

1
2
3
const application = require("tns-core-modules/application");
application.on(application.launchEvent, (args) => {});
application.run({ moduleName: "app-root" });

NativeScript-Vue の場合、app/main.js で application.on の設定をするだけで良い。(application.run の実行は不要)

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'nativescript-vue'

const application = require("tns-core-modules/application");
application.on(application.launchEvent, (args) => {
  console.log({ on: 'launchEvent', args });
});
// 長いので他イベントは割愛

import App from './components/App'
new Vue({
  render: h => h('frame', [h(App)])
}).$start()

※少し調べてみたところ、/platform/nativescript/runtime/index.js で、new Vue().$start() を実行すると (application.)run が呼ばれるようになっていた。

イベント詳細

launchEvent

アプリ起動時に発火。

Android では機種や OS Version によっては、アプリがバックグラウンドにある状態であっても、スイッチャーからではなくアプリアイコンから起動すると発火する(っぽい)。

1
2
3
4
5
6
7
8
9
10
const application = require("tns-core-modules/application");
application.on(application.launchEvent, (args) => {
    if (args.android) {
        // For Android applications, args.android is an android.content.Intent class.
        console.log("launchEvent: Launched Android application with the following intent: " + args.android + ".");
    } else if (args.ios !== undefined) {
        // For iOS applications, args.ios is NSDictionary (launchOptions).
        console.log("launchEvent: Launched iOS application with options: " + args.ios);
    }
});
suspendEvent

アプリ中断時に発火。ホーム画面の表示、他アプリへの切り替えなどによるバックグラウンドへの移動。

アプリスイッチャーを起動した瞬間に発火する。(例えそのまま復帰したとしても)

1
2
3
4
5
6
7
8
9
10
const application = require("tns-core-modules/application");
application.on(application.suspendEvent, (args) => {
    if (args.android) {
        // For Android applications, args.android is an android activity class.
        console.log("suspendEvent: Activity: " + args.android);
    } else if (args.ios) {
        // For iOS applications, args.ios is UIApplication.
        console.log("suspendEvent: UIApplication: " + args.ios);
    }
});
resumeEvent

アプリ再開時に発火。バックグラウンドからの復帰(フォアグラウンドへの移動)。

「アプリ画面 → スイッチャー → そのままアプリに戻ってくる」でも発火する。

1
2
3
4
5
6
7
8
9
10
const application = require("tns-core-modules/application");
application.on(application.resumeEvent, (args) => {
    if (args.android) {
        // For Android applications, args.android is an android activity class.
        console.log("resumeEvent: Activity: " + args.android);
    } else if (args.ios) {
        // For iOS applications, args.ios is UIApplication.
        console.log("resumeEvent: UIApplication: " + args.ios);
    }
});
displayedEvent

アプリ表示時(UI 要素の描画完了時)に発火。

1
2
3
4
5
const application = require("tns-core-modules/application");
application.on(application.displayedEvent, (args) => {
    // args is of type ApplicationEventData
    console.log("displayedEvent: displayedEvent");
});
orientationChangedEvent

デバイスの縦横変化時に発火

1
2
3
4
5
const application = require("tns-core-modules/application");
application.on(application.orientationChangedEvent, (args) => {
    // args is of type OrientationChangedEventData
    console.log("orientationChangedEvent: " + args.newValue); // "portrait", "landscape", "unknown"
});
exitEvent

アプリ終了時に発火

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const application = require("tns-core-modules/application");
application.on(application.exitEvent, (args) => {
    if (args.android) {
        // For Android applications, args.android is an android activity class.
        console.log("exitEvent: Activity: " + args.android);
        if (args.android.isFinishing()) {
            console.log("exitEvent: Activity: " + args.android + " is exiting");
        } else {
            console.log("exitEvent: Activity: " + args.android + " is restarting");
        }
    } else if (args.ios) {
        // For iOS applications, args.ios is UIApplication.
        console.log("exitEvent: UIApplication: " + args.ios);
    }
});
lowMemoryEvent

メモリ低下時に発火。(他アプリにメモリを食われた時？)

1
2
3
4
5
6
7
8
9
10
const application = require("tns-core-modules/application");
application.on(application.lowMemoryEvent, (args) => {
    if (args.android) {
        // For Android applications, args.android is an android activity class.
        console.log("lowMemoryEvent: Activity: " + args.android);
    } else if (args.ios) {
        // For iOS applications, args.ios is UIApplication.
        console.log("lowMemoryEvent: UIApplication: " + args.ios);
    }
});
uncaughtErrorEvent

エラー発生時に発火。

1
2
3
4
const application = require("tns-core-modules/application");
application.on(application.uncaughtErrorEvent, (args) => {
    console.log("uncaughtErrorEvent: Error: " + args.error);
});

Android 専用イベント

Android 専用イベントもある模様。

参考: Android Activity Events - Application Lifecycle - NativeScript Docs

※触ってないし理解もできてないので参考リンクのみ。触ることがあれば別途まとめる。

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list