|
1 | | -# Getting started with Remote Config |
| 1 | +<h1>Getting started with Remote Config <em><abbr title="beta">β<abbr></em></h1> |
2 | 2 |
|
3 | | -### Something, something |
| 3 | +`AngularFireRemoteConfig` dynamically imports the `firebase/remote-config` library on demand, provides convenience observables, pipes, and a promisified version of the [Firebase Remote Config SDK (`firebase.remoteConfig.RemoteConfig`)](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.RemoteConfig). |
4 | 4 |
|
5 | | -TBD |
| 5 | +### API: |
6 | 6 |
|
7 | | -### Putting it all together |
| 7 | +```ts |
| 8 | +interface ConfigTemplate {[key:string]: string|number|boolean} |
| 9 | + |
| 10 | +type Parameter extends remoteConfig.Value { |
| 11 | + key: string, |
| 12 | + fetchTimeMillis: number |
| 13 | +} |
| 14 | + |
| 15 | +class AngularFireRemoteConfig { |
| 16 | + changes: Observable<Parameter>; |
| 17 | + parameters: Observable<Parameter[]>; |
| 18 | + numbers: Observable<{[key:string]: number|undefined}> & {[key:string]: Observable<number>}; |
| 19 | + booleans: Observable<{[key:string]: boolean|undefined}> & {[key:string]: Observable<boolean>}; |
| 20 | + strings: Observable<{[key:string]: string|undefined}> & {[key:string]: Observable<string|undefined>}; |
| 21 | + |
| 22 | + // from firebase.remoteConfig() proxy: |
| 23 | + activate: () => Promise<boolean>; |
| 24 | + ensureInitialized: () => Promise<void>; |
| 25 | + fetch: () => Promise<void>; |
| 26 | + fetchAndActivate: () => Promise<boolean>; |
| 27 | + getAll: () => Promise<{[key:string]: remoteConfig.Value}>; |
| 28 | + getBoolean: (key:string) => Promise<boolean>; |
| 29 | + getNumber: (key:string) => Promise<number>; |
| 30 | + getString: (key:string) => Promise<string>; |
| 31 | + getValue: (key:string) => Promise<remoteConfig.Value>; |
| 32 | + setLogLevel: (logLevel: remoteConfig.LogLevel) => Promise<void>; |
| 33 | + settings: Promise<remoteConfig.Settings>; |
| 34 | + defaultConfig: Promise<{[key: string]: string | number | boolean}>; |
| 35 | + fetchTimeMillis: Promise<number>; |
| 36 | + lastFetchStatus: Promise<remoteConfig.FetchStatus>; |
| 37 | +} |
| 38 | + |
| 39 | +// Pipes for working with .changes and .parameters |
| 40 | +filterRemote: () => MonoTypeOperatorFunction<Parameter | Parameter[]> |
| 41 | +filterFresh: (interval: number) => MonoTypeOperatorFunction<Parameter | Parameter[]> |
| 42 | +budget: <T>(interval: number) => MonoTypeOperatorFunction<T> |
| 43 | + |
| 44 | +// scanToObject is for use with .changes |
| 45 | +scanToObject: () => OperatorFunction<Parameter, {[key: string]: string|undefined}> |
| 46 | +// mapToObject is the same behavior are scanToObject but for use with .parameters, |
| 47 | +mapToObject: () => OperatorFunction<Parameter[], {[key: string]: string|undefined}> |
| 48 | +``` |
| 49 | + |
| 50 | +## Configuration with Dependency Injection |
| 51 | + |
| 52 | +### Configure Remote Config with `SETTINGS` |
| 53 | + |
| 54 | +Using the `SETTINGS` DI Token (*default: {}*) will allow you to [configure Firebase Remote Config](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.Settings.html). |
| 55 | + |
| 56 | +### Configure default values with `DEFAULTS` |
| 57 | + |
| 58 | +Providing `DEFAULTS ({[key: string]: string | number | boolean})` has `AngularFireRemoteConfig` emit the provided defaults first, which allows you to count on Remote Config when the user is offline or in environments that the Remote Config service does not handle (i.e, Server Side Rendering). |
| 59 | + |
| 60 | +## Putting it all together: |
8 | 61 |
|
9 | 62 | ```ts |
10 | 63 | @NgModule({ |
|
16 | 69 | { provide: DEFAULT_CONFIG, useValue: { enableAwesome: true } }, |
17 | 70 | { |
18 | 71 | provide: REMOTE_CONFIG_SETTINGS, |
19 | | - useFactory: () => isDevMode ? { minimumFetchIntervalMillis: 1 } : {} |
| 72 | + useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} |
20 | 73 | } |
21 | 74 | ] |
22 | 75 | }) |
23 | 76 | export class AppModule { } |
24 | | -``` |
25 | 77 |
|
26 | | -```ts |
| 78 | +... |
| 79 | + |
27 | 80 | constructor(remoteConfig: AngularFireRemoteConfig) { |
28 | | - remoteConfig.changes.subscribe(changes => …); |
| 81 | + remoteConfig.changes.pipe( |
| 82 | + filterFresh(172_800_000), // ensure we have values from at least 48 hours ago |
| 83 | + first(), |
| 84 | + // scanToObject when used this way is similar to defaults |
| 85 | + // but most importantly smart-casts remote config values and adds type safety |
| 86 | + scanToObject({ |
| 87 | + enableAwesome: true, |
| 88 | + titleBackgroundColor: 'blue', |
| 89 | + titleFontSize: 12 |
| 90 | + }) |
| 91 | + ).subscribe(…); |
| 92 | + |
| 93 | + // all remote config values cast as strings |
| 94 | + remoteConfig.strings.subscribe(...) |
| 95 | + remoteConfig.booleans.subscribe(...); // as booleans |
| 96 | + remoteConfig.numbers.subscribe(...); // as numbers |
| 97 | + |
| 98 | + // convenience for observing a single string |
| 99 | + remoteConfig.strings.titleBackgroundColor.subscribe(...); |
| 100 | + remoteConfig.booleans.enableAwesome.subscribe(...); // boolean |
| 101 | + remoteConfig.numbers.titleBackgroundColor.subscribe(...); // number |
| 102 | + |
| 103 | + // however those may emit more than once as the remote config cache fires and gets fresh values from the server |
| 104 | + // you can filter it out of .changes for more control: |
| 105 | + remoteConfig.changes.pipe( |
| 106 | + filter(param => param.key === 'titleBackgroundColor'), |
| 107 | + map(param => param.asString()) |
| 108 | + // budget at most 800ms and return the freshest value possible in that time |
| 109 | + // our budget pipe is similar to timeout but won't error or abort the pending server fetch (it won't emit it, if the deadline is exceeded, but it will have been fetched so can use the freshest values on next subscription) |
| 110 | + budget(800), |
| 111 | + last() |
| 112 | + ).subscribe(...) |
| 113 | + |
| 114 | + // just like .changes, but scanned as into an array |
| 115 | + remoteConfig.parameters.subscribe(all => ...); |
| 116 | + |
| 117 | + // or make promisified firebase().remoteConfig() calls direct off AngularFireRemoteConfig |
| 118 | + // using our proxy |
| 119 | + remoteConfig.getAll().then(all => ...); |
| 120 | + remoteConfig.lastFetchStatus.then(status => ...); |
29 | 121 | } |
30 | 122 | ``` |
0 commit comments