Skip to content

Commit 1e856ec

Browse files
NathanWalkerNathanWalker
authored
feat(ionic-portals): pub/sub for communication (#275)
1 parent ca9e56a commit 1e856ec

File tree

12 files changed

+559
-140
lines changed

12 files changed

+559
-140
lines changed

‎apps/demo/src/app.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ import { Application } from '@nativescript/core';
1717
// Application.on(Application.launchEvent, () => {
1818
// // Register IonicPortals
1919
// IonicPortalManager.register('<portal-api-key>');
20-
21-
// // Create as many Portals as you need to use in your app
22-
// IonicPortalManager.create('ionicWebPortalSample');
2320
// });
2421

2522
Application.run({ moduleName: 'app-root' });

‎packages/ionic-portals/README.md

Lines changed: 82 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,35 @@ npm install @nativescript/ionic-portals
1010

1111
## Usage
1212

13-
1. Register and create portals on app boot - [Get a Portal API Key here](https://ionic.io/docs/portals/getting-started/guide):
13+
### 1. Register portals on app boot
14+
15+
[Get a Portal API Key here](https://ionic.io/docs/portals/getting-started/guide):
1416

1517
```ts
1618
import { Application } from '@nativescript/core';
1719
import { IonicPortalManager } from '@nativescript/ionic-portals';
1820

1921
Application.on(Application.launchEvent, () => {
20-
// Register IonicPortals
21-
IonicPortalManager.register('<portal-api-key>');
22-
23-
// Create as many Portals as you need to use in your app
24-
// By default, the app will look for folders equal to the portal id you use here
25-
// For iOS: App_Resources/iOS/webPortal
26-
// For Android: App_Resources/Android/src/main/asssets/webPortal
27-
IonicPortalManager.create('webPortal');
22+
// Register IonicPortals
23+
IonicPortalManager.register('<portal-api-key>');
2824
});
2925

3026
// boot app here, for example:
3127
Application.run({ moduleName: 'app-root' });
3228
```
3329

34-
2. Use in your views
30+
Create as many Portals as you need to use in your app.
31+
32+
The app will look for folders within it's resources where the folder name is equal to the portal `id` you use to define each portal.
33+
34+
Given the following examples, ensure your web portal is built into the following folders:
35+
36+
* For iOS: `App_Resources/iOS/webPortal`
37+
* For Android: `App_Resources/Android/src/main/asssets/webPortal`
38+
39+
### 2. Use in your views
3540

36-
### Vanilla/Plain/Core
41+
#### Vanilla/Plain/Core
3742

3843
```xml
3944
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
@@ -45,35 +50,91 @@ Application.run({ moduleName: 'app-root' });
4550
</Page>
4651
```
4752

48-
### Angular
53+
#### Angular
4954

5055
```ts
5156
import { registerElement } from '@nativescript/angular';
5257
import { IonicPortal } from '@nativescript/ionic-portals';
5358
registerElement('IonicPortal', () => IonicPortal);
5459

5560
// use in any component:
56-
<IonicPortal id="webPortal"></IonicPortal>
61+
<IonicPortal id="webPortal"></IonicPortal>;
5762
```
5863

64+
## Communication
5965

60-
### API
66+
- Send events from NativeScript to any web portal:
6167

62-
* `IonicPortalManager.register(apiKey: string)`: Register Portals when your app boots
63-
* https://ionic.io/docs/portals/getting-started/guide#configure
68+
```
69+
IonicPortalManager.publishTopic('hello', { name: 'data from NativeScript' });
70+
```
6471

72+
- Subscribe to events sent from any web portal:
6573

66-
* `IonicPortalManager.create(portalId: string, startDir?: string)`: Create a Portal
67-
* `portalId`: The portal id to register
68-
* `startDir`: Set the web applications directory. By default it will look for a folder named the same as the portalId as the location of the web assets. Use this optional 2nd arg if you would like the folder name to be different that the portalId.
74+
```
75+
const subscriptionId = IonicPortalManager.subscribeToTopic('useful-web-event', result => {
76+
console.log('received web portal useful-web-event with data:', result.data);
77+
});
78+
```
79+
80+
- Unsubscribe from events sent from any web portal:
81+
82+
```
83+
IonicPortalManager.unsubscribeFromTopic('useful-web-event', subscriptionId);
84+
```
85+
86+
## API
87+
88+
Interact and configure portals via `IonicPortalManager` which provides the following APIs:
89+
90+
```ts
91+
class IonicPortalManager {
92+
/**
93+
* Register Portals when your app boots
94+
* https://ionic.io/docs/portals/getting-started/guide#configure
95+
* @param apiKey your portal api key
96+
*/
97+
static register(apiKey: string): void;
98+
/**
99+
* Used to set the initial context of any portal id before the portal is shown
100+
* @param id portal id
101+
* @param initialContext data provided as the initial context to the portal
102+
*/
103+
static setInitialContext(id: string, initialContext: any): void;
104+
/**
105+
* Define usage of non-official Capacitor Plugins via Android package names
106+
* @param plugins list of non-official Capacitor package names
107+
*/
108+
static setAndroidPlugins(plugins: Array<string>): void;
109+
/**
110+
* Send a message to any web portal via publishing a topic (aka. event)
111+
* @param topic name of topic/event
112+
* @param data payload to send
113+
*/
114+
static publishTopic(topic: string, data?: any): void;
115+
/**
116+
* Listen to any message sent from any web portal via subscribing to the topic (aka. event)
117+
* @param topic name of topic/event
118+
* @param callback method which is invoked everytime a message is sent via the topic
119+
* @returns subscription id used to unsubscribe later
120+
*/
121+
static subscribeToTopic(topic: string, callback: (data?: any) => void): number;
122+
/**
123+
* Unsubscribe from any topic (aka. event)
124+
* @param topic name of topic/event
125+
* @param subscriptionId subscription id
126+
*/
127+
static unsubscribeFromTopic(topic: string, subscriptionId: number): void;
128+
}
129+
```
69130

70-
### Use Capacitor Plugins
131+
## Use Capacitor Plugins
71132

72133
Refer [to this blog post](https://blog.nativescript.org/ionic-portals-with-capacitor-plugins).
73134

74135
## Notes
75136

76-
> For iOS:
137+
> For iOS:
77138
> You may need to add `IPHONEOS_DEPLOYMENT_TARGET = 12.0` to your `App_Resources/iOS/build.xcconfig` file.
78139
> If your project contains `App_Resources/iOS/Podfile`, you may need to remove any post install handling which removes deployment targets, for example:
79140
> Remove anything like this: `config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'`

‎packages/ionic-portals/common.ts

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
11
import { View } from '@nativescript/core';
22

3-
export class IonicPortalCommon extends View {}
3+
export class IonicPortalManagerCommon {
4+
static AndroidPlugins: Array<string>;
5+
static InitialContexts: { [key: string]: any };
6+
static Listeners: { [key: string]: Array<{ callback: (data?: any) => void; subscriptionId: number }> };
7+
static setAndroidPlugins(plugins: Array<string>) {
8+
if (!IonicPortalManagerCommon.AndroidPlugins) {
9+
IonicPortalManagerCommon.AndroidPlugins = [];
10+
}
11+
for (const plugin of plugins) {
12+
if (!IonicPortalManagerCommon.AndroidPlugins.includes(plugin)) {
13+
IonicPortalManagerCommon.AndroidPlugins.push(plugin);
14+
}
15+
}
16+
}
17+
static setInitialContext(id: string, initialContext: any) {
18+
if (!IonicPortalManagerCommon.InitialContexts) {
19+
IonicPortalManagerCommon.InitialContexts = {};
20+
}
21+
IonicPortalManagerCommon.InitialContexts[id] = initialContext;
22+
}
23+
24+
static subscribeToTopic(topic: string, callback: (data?: any) => void): number {
25+
if (!this.Listeners) {
26+
this.Listeners = {};
27+
}
28+
if (!this.Listeners[topic]) {
29+
this.Listeners[topic] = [];
30+
}
31+
return 0;
32+
}
33+
34+
static unsubscribeFromTopic(topic: string, subscriptionId: number) {
35+
if (this.Listeners && this.Listeners[topic]) {
36+
const index = this.Listeners[topic].findIndex((ref) => ref.subscriptionId === subscriptionId);
37+
if (index > -1) {
38+
this.Listeners[topic].splice(index, 1);
39+
}
40+
}
41+
}
42+
}
43+
44+
export class IonicPortalCommon extends View {
45+
initialContext: any;
46+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy