Имитация встроенной поддержки Ionic в браузере

Я предпочитаю делать что-то немного по-другому, когда дело доходит до использования плагина Cordova в браузере. Несмотря на то, что ваш подход отлично работает, вам все равно нужно вручную указать Angular, какой класс следует использовать, когда он видит параметр Network в конструкторе какого-либо компонента. Вы делаете это в этой строке:

{ provide: Network, useClass: NetworkMock } 

Итак, если вы хотите запустить приложение на мобильном устройстве, вам нужно будет вручную изменить эту строку (а также все строки, относящиеся к некоторым другим плагинам Cordova).

Вот почему мне нравится использовать заводской поставщик вместо. Вот как я работаю с плагином Network cordova в браузере:

// ------------------------------------------------------------
// File: /providers/cordova-plugins/network/network.provider.ts
// ------------------------------------------------------------

// Ionic
import { Platform } from 'ionic-angular';

// Ionic native
// http://ionicframework.com/docs/v2/native/network/
import { Network } from '@ionic-native/network';

// Browser implementation
export class BrowserNetworkProvider extends Network {

    public get type(): string {
        return this.isOnline() ? 'wify' : 'none';
    }

    private isOnline(): boolean {
        return navigator.onLine;
    }
}

// Mobile implementation
// Is empty in this case since I don't to override anything, but in 
// some other plugins, I like to add some console.log() before calling
// the methods in the plugin (by using super.nameOfTheMethod();)
export class MobileNetworkProvider extends Network {}

// ------------------------------------------------------------
// Network factory
//    parameters: dependencies of the target service
//    returns: instance of the service (for real devices or the browser)
// ------------------------------------------------------------
export function networkFactory(platform: Platform) {
    return platform.is('cordova') ? new MobileNetworkProvider() : new BrowserNetworkProvider();
}

// networkProvider: used to import the service in the NgModule declaration
export let networkProvider =
    {
        provide: Network,
        useFactory: networkFactory,
        deps: [Platform]
    };

А затем в файле app.module.ts:

import { networkProvider } from '../providers/plugins/network/network.provider';

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        // ...
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // Cordova plugins
        networkProvider, // <- I'm using our custom provider here! :)

        // ...
    ]
})
export class AppModule { }

Как видите, Angular будет использовать информацию Platform, чтобы узнать, какое расширение класса Network следует использовать в нашем приложении.

Как мы уже говорили в комментариях:

1) Что касается геттера для переопределения свойства type, я не знаю так много в Typescript, но по какой-то причине мне не удалось установить значение свойства при расширении класса (поэтому я предложил вместо этого использовать геттер) . Поскольку геттер вызывается так же, как если бы он был свойством, я подумал о том, чтобы сделать это так, и, похоже, он работает!

2) Зачем расширять класс Network для браузера, если мы могли бы также использовать класс, не имеющий ничего общего с классом Network (например, когда вы опускаете ключевое слово extend в своем примере? Что ж, вы могли бы это сделать, поскольку после всего этого - это просто Javascript (и вы можете исправить любую жалобу на Typescript, используя приведение (<any>propertyName). Но поскольку вы говорите Angular, какую реализацию класса Network следует использовать, почему бы не расширить этот класс, переопределив то, что мы хотим изменить, но сохраняя все согласованным ? Если позже плагин добавит несколько методов, которые работают в браузере, вам не нужно будет ничего менять, поскольку вы уже используете реальную реализацию плагина для всех методов, которые вы не отменяете.

Я просто попробовал следующую альтернативу, и она сработала.

...
import { Network } from '@ionic-native/network';
...
...    
export class NetworkMock{   
 // I omitted the Extend keyword and avoided overriding the actual class   
 type = 'none';
}
@NgModule({ ....


providers: [ 
...
...

{ provide: ErrorHandler, useClass: IonicErrorHandler },
{provide: Network, useClass: NetworkMock}

С помощью приведенного выше кода теперь консоль браузера правильно печатает 'none' или любое другое значение, которое я ввел в свойство type класса NetworkMock.

Насколько я понимаю, Inheritance is Javascript сложен по своей природе и приводит к нежелательным обстоятельствам. Так что я полностью избегал этого. Однако в массиве providers я указал свой NetworkMock в свойстве useClass.

Мы будем очень признательны за любую дополнительную информацию.