Mobile Platform as a Service:Get started with H5 container on iOS

Integre os componentes de contêiner H5 e pacote offline em um cliente iOS usando CocoaPods.

Integre os componentes de contêiner H5 e pacote offline em um projeto de cliente iOS existente usando CocoaPods.

Usar o SDK

Os exemplos a seguir baseiam-se na demonstração oficial do contêiner H5 e pacote offline para baselines 10.1.60 e posteriores.

O fluxo de trabalho do SDK do contêiner H5 tem cinco etapas:

1. Inicializar configurações

2. Invocar o contêiner

3. Habilitar comunicação bidirecional entre H5 e Nativo

4. Carregar pacotes offline

5. Instrumentação do contêiner H5

1. Inicializar configurações

1,1. Inicializar o contêiner

• Inicialize o contêiner Nebula após a inicialização do aplicativo. Substitua o método - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions da classe DTFrameworkInterface na categoria DTFrameworkInterface + (ProjectName) fornecida pelo framework mPaaS.

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Initialize the container
        [MPNebulaAdapterInterface initNebula];
    }

• Para usar pacotes offline predefinidos, JSAPIs personalizados e Plugins, substitua initNebula por initNebulaWith e forneça os parâmetros necessários.

  • presetApplistPath: Caminho para o arquivo de informações dos pacotes offline predefinidos personalizados.

  • appPackagePath: Caminho para os pacotes offline predefinidos personalizados.

  • pluginsJsapisPath: Caminho para os arquivos de JSAPI e Plugin personalizados.

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Initialize the container
        NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle/h5_json.json"] ofType:nil];
        NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle"] ofType:nil];
        NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
        [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath];
    }

    Nota

    Os métodos initNebula e initNebulaWithCustomPresetApplistPath são mutuamente exclusivos e não podem ser chamados simultaneamente.

• O mPaaS permite configurar o intervalo de solicitação para pacotes de miniaplicativos globalmente ou individualmente.

  • Configuração global: Defina a frequência de atualização para pacotes offline ou miniaplicativos usando o código abaixo durante a inicialização do contêiner.

    [MPNebulaAdapterInterface shareInstance].nebulaUpdateReqRate = 7200;

    O intervalo padrão é de 7200 segundos. Faixa válida: 0 a 86400 (24 horas). O valor 0 remove o limite do intervalo.

  • Configuração individual: Define o intervalo para um único pacote de miniaplicativo. No console, acesse Individual Configuration > Add Offline Package > Extended Information e insira {"asyncReqRate":"1800"} para definir o intervalo de solicitação. Consulte a seção Extended Information em Criar um pacote offline H5.

1,2 Personalizar contêineres

• Personalize o contêiner definindo as propriedades de MPNebulaAdapterInterface. Configure-as no método - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions da classe DTFrameworkInterface. Caso contrário, as configurações padrão do contêiner sobrescreverão suas definições personalizadas.

    - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Customize the container
        [MPNebulaAdapterInterface shareInstance].nebulaVeiwControllerClass = [MPH5WebViewController class];
        [MPNebulaAdapterInterface shareInstance].nebulaNeedVerify = NO;
        [MPNebulaAdapterInterface shareInstance].nebulaUserAgent = @"mPaaS/Portal";
        [MPNebulaAdapterInterface shareInstance].nebulaCommonResourceAppList = @[@"77777777"];
    }

• As propriedades estão descritas a seguir:

  Propriedade	Significado	Observações
  nebulaViewControllerClass	Classe base para páginas HTML5.	O padrão é H5WebViewController. Defina esta propriedade para especificar uma classe base personalizada para todas as páginas HTML5. Importante A classe base deve herdar de H5WebViewController.
  nebulaWebViewClass	Classe base para a WebView.	> 10.1.60: O padrão é H5WKWebView. Uma WebView personalizada deve herdar de H5WKWebView. = 10.1.60: A personalização não é suportada.
  nebulaUseWKArbitrary	Indica se deve usar WKWebView para carregar páginas de pacotes offline.	> 10.1.60: O padrão é YES. = 10.1.60: O padrão é NO.
  nebulaUserAgent	User-Agent do aplicativo.	Anexado ao UA padrão do contêiner.
  nebulaNeedVerify	Indica se deve realizar a verificação de assinatura. O padrão é YES.	Se você não carregou um arquivo de chave privada ao configurar o pacote offline, defina este valor como NO. Caso contrário, o pacote offline falhará ao carregar.
  nebulaPublicKeyPath	Caminho da chave pública para verificação de assinatura do pacote offline.	A chave pública correspondente à chave privada carregada quando você configurou o pacote offline.
  nebulaCommonResourceAppList	AppIds para pacotes de recursos públicos.	-
  errorHtmlPath	Caminho da página de erro HTML exibida quando uma página HTML5 falha ao carregar.	Por padrão, lê de MPNebulaAdapter.bundle/error.html.
  configDelegate	Delegate para switches personalizados.	Modifica globalmente os valores padrão dos switches do contêiner.

1,3 Configuração não gerenciada por framework

Para aplicativos não gerenciados pelo framework mPaaS (projetos não gerenciados por framework), realize as configurações adicionais nesta seção. Se o mPaaS gerencia o ciclo de vida do seu aplicativo, ignore esta seção.

• Depois que o window e o navigationController do aplicativo forem criados, chame o seguinte método. Não é necessário bootloader ou ocultação de janela do framework.

• Não é obrigatório herdar de DFNavigationController.

• Caso o aplicativo possua múltiplas barras de navegação e você precise abrir pacotes offline diferentes em barras distintas, redefina a barra de navegação do contêiner após a troca.

1,5. Configurar projetos não gerenciados por framework (para versões anteriores a 10.1.68.25)

Em projetos não gerenciados por framework, execute as configurações adicionais a seguir. Ignore esta seção se o mPaaS gerenciar o ciclo de vida do seu aplicativo.

1.4.1 Iniciar o framework mPaaS

No método didFinishLaunchingWithOptions, chame [[DTFrameworkInterface sharedInstance] manualInitMpaasFrameworkWithApplication:application launchOptions:launchOptions]; para iniciar o framework mPaaS.

1.4.2 Criar um Application Launcher

Crie uma subclasse de DTBootLoader e substitua os métodos createWindow e createNavigationController para retornar o window e o navigationController do aplicativo.

• Defina window: A keyWindow do aplicativo atual.

• Defina navigationController: O rootViewController da keyWindow do aplicativo atual. Ele deve herdar de DFNavigationController.

1.4.3 Especificar o application launcher

Na categoria DTFrameworkInterface, substitua o método para especificar seu bootloader personalizado e ocultar a janela e o launcher padrão do framework mPaaS.

2. Invocar o contêiner

Após a inicialização, invoque um contêiner H5 de três maneiras possíveis.

• Crie um contêiner H5 a partir de uma URL online ou de um arquivo HTML local:

  // Open an online URL
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com/products/MPAAS"}];
  // Open a local HTML page
  NSString *path = [[NSBundle mainBundle].bundlePath stringByAppendingFormat:@"/%@/%@", @"MPH5Demo.bundle", @"H52Native.html"];
  if ([path length] > 0) {
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": path}];
  }

• Crie e abra automaticamente um contêiner H5 a partir de um push com informações de pacote offline:

    [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

• Crie um contêiner H5 a partir de informações de pacote offline e retorne a instância. Geralmente utilizado para uma aba de página inicial:

    [[MPNebulaAdapterInterface shareInstance] createH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

3. Habilitar comunicação bidirecional entre H5 e Nativo

Estabeleça a comunicação bidirecional entre H5 e Nativo por meio de JSAPIs e listeners de eventos.

3,1. Chamar funcionalidades Nativas a partir de uma página HTML5

Utilize JSAPIs para comunicar-se do H5 para o Nativo.

Os JSAPIs e parâmetros suportados pelo contêiner Nebula estão listados em JSAPIs integrados.

Exemplo

Chame a JSAPI pushWindow para carregar uma nova página ao clicar em um botão:

AlipayJSBridge.call('pushWindow', {
    url: 'https://tech.antfin.com',
    param: {
    readTitle: true,
    defaultTitle: true,
    // ...
    }
}, function(data) {alert('Call result'+JSON.stringify(data)); });

Descrição do AlipayJSBridge

O AlipayJSBridge é uma JSBridge injetada automaticamente pelo contêiner Nebula. Após o evento Window.onload, o contêiner cria a variável global AlipayJSBridge e dispara o evento AlipayJSBridgeReady. Como a injeção é assíncrona, escute o evento AlipayJSBridgeReady antes de chamar a interface.

Exemplo:

<h1>How to use the bridge</h1>

<script>
function ready(callback) {
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function(){
  alert('bridge ready');
});
</script>

3,2. Chamar funcionalidades H5 a partir de uma página Nativa

Escute eventos para habilitar a comunicação do Nativo para o H5. Os eventos suportados estão listados em Lista de extensão de eventos.

document.addEventListener('back', function (e) {
    if(confirm('The back event was intercepted. Are you sure you want to go back?')) {
        // do something;
    }
}, false);

Também é possível definir eventos personalizados no lado Nativo para que o frontend possa escutá-los.

// self: The VC where the current HTML5 page is located
// data: The parameters passed from Native to the frontend
// callBack: The callback after the frontend receives the event
[self callHandler:@"customEvent" data:@{@"key":@"value"} responseCallback:^(id responseData) {
        NSLog(@"Callback after the frontend receives the event: %@", responseData);
    }];

3,3. Estender capacidades do contêiner Nebula

Estenda o Nebula caso as capacidades integradas de comunicação bidirecional não atendam às suas necessidades:

• JSAPI: Estenda JSAPIs para chamar funções Nativas a partir de uma página HTML5, como exibir um ActionSheet ou uma caixa de diálogo de contatos. Uma JSAPI utiliza um método handler para adicionar funcionalidade Nativa a uma página HTML5. Personalizar JSAPIs.

• Plugin: Desenvolva plugins para executar ações em momentos específicos, como quando um usuário entra em uma página ou o contêiner recebe uma solicitação. Exemplos incluem registrar dados de instrumentação e modificar dados retornados. Inscreva-se em eventos no plugin para processar dados de eventos no handler. Personalizar plugins.

4. Carregar pacotes offline

Pacotes offline reduzem a dependência de rede ao agrupar serviços para entrega local através da plataforma de publicação, permitindo a atualização de recursos do cliente. Consulte Introdução aos pacotes offline e Usar pacotes offline.

5. Instrumentação do contêiner H5

O contêiner Nebula monitora automaticamente o desempenho de carregamento e captura dados comportamentais e de erro quando uma página HTML5 é carregada. Veja Instrumentação do contêiner H5.