Skip to content

Commit 1d1c42f

Browse files
triniwiztriniwiz
committed
chore: update vue demo
1 parent b95d56c commit 1d1c42f

File tree

4 files changed

+235
-81
lines changed

4 files changed

+235
-81
lines changed

‎apps/demo-vue/app/app.ts

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ dynamicLinks.onLink((link) => {
4343
console.log('onLink', link);
4444
});
4545

46-
const messaging = firebase().messaging();
47-
4846
Application.on('launch', (args) => {
47+
const messaging = firebase().messaging();
48+
4949
messaging.onMessage((message) => {
5050
console.log('Firebase onMessage', message);
5151
});
@@ -59,37 +59,6 @@ Application.on('launch', (args) => {
5959
});
6060
});
6161

62-
if (global.isIOS) {
63-
messaging
64-
.requestPermission()
65-
.then(() => {
66-
console.log('requestPermission', 'done');
67-
messaging.registerDeviceForRemoteMessages().catch((e) => {
68-
console.error('registerDeviceForRemoteMessages', e);
69-
});
70-
})
71-
.catch((e) => {
72-
console.error('requestPermission', e);
73-
});
74-
}
75-
7662
new Vue({
7763
render: (h) => h('frame', [h(Home)]),
78-
mounted() {
79-
firebase()
80-
.messaging()
81-
.requestPermission()
82-
.then(() => {
83-
console.log('requestPermission', 'done');
84-
firebase()
85-
.messaging()
86-
.registerDeviceForRemoteMessages()
87-
.catch((e) => {
88-
console.error('registerDeviceForRemoteMessages', e);
89-
});
90-
})
91-
.catch((e) => {
92-
console.error('requestPermission', e);
93-
});
94-
},
9564
}).$start();

‎apps/demo-vue/app/components/Home.vue

Lines changed: 188 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,198 @@
11
<template>
2-
<Page>
3-
<ActionBar>
4-
<Label text="Home"/>
5-
</ActionBar>
2+
<Page>
3+
<ActionBar>
4+
<Label text="Home" />
5+
</ActionBar>
66

7-
<GridLayout>
8-
<Label class="info" :text="message"/>
9-
</GridLayout>
10-
</Page>
7+
<GridLayout>
8+
<ListView for="item in demos" @itemTap="navigate">
9+
<v-template>
10+
<GridLayout class="p-y-10">
11+
<Label :text="item.name"></Label>
12+
</GridLayout>
13+
</v-template>
14+
</ListView>
15+
</GridLayout>
16+
</Page>
1117
</template>
1218

1319
<script lang="ts">
14-
import Vue from "nativescript-vue";
20+
import Vue from 'nativescript-vue';
21+
import Admob from '../plugin-demos/firebase-admob.vue';
22+
import Analytics from '../plugin-demos/firebase-analytics.vue';
23+
import AppCheck from '../plugin-demos/firebase-app-check.vue';
24+
import AppCheckDebug from '../plugin-demos/firebase-app-check-debug.vue';
25+
import Auth from '../plugin-demos/firebase-auth.vue';
26+
import Core from '../plugin-demos/firebase-core.vue';
27+
import Crashlytics from '../plugin-demos/firebase-crashlytics.vue';
28+
import Database from '../plugin-demos/firebase-database.vue';
29+
import DynamicLinks from '../plugin-demos/firebase-dynamic-links.vue';
30+
import FireStore from '../plugin-demos/firebase-firestore.vue';
31+
import Functions from '../plugin-demos/firebase-functions.vue';
32+
import InAppMessaging from '../plugin-demos/firebase-in-app-messaging.vue';
33+
import Installations from '../plugin-demos/firebase-installations.vue';
34+
import MessagingCore from '../plugin-demos/firebase-messaging-core.vue';
35+
import Messaging from '../plugin-demos/firebase-messaging.vue';
36+
import Performance from '../plugin-demos/firebase-performance.vue';
37+
import RemoteConfig from '../plugin-demos/firebase-remote-config.vue';
38+
import Storage from '../plugin-demos/firebase-storage.vue';
1539
16-
export default Vue.extend({
17-
computed: {
18-
message() {
19-
return "Demo {N}-Vue app";
20-
}
21-
}
22-
});
40+
const routes = [
41+
{
42+
name: 'firebase-admob',
43+
detail: Admob,
44+
},
45+
{
46+
name: 'firebase-analytics',
47+
detail: Analytics,
48+
},
49+
{
50+
name: 'firebase-app-check',
51+
detail: AppCheck,
52+
},
53+
{
54+
name: 'firebase-app-check-debug',
55+
detail: AppCheckDebug,
56+
},
57+
{
58+
name: 'firebase-auth',
59+
detail: Auth,
60+
},
61+
{
62+
name: 'firebase-core',
63+
detail: Core,
64+
},
65+
{
66+
name: 'firebase-crashlytics',
67+
detail: Crashlytics,
68+
},
69+
{
70+
name: 'firebase-database',
71+
detail: Database,
72+
},
73+
{
74+
name: 'firebase-dynamic-links',
75+
detail: DynamicLinks,
76+
},
77+
{
78+
name: 'firebase-firestore',
79+
detail: FireStore,
80+
},
81+
{
82+
name: 'firebase-functions',
83+
detail: Functions,
84+
},
85+
{
86+
name: 'firebase-in-app-messaging',
87+
detail: InAppMessaging,
88+
},
89+
{
90+
name: 'firebase-installations',
91+
detail: Installations,
92+
},
93+
{
94+
name: 'firebase-messaging',
95+
detail: Messaging,
96+
},
97+
{
98+
name: 'firebase-messaging-core',
99+
detail: MessagingCore,
100+
},
101+
{
102+
name: 'firebase-performance',
103+
detail: Performance,
104+
},
105+
{
106+
name: 'firebase-remote-config',
107+
detail: RemoteConfig,
108+
},
109+
{
110+
name: 'firebase-storage',
111+
detail: Storage,
112+
},
113+
];
114+
export default Vue.extend({
115+
methods: {
116+
navigate(args) {
117+
const link = args.item.name;
118+
const route = routes.find((item) => {
119+
return item.name === link;
120+
});
121+
if (route) {
122+
this.$navigateTo(route.detail);
123+
}
124+
},
125+
},
126+
computed: {
127+
message() {
128+
return 'Demo {N}-Vue app';
129+
},
130+
demos() {
131+
return [
132+
{
133+
name: 'firebase-admob',
134+
},
135+
{
136+
name: 'firebase-analytics',
137+
},
138+
{
139+
name: 'firebase-app-check',
140+
},
141+
{
142+
name: 'firebase-app-check-debug',
143+
},
144+
{
145+
name: 'firebase-auth',
146+
},
147+
{
148+
name: 'firebase-core',
149+
},
150+
{
151+
name: 'firebase-crashlytics',
152+
},
153+
{
154+
name: 'firebase-database',
155+
},
156+
{
157+
name: 'firebase-dynamic-links',
158+
},
159+
{
160+
name: 'firebase-firestore',
161+
},
162+
{
163+
name: 'firebase-functions',
164+
},
165+
{
166+
name: 'firebase-in-app-messaging',
167+
},
168+
{
169+
name: 'firebase-installations',
170+
},
171+
{
172+
name: 'firebase-messaging',
173+
},
174+
{
175+
name: 'firebase-messaging-core',
176+
},
177+
{
178+
name: 'firebase-performance',
179+
},
180+
{
181+
name: 'firebase-remote-config',
182+
},
183+
{
184+
name: 'firebase-storage',
185+
},
186+
];
187+
},
188+
},
189+
});
23190
</script>
24191

25192
<style scoped lang="scss">
26-
27-
.info {
28-
font-size: 20;
29-
horizontal-align: center;
30-
vertical-align: center;
31-
}
193+
.info {
194+
font-size: 20;
195+
horizontal-align: center;
196+
vertical-align: center;
197+
}
32198
</style>

‎apps/demo-vue/app/plugin-demos/firebase-messaging.vue

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,51 @@
11
<template>
2-
<Page>
3-
<ActionBar>
4-
<Label text="firebase-messaging"/>
5-
</ActionBar>
2+
<Page>
3+
<ActionBar>
4+
<Label text="firebase-messaging" />
5+
</ActionBar>
66

7-
<GridLayout>
8-
<Button class="info" :text="message"/>
9-
</GridLayout>
10-
</Page>
7+
<GridLayout>
8+
<Button class="info" @tap="requestPermission" :text="message" />
9+
</GridLayout>
10+
</Page>
1111
</template>
1212

1313
<script lang="ts">
14-
import Vue from "nativescript-vue";
15-
import { DemoSharedFirebaseMessaging } from '@demo/shared';
16-
import { } from '@nativescript/firebase-messaging';
14+
import Vue from 'nativescript-vue';
15+
import { firebase } from '@nativescript/firebase-core';
16+
import '@nativescript/firebase-messaging';
17+
import { Messaging } from '@nativescript/firebase-messaging';
1718
18-
export default Vue.extend({
19-
computed: {
20-
message() {
21-
return "Test firebase-messaging";
22-
}
23-
}
24-
});
19+
export default Vue.extend({
20+
methods: {
21+
requestPermission: function (args) {
22+
const messaging = (firebase() as any).messaging() as Messaging;
23+
console.log('requestPermission');
24+
messaging
25+
.requestPermission()
26+
.then(() => {
27+
console.log('requestPermission', 'done');
28+
messaging.registerDeviceForRemoteMessages().catch((e) => {
29+
console.error('registerDeviceForRemoteMessages', e);
30+
});
31+
})
32+
.catch((e) => {
33+
console.error('requestPermission', e);
34+
});
35+
},
36+
},
37+
computed: {
38+
message() {
39+
return 'Request Permission';
40+
},
41+
},
42+
});
2543
</script>
2644

2745
<style scoped lang="scss">
28-
29-
.info {
30-
font-size: 20;
31-
horizontal-align: center;
32-
vertical-align: center;
33-
}
46+
.info {
47+
font-size: 20;
48+
horizontal-align: center;
49+
vertical-align: center;
50+
}
3451
</style>

‎apps/demo-vue/project.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"ios": {
2323
"executor": "@nativescript/nx:build",
2424
"options": {
25-
"platform": "ios"
25+
"platform": "ios",
26+
"noHmr": true
2627
},
2728
"dependsOn": [
2829
{
@@ -34,7 +35,8 @@
3435
"android": {
3536
"executor": "@nativescript/nx:build",
3637
"options": {
37-
"platform": "android"
38+
"platform": "android",
39+
"noHmr": true
3840
},
3941
"dependsOn": [
4042
{

0 commit comments

Comments
 (0)