Cordova - Guia Rápido

Cordova é uma plataforma para a construção de aplicativos móveis híbridos usando HTML, CSS e JavaScript.

A documentação oficial nos dá a definição do Cordova -

"Apache Cordova é uma estrutura de desenvolvimento móvel de código aberto. Ele permite que você use tecnologias da Web padrão, como HTML5, CSS3 e JavaScript para desenvolvimento de plataforma cruzada, evitando cada linguagem de desenvolvimento nativa da plataforma móvel. Os aplicativos são executados em wrappers direcionados a cada plataforma e dependem de associações de API em conformidade com os padrões para acessar os sensores, dados e status da rede de cada dispositivo. "

Recursos do Cordova

Vamos agora entender resumidamente as características de Cordova.

Interface de linha de comando (CLI Cordova)

Esta ferramenta pode ser usada para iniciar projetos, construir processos para diferentes plataformas, instalar plugins e muitas outras coisas úteis que tornam o processo de desenvolvimento mais fácil. Você aprenderá a usar a Interface de Linha de Comando nos capítulos subsequentes.

Componentes Principais Cordova

O Cordova oferece um conjunto de componentes essenciais que todo aplicativo móvel precisa. Esses componentes serão usados ​​para criar a base do aplicativo para que possamos gastar mais tempo para implementar nossa própria lógica.

Plugins Cordova

Cordova oferece API que será usada para implementar funções móveis nativas em nosso aplicativo JavaScript.

Licença

Cordova é licenciado sob a Licença Apache, Versão 2.0. Apache e os logotipos de penas da Apache são marcas registradas da The Apache Software Foundation.

Vantagens de Cordova

Vamos agora discutir as vantagens de Cordova.

  • Cordova oferece uma plataforma para construção de aplicativos móveis híbridos para que possamos desenvolver um aplicativo que será usado em diferentes plataformas móveis - IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu e tizien.

  • É mais rápido desenvolver um aplicativo híbrido do que um aplicativo nativo para que o Cordova economize tempo de desenvolvimento.

  • Como usamos JavaScript ao trabalhar com o Cordova, não precisamos aprender linguagens de programação específicas da plataforma.

  • Existem muitos add-ons de comunidade que podem ser usados ​​com o Cordova, eles têm várias bibliotecas e estruturas, que são otimizadas para trabalhar com ele.

Limitações de Cordova

A seguir estão as limitações do Cordova.

  • Os aplicativos híbridos são mais lentos do que os nativos, por isso não é ideal usar o Cordova para aplicativos grandes que requerem muitos dados e funcionalidade.

  • A compatibilidade entre navegadores pode criar muitos problemas. Na maioria das vezes, estamos criando aplicativos para diferentes plataformas, portanto, o teste e a otimização podem ser demorados, pois precisamos cobrir um grande número de dispositivos e sistemas operacionais.

  • Alguns plug-ins têm problemas de compatibilidade com diferentes dispositivos e plataformas. Existem também algumas APIs nativas que ainda não são suportadas pelo Cordova.

Neste capítulo, vamos entender a configuração do ambiente de Cordova. Para começar a configuração, primeiro precisamos instalar alguns componentes. Os componentes estão listados na tabela a seguir.

S.No Software e descrição
1

NodeJS and NPM

NodeJS é a plataforma necessária para o desenvolvimento do Cordova. Confira nossa Configuração de ambiente NodeJS para mais detalhes.

2

Android SDK

Para a plataforma Android, você precisa ter o Android SDK instalado em sua máquina. Confira a configuração do ambiente Android para mais detalhes.

3

XCode

Para a plataforma iOS, você precisa ter o xCode instalado em sua máquina. Confira a configuração do ambiente iOS para mais detalhes

Instalando Cordova

Antes de começarmos, você precisa saber que usaremos o Windows command prompt em nosso tutorial.

Etapa 1 - Instalando o git

Mesmo se você não usar o git, ele deve ser instalado, pois o Cordova o está usando para alguns processos em segundo plano. Você pode baixar o git aqui . Depois de instalar o git, abra sua variável de ambiente.

  • Clique com o botão direito no computador
  • Properties
  • Configurações avançadas do sistema
  • variáveis ​​ambientais
  • Variáveis ​​do sistema
  • Edit

Copie o seguinte no final do variable value field. Este é o caminho padrão da instalação do git. Se você instalou em um caminho diferente, deve usá-lo em vez de nosso código de exemplo abaixo.

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

Agora você pode digitar git em seu prompt de comando para testar se a instalação foi bem-sucedida.

Etapa 2 - Instalação do Cordova

Esta etapa irá baixar e instalar o módulo Cordova globalmente. Abra o prompt de comando e execute o seguinte -

C:\Users\username>npm install -g cordova

Você pode verificar a versão instalada executando -

C:\Users\username>cordova -v

Isso é tudo que você precisa para começar a desenvolver os aplicativos Cordova no sistema operacional Windows. Em nosso próximo tutorial, mostraremos como criar o primeiro aplicativo.

Sabemos como instalar o Cordova e configurar o ambiente para ele. Assim que tudo estiver pronto, podemos criar nosso primeiro aplicativo Cordova híbrido.

Etapa 1 - Criação de aplicativo

Abra o diretório onde deseja que o aplicativo seja instalado no prompt de comando. Vamos criá-lo no desktop.

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject é o nome do diretório onde o aplicativo é criado.

  • io.cordova.hellocordovaé o valor de domínio reverso padrão. Você deve usar seu próprio valor de domínio, se possível.

  • CordovaApp é o título do seu aplicativo.

Etapa 2 - Adicionar plataformas

Você precisa abrir o diretório do projeto no prompt de comando. Em nosso exemplo, é oCordovaProject. Você só deve escolher as plataformas de que precisa. Para poder usar a plataforma especificada, você precisa ter instalado o SDK da plataforma específica. Como estamos desenvolvendo em windows, podemos usar as seguintes plataformas. Já instalamos o Android SDK, portanto, instalaremos apenas a plataforma Android para este tutorial.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

Existem outras plataformas que podem ser usadas no sistema operacional Windows.

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

Se estiver desenvolvendo no Mac, você pode usar -

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

Você também pode remover a plataforma do seu projeto usando -

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

Etapa 3 - Construindo e executando

Nesta etapa, construiremos o aplicativo para uma plataforma especificada para que possamos executá-lo em um dispositivo móvel ou emulador.

C:\Users\username\Desktop\CordovaProject>cordova build android

Agora podemos executar nosso aplicativo. Se você estiver usando o emulador padrão, você deve usar -

C:\Users\username\Desktop\CordovaProject>cordova emulate android

Se você quiser usar o emulador externo ou dispositivo real, você deve usar -

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE - Vamos usar o Genymotion android emulatoruma vez que é mais rápido e responsivo do que o padrão. Você pode encontrar o emulador aqui . Você também pode usar um dispositivo real para teste, habilitandoUSB debuggingdas opções e conectando-o ao seu computador via cabo USB. Para alguns dispositivos, você também precisará instalar o driver USB.

Assim que executarmos o aplicativo, ele o instalará na plataforma que especificamos. Se tudo for concluído sem erros, a saída deve mostrar a tela inicial padrão do aplicativo.

Em nosso próximo tutorial, mostraremos como configurar o aplicativo Cordova.

o config.xmlarquivo é o lugar onde podemos alterar a configuração do aplicativo. Quando criamos nosso aplicativo no último tutorial, definimos domínio e nome reversos. Os valores podem ser alterados noconfig.xmlArquivo. Quando criamos o aplicativo, o arquivo de configuração padrão também é criado.

A tabela a seguir explica os elementos de configuração em config.xml.

Tabela de configuração config.xml

S.No Elemento e detalhes
1

widget

O valor do domínio reverso do aplicativo que especificamos ao criar o aplicativo.

2

name

O nome do aplicativo que especificamos ao criar o aplicativo.

3

description

Descrição do aplicativo.

4

author

Autor do aplicativo.

5

content

A página inicial do aplicativo. É colocado dentro dowww diretório.

6

plugin

Os plug-ins que estão instalados atualmente.

7

access

Usado para controlar o acesso a domínios externos. O padrãoorigino valor é definido como *, o que significa que o acesso é permitido a qualquer domínio. Este valor não permitirá que alguns URLs específicos sejam abertos para proteger informações.

8

allow-intent

Permite que URLs específicos solicitem a abertura do aplicativo. Por exemplo,<allow-intent href = "tel:*" /> permitirá que os links tel: abram o discador.

9

platform

As plataformas para construir o aplicativo.

Podemos usar a API de armazenamento disponível para armazenar dados nos aplicativos clientes. Isso ajudará no uso do aplicativo quando o usuário estiver offline e também pode melhorar o desempenho. Como este tutorial é para iniciantes, mostraremos como usarlocal storage. Em um de nossos tutoriais posteriores, mostraremos os outros plug-ins que podem ser usados.

Etapa 1 - Adicionando botões

Vamos criar quatro botões no index.htmlArquivo. Os botões estarão localizados dentro dodiv class = "app" elemento.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

Isso produzirá a seguinte tela -

Etapa 2 - Adicionar ouvintes de eventos

A política de segurança do Cordova não permite eventos embutidos, portanto, adicionaremos ouvintes de eventos dentro dos arquivos index.js. Também iremos atribuirwindow.localStorage para um localStorage variável que usaremos mais tarde.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

Etapa 3 - Criação de funções

Agora precisamos criar funções que serão chamadas quando os botões forem tocados. A primeira função é usada para adicionar dados ao armazenamento local.

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

O próximo irá registrar os dados que adicionamos ao console.

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

Se tocarmos SET LOCAL STORAGEbotão, definiremos três itens para armazenamento local. Se tocarmosSHOW LOCAL STORAGE depois, o console registrará os itens que desejamos.

Vamos agora criar uma função que excluirá o projeto do armazenamento local.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

Se clicarmos no SHOW LOCAL STORAGE depois de excluir o projeto, a saída mostrará null valor para o campo do projeto.

Também podemos obter os elementos de armazenamento local usando o key() método que tomará o índice como um argumento e retornará o elemento com o valor de índice correspondente.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

Agora, quando tocamos no GET BY KEY botão, a seguinte saída será exibida.

NOTA

Quando usamos o key() método, o console irá registrar o job ao invés de name mesmo que tenhamos passado no argumento 0para recuperar o primeiro objeto. Isso ocorre porque o armazenamento local está armazenando dados em ordem alfabética.

A tabela a seguir mostra todos os métodos de armazenamento local disponíveis.

S.No Métodos e detalhes
1

setItem(key, value)

Usado para definir o item para armazenamento local.

2

getItem(key)

Usado para obter o item do armazenamento local.

3

removeItem(key)

Usado para remover o item do armazenamento local.

4

key(index)

Usado para obter o item usando o indexdo item no armazenamento local. Isso ajuda a classificar os itens em ordem alfabética.

5

length()

Usado para recuperar o número de itens que existem no armazenamento local.

6

clear()

Usado para remover todos os pares de chave / valor do armazenamento local.

Existem vários eventos que podem ser usados ​​em projetos de Córdoba. A tabela a seguir mostra os eventos disponíveis.

S.No Eventos e detalhes
1

deviceReady

Este evento é acionado quando o Cordova está totalmente carregado. Isso ajuda a garantir que nenhuma função do Cordova seja chamada antes de tudo ser carregado.

2

pause

Este evento é acionado quando o aplicativo é colocado em segundo plano.

3

resume

Este evento é acionado quando o aplicativo retorna do segundo plano.

4

backbutton

Este evento é acionado quando o botão Voltar é pressionado.

5

menubutton

Este evento é acionado quando o botão do menu é pressionado.

6

searchbutton

Este evento é acionado quando o botão de pesquisa do Android é pressionado.

7

startcallbutton

Este evento é acionado quando o botão iniciar chamada é pressionado.

8

endcallbutton

Este evento é acionado quando o botão Encerrar chamada é pressionado.

9

volumedownbutton

Este evento é acionado quando o botão de diminuir o volume é pressionado.

10

volumeupbutton

Este evento é acionado quando o botão de aumentar o volume é pressionado.

Usando eventos

Todos os eventos são usados ​​quase da mesma maneira. Devemos sempre adicionar ouvintes de eventos em nossojs ao invés de inline event calling desde o Cordova Content Security Policynão permite Javascript embutido. Se tentarmos chamar o evento embutido, o seguinte erro será exibido.

A maneira certa de trabalhar com eventos é usando addEventListener. Vamos entender como usar ovolumeupbutton evento através de um exemplo.

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

Assim que pressionamos o volume up , a tela exibirá o seguinte alerta.

Botão Traseiro de Manuseio

Devemos usar o botão Voltar do Android para funcionalidades do aplicativo, como retornar à tela anterior. Para implementar sua própria funcionalidade, devemos primeiro desabilitar o botão Voltar que é usado para sair do aplicativo.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Agora, quando pressionamos o botão voltar nativo do Android, o alerta aparecerá na tela em vez de sair do aplicativo. Isso é feito usando oe.preventDefault() comando.

Botão Traseiro de Manuseio

Geralmente, você deseja usar o botão Voltar do Android para algumas funcionalidades do aplicativo, como retornar à tela anterior. Para poder implementar sua própria funcionalidade, primeiro você precisa desativar a saída do aplicativo quando o botão Voltar é pressionado.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Agora, quando pressionamos o botão voltar nativo do Android, o alerta aparecerá na tela em vez de sair do aplicativo. Isso é feito usandoe.preventDefault().

Cordova Plugman é uma ferramenta de linha de comando útil para instalar e gerenciar plug-ins. Você deveria usarplugmanse seu aplicativo precisa ser executado em uma plataforma específica. Se você deseja criar umcross-platform aplicativo que você deve usar cordova-cli que modificará plug-ins para diferentes plataformas.

Etapa 1 - Instalando o Plugman

Abra o command prompt janela e execute o seguinte fragmento de código para instalar o plugman.

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

Etapa 2 - Instalação de plug-ins

Para entender como instalar o plugin Cordova usando o plugman, usaremos o plugin Camera como exemplo.

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera

Precisamos considerar três parâmetros como mostrado acima.

  • --platform - plataforma que estamos usando (android, ios, amazon-fireos, wp8, blackberry10).

  • --project- caminho onde o projeto é construído. No nosso caso, éplatforms\android diretório.

  • --plugin - o plugin que queremos instalar.

Se você definir parâmetros válidos, a janela do prompt de comando deve exibir a seguinte saída.

Métodos Adicionais

Você pode usar o uninstall método de maneira semelhante.

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera

o command prompt o console exibirá a seguinte saída.

O Plugman oferece alguns métodos adicionais que podem ser usados. Os métodos estão listados na tabela a seguir.

S.No Método e detalhes
1

install

Usado para instalar plug-ins Cordova.

2

uninstall

Usado para desinstalar os plug-ins do Cordova.

3

fetch

Usado para copiar o plugin Cordova para um local específico.

4

prepare

Usado para atualizar o arquivo de configuração para ajudar no suporte do módulo JS.

5

adduser

Usado para incluir a conta do usuário no registro.

6

publish

Usado para publicar o plugin no registro.

7

unpublish

Usado para cancelar a publicação do plugin do registro.

8

search

Usado para pesquisar os plug-ins no registro.

9

config

Usado para definir as configurações do registro.

10

create

Usado para criar um plugin personalizado.

11

platform

Usado para adicionar ou remover plataforma do plug-in criado personalizado.

Comandos Adicionais

Se você estiver preso, você sempre pode usar o plugman -helpcomando. A versão pode ser verificada usandoplugman -v. Para pesquisar o plugin, você pode usarplugman search e, finalmente, você pode alterar o registro do plugin usando o plugman config set registry comando.

NOTA

Uma vez que Cordova é usado para desenvolvimento de plataforma cruzada, em nossos capítulos subsequentes usaremos Cordova CLI ao invés de Plugman para instalar plug-ins.

Este plugin Cordova é usado para monitorar o status da bateria do dispositivo. O plugin irá monitorar todas as mudanças que acontecem na bateria do dispositivo.

Etapa 1 - Instalando o plug-in da bateria

Para instalar este plugin, precisamos abrir o command prompt janela e execute o seguinte código.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

Etapa 2 - Adicionar Listener de Eventos

Quando você abre o index.js arquivo, você encontrará o onDeviceReadyfunção. É aqui que o ouvinte de eventos deve ser adicionado.

window.addEventListener("batterystatus", onBatteryStatus, false);

Etapa 3 - Criar função de retorno de chamada

Vamos criar o onBatteryStatus função de retorno de chamada na parte inferior do index.js Arquivo.

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

Quando executamos o aplicativo, um alerta será acionado. No momento, a bateria está 100% carregada.

Quando o status for alterado, um novo alerta será exibido. O status da bateria mostra que ela agora está 99% carregada.

Se conectarmos o dispositivo ao carregador, o novo alerta mostrará que o isPlugged valor é alterado para true.

Eventos Adicionais

Este plugin oferece dois eventos adicionais além do batterystatusevento. Esses eventos podem ser usados ​​da mesma forma que obatterystatus evento.

S.No Detalhes do evento
1

batterylow

O evento é disparado quando a porcentagem de carga da bateria atinge um valor baixo. Este valor varia com diferentes dispositivos.

2

batterycritical

O evento é disparado quando a porcentagem de carga da bateria atinge um valor crítico. Este valor varia com diferentes dispositivos.

Este plugin é usado para tirar fotos ou usar arquivos da galeria de imagens.

Etapa 1 - Instale o plug-in da câmera

Execute o seguinte código no command prompt janela para instalar este plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Etapa 2 - Adicionando botão e imagem

Agora, vamos criar o botão para chamar a câmera e imgonde a imagem será exibida uma vez tirada. Isso será adicionado aindex.html dentro de div class = "app" elemento.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

Etapa 3 - Adicionando Listener de Eventos

O ouvinte de evento é adicionado dentro do onDeviceReady para garantir que o Cordova seja carregado antes de começarmos a usá-lo.

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

Etapa 4 - Adicionar funções (tirar foto)

Vamos criar o cameraTakePicturefunção que é passada como um retorno de chamada para nosso ouvinte de evento. Ele será disparado quando o botão for tocado. Dentro desta função, vamos chamar onavigator.cameraobjeto global fornecido pela API do plugin. Se tirar a foto com sucesso, os dados serão enviados para oonSuccessfunção callback, caso contrário, será mostrado o alerta com mensagem de erro. Colocaremos esse código na parte inferior doindex.js.

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

Quando executamos o aplicativo e pressionamos o botão, a câmera nativa será acionada.

Quando tiramos e salvamos a foto, ela será exibida na tela.

O mesmo procedimento pode ser usado para obter a imagem do sistema de arquivos local. A única diferença é a função criada na última etapa. Você pode ver que osourceType parâmetro opcional foi adicionado.

Etapa 1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Etapa 2 B

<button id = "cameraGetPicture">GET PICTURE</button>

Etapa 3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

Etapa 4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

Quando pressionamos o segundo botão, o sistema de arquivos será aberto em vez da câmera para que possamos escolher a imagem a ser exibida.

Este plugin oferece muitos parâmetros opcionais para personalização.

S.No Parâmetro e detalhes
1

quality

Qualidade da imagem na faixa de 0-100. O padrão é 50.

2

destinationType

DATA_URL ou 0 Retorna string codificada em base64.

FILE_URI ou 1 Retorna o URI do arquivo de imagem.

NATIVE_URI ou 2 Retorna o URI nativo da imagem.

3

sourceType

PHOTOLIBRARY ou 0 Abre a biblioteca de fotos.

CAMERA ou 1 Abre a câmera nativa.

SAVEDPHOTOALBUM ou 2 Abre o álbum de fotos salvo.

4

allowEdit

Permite edição de imagem.

5

encodingType

JPEG ou 0 Retorna imagem codificada em JPEG.

PNG ou 1 Retorna imagem codificada em PNG.

6

targetWidth

Largura de dimensionamento da imagem em pixels.

7

targetHeight

Altura do dimensionamento da imagem em pixels.

8

mediaType

PICTURE ou 0 Permite apenas a seleção de fotos.

VIDEO ou 1 Permite apenas a seleção de vídeo.

ALLMEDIA ou 2 Permite todas as seleções de tipo de mídia.

9

correctOrientation

Usado para corrigir a orientação da imagem.

10

saveToPhotoAlbum

Usado para salvar a imagem no álbum de fotos.

11

popoverOptions

Usado para definir a localização do popover no IOS.

12

cameraDirection

FRONT ou 0 Câmera frontal.

BACK ou 1 Câmera traseira.

ALLMEDIA

Este plugin é usado para acessar o banco de dados de contatos do dispositivo. Neste tutorial, mostraremos como criar, consultar e excluir contatos.

Etapa 1 - instalar o plug-in de contatos

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

Etapa 2 - Adicionando botões

O botão será usado para chamar o createContactfunção. Vamos colocá-lo nodiv class = "app" dentro index.html Arquivo.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

Etapa 2 - Adicionar ouvintes de eventos

Abrir index.js e copie o seguinte snippet de código no onDeviceReady função.

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

Etapa 3A - Função de retorno de chamada (navigator.contacts.create)

Agora, não temos nenhum contato armazenado no dispositivo.

Nossa primeira função de retorno de chamada irá chamar o navigator.contacts.createmétodo onde podemos especificar os novos dados de contato. Isso criará um contato e o atribuirá aomyContactvariável, mas não será armazenado no dispositivo. Para armazená-lo, precisamos chamar osave método e criar funções de retorno de chamada de sucesso e erro.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

Quando clicamos no ADD CONTACT botão, o novo contato será armazenado na lista de contatos do dispositivo.

Etapa 3B - Função de retorno de chamada (navigator.contacts.find)

Nossa segunda função de retorno de chamada irá consultar todos os contatos. Vamos usar onavigator.contacts.findmétodo. O objeto de opções possui um parâmetro de filtro que é usado para especificar o filtro de pesquisa.multiple = trueé usado porque queremos retornar todos os contatos do dispositivo. ofield chave para pesquisar contatos por displayName já que o usamos ao salvar o contato.

Depois que as opções forem definidas, estamos usando findmétodo para consultar contatos. A mensagem de alerta será acionada para cada contato encontrado.

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Quando pressionamos o FIND CONTACT botão, um pop-up de alerta será acionado, pois salvamos apenas um contato.

Etapa 3C - função de retorno de chamada (excluir)

Nesta etapa, usaremos o método find novamente, mas desta vez definiremos opções diferentes. ooptions.filter está definido para pesquisar isso Test Userque deve ser excluído. Depois decontactfindSuccess função de retorno de chamada retornou o contato que queremos, vamos excluí-lo usando o remove método que requer seus próprios retornos de chamada de sucesso e erro.

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Agora, temos apenas um contato armazenado no dispositivo. Adicionaremos manualmente mais um para mostrar o processo de exclusão.

Vamos agora clicar no DELETE CONTACT botão para deletar o Test User. Se verificarmos a lista de contatos novamente, veremos que oTest User não existe mais.

Este plugin é usado para obter informações sobre o dispositivo do usuário.

Etapa 1 - Instalando o plugin do dispositivo

Para instalar este plugin, precisamos executar o seguinte snippet no command prompt.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

Etapa 2 - Adicionar botão

Estaremos usando este plugin da mesma forma que usamos os outros plugins do Cordova. Vamos adicionar um botão noindex.htmlArquivo. Este botão será usado para obter informações sobre o dispositivo.

<button id = "cordovaDevice">CORDOVA DEVICE</button>

Etapa 3 - Adicionando Listener de Eventos

Os plug-ins do Cordova estão disponíveis após o deviceready evento, então vamos colocar o ouvinte de evento dentro do onDeviceReady função em index.js.

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

Etapa 4 - Criação de função

A função a seguir mostrará como usar todas as possibilidades que o plugin oferece. Vamos colocá-lo emindex.js.

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

Quando clicamos no CORDOVA DEVICE , o alerta exibirá a versão do Cordova, o modelo do dispositivo, a plataforma, o UUID e a versão do dispositivo.

O plugin do acelerômetro também é chamado de device-motion. É usado para rastrear o movimento do dispositivo em três dimensões.

Etapa 1 - Instale o plug-in do acelerômetro

Vamos instalar este plugin usando cordova-CLI. Digite o seguinte código nocommand prompt janela.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

Etapa 2 - Adicionar botões

Nesta etapa, vamos adicionar dois botões no index.htmlArquivo. Um será usado para obter a aceleração atual e o outro observará as mudanças de aceleração.

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

Etapa 3 - Adicionar ouvintes de eventos

Vamos agora adicionar ouvintes de eventos para nossos botões para onDeviceReady função dentro index.js.

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

Etapa 4 - Criação de funções

Agora, vamos criar duas funções. A primeira função será usada para obter a aceleração atual e a segunda função irá observar a aceleração e as informações sobre a aceleração serão disparadas a cada três segundos. Também vamos adicionar oclearWatch função envolvida pelo setTimeoutfunção para parar de assistir a aceleração após o período de tempo especificado. ofrequency parâmetro é usado para acionar a função de retorno de chamada a cada três segundos.

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

Agora, se pressionarmos o GET ACCELERATIONbotão, obteremos o valor de aceleração atual. Se pressionarmos oWATCH ACCELERATIONbotão, o alerta será acionado a cada três segundos. Depois que o terceiro alerta é mostrado,clearWatch A função será chamada e não receberemos mais alertas, pois definimos o tempo limite para 10.000 milissegundos.

A bússola é usada para mostrar a direção relativa ao ponto cardeal norte geográfico.

Etapa 1 - Instalar o plugin de orientação do dispositivo

Abra o command prompt janela e execute o seguinte.

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

Etapa 2 - Adicionar botões

Este plugin é semelhante ao accelerationplugar. Vamos agora criar dois botões emindex.html.

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

Etapa 3 - Adicionar ouvintes de eventos

Agora, vamos adicionar event listeners dentro de onDeviceReady função em index.js.

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

Etapa 4 - Criação de funções

Vamos criar duas funções; a primeira função irá gerar a aceleração atual e a outra irá verificar as mudanças de orientação. Você pode ver que estamos usando ofrequency opção novamente para observar as mudanças que ocorrem a cada três segundos.

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

Como o plugin da bússola é quase o mesmo que o plugin de aceleração, mostraremos um código de erro desta vez. Alguns dispositivos não possuem o sensor magnético necessário para o funcionamento da bússola. Se o seu dispositivo não tiver, o seguinte erro será exibido.

O plug-in Cordova Dialogs chamará o elemento de IU do diálogo nativo da plataforma.

Etapa 1 - Diálogo Instalando

Digite o seguinte comando no command prompt janela para instalar este plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

Etapa 2 - Adicionar botões

Vamos agora abrir index.html e adicione quatro botões, um para cada tipo de diálogo.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

Etapa 3 - Adicionar ouvintes de eventos

Agora vamos adicionar os ouvintes de evento dentro do onDeviceReady função em index.js. Os ouvintes chamarão a função de retorno de chamada assim que o botão correspondente for clicado.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

Etapa 4A - Criar Função de Alerta

Visto que adicionamos quatro ouvintes de evento, vamos agora criar as funções de retorno de chamada para todos eles em index.js. O primeiro édialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

Se clicarmos no ALERT botão, veremos a caixa de diálogo de alerta.

Quando clicamos no botão de diálogo, a seguinte saída será exibida no console.

Etapa 4B - Criar Função de Confirmação

A segunda função que precisamos criar é a dialogConfirm função.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

Quando o CONFIRM botão for pressionado, a nova caixa de diálogo será exibida.

Vamos clicar no YESbotão para responder à pergunta. A seguinte saída será exibida no console.

Etapa 4C - Criar função de prompt

A terceira função é o dialogPromptfunção. Isso permite que os usuários digitem texto no elemento de entrada do diálogo.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

o PROMPT botão irá acionar uma caixa de diálogo como na imagem a seguir.

Nesta caixa de diálogo, temos a opção de digitar o texto. Iremos registrar este texto no console, junto com um botão que é clicado.

Etapa 4D - Criar função de bipe

O último é o dialogBeepfunção. Isso é usado para chamar a notificação de bipe de áudio. otimes parâmetro irá definir o número de repetições para o sinal de bipe.

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

Quando clicamos no BEEP botão, ouviremos o som de notificação duas vezes, já que o times valor está definido para 2.

Este plugin é usado para manipular o sistema de arquivos nativo no dispositivo do usuário.

Etapa 1 - Instalando o plugin de arquivo

Precisamos executar o seguinte código no command prompt para instalar este plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

Etapa 2 - Adicionar botões

Neste exemplo, mostraremos como criar um arquivo, gravar no arquivo, lê-lo e excluí-lo. Por este motivo, vamos criar quatro botões emindex.html. Nós também adicionaremostextarea onde, o conteúdo do nosso arquivo será mostrado.

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

Etapa 3 - Adicionar ouvintes de eventos

Vamos adicionar event listeners dentro index.js dentro de onDeviceReady função para garantir que tudo foi iniciado antes de o plugin ser usado.

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

Etapa 4A - Função Criar Arquivo

O arquivo será criado na pasta raiz de aplicativos no dispositivo. Para poder acessar a pasta raiz, você precisa fornecersuperuseracesso às suas pastas. Em nosso caso, o caminho para a pasta raiz é\data\data\com.example.hello\cache. No momento, esta pasta está vazia.

Vamos agora adicionar uma função que criará o arquivo log.txt. Vamos escrever este código emindex.jse envie uma solicitação ao sistema de arquivos. Este método usa WINDOW.TEMPORARY ou WINDOW.PERSISTENT. O tamanho necessário para o armazenamento é avaliado em bytes (5 MB no nosso caso).

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Agora podemos pressionar o CREATE FILE botão e o alerta irá confirmar que criamos o arquivo com sucesso.

Agora, podemos verificar a pasta raiz de nossos aplicativos novamente e encontrar nosso novo arquivo lá.

Etapa 4B - Função Gravar Arquivo

Nesta etapa, escreveremos algum texto em nosso arquivo. Enviaremos novamente uma solicitação ao sistema de arquivos e, em seguida, criaremos o gravador de arquivos para poder escreverLorem Ipsum texto que atribuímos ao blob variável.

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Depois de pressionar o WRITE FILE , o alerta nos informará que a escrita foi bem-sucedida como na imagem a seguir.

Agora podemos abrir log.txt e veja isso Lorem Ipsum está escrito dentro.

Etapa 4C - Função Ler Arquivo

Nesta etapa, vamos ler o arquivo log.txt e exibi-lo no textareaelemento. Enviaremos uma solicitação ao sistema de arquivos e obteremos o objeto de arquivo, então estamos criandoreader. Quando o leitor for carregado, atribuiremos o valor retornado atextarea.

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Quando clicamos no READ FILE botão, o texto do arquivo será escrito dentro textarea.

Etapa 4D - Função Excluir Arquivo

E, finalmente, criaremos uma função para excluir log.txt Arquivo.

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Agora podemos pressionar o DELETE FILEbotão para remover o arquivo da pasta raiz de aplicativos. O alerta nos notificará que a operação de exclusão foi bem-sucedida.

Se verificarmos a pasta raiz dos aplicativos, veremos que está vazia.

Este plugin é usado para enviar e baixar arquivos.

Etapa 1 - Instalando o plugin de transferência de arquivos

Precisamos abrir command prompt e execute o seguinte comando para instalar o plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

Etapa 2 - Criar botões

Neste capítulo, mostraremos como fazer upload e download de arquivos. Vamos criar dois botões emindex.html

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

Etapa 3 - Adicionar ouvintes de eventos

Os ouvintes de eventos serão criados em index.js dentro de onDeviceReadyfunção. Estamos adicionandoclick eventos e callback funções.

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

Etapa 4A - Função de download

Esta função será usada para baixar os arquivos do servidor para o dispositivo. Carregamos o arquivo parapostimage.orgpara tornar as coisas mais simples. Você provavelmente desejará usar seu próprio servidor. A função é colocada emindex.js e será acionado quando o botão correspondente for pressionado. uri é o link de download do servidor e fileURI é o caminho para a pasta DCIM em nosso dispositivo.

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

Assim que pressionamos o DOWNLOAD botão, o arquivo será baixado do postimg.orgservidor para o nosso dispositivo móvel. Podemos verificar a pasta especificada e ver quemyFile existe.

A saída do console será semelhante a esta -

Etapa 4B - Função de upload

Agora vamos criar uma função que pegará o arquivo e fará o upload para o servidor. Novamente, queremos simplificar isso tanto quanto possível, então usaremosposttestserver.comservidor online para teste. O valor uri será vinculado para postagem emposttestserver.

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

Agora podemos pressionar o UPLOADbotão para acionar esta função. Receberemos uma saída do console como confirmação de que o upload foi bem-sucedido.

Também podemos verificar o servidor para ter certeza de que o arquivo foi carregado.

A geolocalização é usada para obter informações sobre a latitude e longitude do dispositivo.

Etapa 1 - Instalando o plug-in

Podemos instalar este plugin digitando o seguinte código para command prompt janela.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

Etapa 2 - Adicionar botões

Neste tutorial, mostraremos como obter a posição atual e como observar as mudanças. Primeiro, precisamos criar botões que chamarão essas funções.

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

Etapa 3 - Adicionar ouvintes de eventos

Agora queremos adicionar ouvintes de eventos quando o dispositivo estiver pronto. Adicionaremos o exemplo de código abaixo paraonDeviceReady função em index.js.

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

Etapa 3 - Criar funções

Duas funções devem ser criadas para dois ouvintes de eventos. Um será usado para obter a posição atual e o outro para observar a posição.

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

No exemplo acima, estamos usando dois métodos - getCurrentPosition e watchPosition. Ambas as funções usam três parâmetros. Assim que clicarmosCURRENT POSITION botão, o alerta mostrará valores de geolocalização.

Se clicarmos WATCH POSITIONbotão, o mesmo alerta será acionado a cada três segundos. Dessa forma, podemos rastrear as mudanças de movimento do dispositivo do usuário.

NOTA

Este plugin está usando GPS. Às vezes, ele não pode retornar os valores no tempo e a solicitação retornará um erro de tempo limite. É por isso que especificamosenableHighAccuracy: true e maximumAge: 3600000.Isso significa que, se uma solicitação não for concluída a tempo, usaremos o último valor conhecido. Em nosso exemplo, estamos definindo maximumAge como 3600000 milissegundos.

Este plugin é usado para obter informações sobre o idioma local dos usuários, data e fuso horário, moeda, etc.

Etapa 1 - Instalando o plugin de globalização

Abrir command prompt e instale o plugin digitando o seguinte código

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

Etapa 2 - Adicionar botões

Vamos adicionar vários botões para index.html para poder chamar diferentes métodos que criaremos mais tarde.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

Etapa 3 - Adicionar ouvintes de eventos

Ouvintes de eventos serão adicionados dentro getDeviceReady função em index.js para garantir que nosso aplicativo e o Cordova sejam carregados antes de começarmos a usá-lo.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

Etapa 4A - Função de linguagem

A primeira função que estamos usando retorna a tag de idioma BCP 47 do dispositivo do cliente. Nós vamos usargetPreferredLanguagemétodo. A função tem dois parâmetros onSuccess eonError. Estamos adicionando esta função emindex.js.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

Assim que pressionamos o LANGUAGE botão, o alerta será mostrado na tela.

Etapa 4B - Função local

Esta função retorna o tag BCP 47 para as configurações locais do cliente. Esta função é semelhante à que criamos antes. A única diferença é que estamos usandogetLocaleName método desta vez.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

Quando clicamos no LOCALE botão, o alerta mostrará nossa tag local.

Etapa 4C - Função de data

Esta função é usada para retornar a data de acordo com a configuração de local e fuso horário do cliente. date parâmetro é a data atual e options parâmetro é opcional.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

Agora podemos executar o aplicativo e pressionar DATE botão para ver a data atual.

A última função que mostraremos é retornar valores de moeda de acordo com as configurações do dispositivo do cliente e o código de moeda ISO 4217. Você pode ver que o conceito é o mesmo.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

o CURRENCY O botão acionará um alerta que mostrará o padrão de moeda dos usuários.

Este plugin oferece outros métodos. Você pode ver tudo isso na tabela abaixo.

método parametros detalhes
getPreferredLanguage onSuccess, onError Retorna o idioma atual do cliente.
getLocaleName onSuccess, onError Retorna as configurações de localidade atuais do cliente.
dateToString data, onSuccess, onError, opções Retorna a data de acordo com o local e o fuso horário do cliente.
stringToDate dateString, onSuccess, onError, opções Analisa uma data de acordo com as configurações do cliente.
getCurrencyPattern currencyCode, onSuccess, onError Retorna o padrão de moeda do cliente.
getDatePattern onSuccess, onError, options Retorna o padrão de data do cliente.
getDateNames onSuccess, onError, options Retorna uma matriz de nomes de meses, semanas ou dias de acordo com as configurações do cliente.
isDayLightSavingsTime data, successCallback, errorCallback Usado para determinar se o horário de verão está ativo de acordo com o fuso horário e calendário do cliente.
getFirstDayOfWeek onSuccess, onError Retorna o primeiro dia da semana de acordo com as configurações do cliente.
numberToString número, onSuccess, onError, opções Retorna o número de acordo com as configurações do cliente.
stringToNumber string, onSuccess, onError, opções Analisa um número de acordo com as configurações do cliente.
getNumberPattern onSuccess, onError, options Retorna o padrão de número de acordo com as configurações do cliente.

Este plugin é usado para abrir o navegador da web dentro do aplicativo Cordova.

Etapa 1 - Instalando o plug-in

Precisamos instalar este plugin em command prompt janela antes que possamos usá-lo.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Etapa 2 - botão Adicionar

Vamos adicionar um botão que será usado para abrir inAppBrowser janela em index.html.

Etapa 3 - Adicionar Listener de Evento

Agora vamos adicionar ouvinte de evento para nosso botão em onDeviceReady função em index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Etapa 4 - Criar Função

Nesta etapa estamos criando uma função que abrirá o navegador dentro de nosso aplicativo. Estamos atribuindo isso aoref variável que podemos usar posteriormente para adicionar ouvintes de eventos.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Se pressionarmos BROWSER botão, veremos a seguinte saída na tela.

O console também ouvirá eventos. loadstart evento será disparado quando o URL começar a carregar e loadstopserá disparado quando o URL for carregado. Podemos ver no console.

Assim que fechamos o navegador, exit evento irá disparar.

Existem outras opções possíveis para a janela InAppBrowser. Explicaremos na tabela abaixo.

S.No opção e detalhes
1

location

Usado para ligar ou desligar a barra de localização do navegador. Os valores sãoyes ou no.

2

hidden

Usado para ocultar ou mostrar noAppBrowser. Os valores sãoyes ou no.

3

clearCache

Usado para limpar o cache de cookies do navegador. Os valores sãoyes ou no.

4

clearsessioncache

Usado para limpar o cache do cookie da sessão. Os valores sãoyes ou no.

5

zoom

Usado para ocultar ou mostrar os controles de zoom do navegador Android. Os valores sãoyes ou no.

6

hardwareback

yes para usar o botão Voltar do hardware para navegar de volta pelo histórico do navegador. no para fechar o navegador quando o botão Voltar for clicado.

Podemos usar ref(referência) variável para algumas outras funcionalidades. Mostraremos apenas exemplos rápidos disso. Para remover ouvintes de eventos, podemos usar -

ref.removeEventListener(eventname, callback);

Para fechar InAppBrowser, podemos usar -

ref.close();

Se abrirmos uma janela oculta, podemos mostrá-la -

ref.show();

Até mesmo o código JavaScript pode ser injetado no InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

O mesmo conceito pode ser usado para injetar CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);

O plug-in de mídia Cordova é usado para gravar e reproduzir sons de áudio em aplicativos Cordova.

Etapa 1 - Instalando o plug-in de mídia

O plugin de mídia pode ser instalado executando o seguinte código em command prompt janela.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

Etapa 2 - Adicionar botões

Neste tutorial, criaremos um reprodutor de áudio simples. Vamos criar os botões que precisamos emindex.html.

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

Etapa 3 - Adicionar ouvintes de eventos

Agora precisamos adicionar ouvintes de eventos para nossos botões dentro onDeviceReady função dentro index.js.

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

Etapa 4A - Função de reprodução

A primeira função que vamos adicionar é playAudio. Estamos definindomyMediafora da função porque queremos usá-lo em funções que serão adicionadas posteriormente (pause, stop, volumeUp e volumeDown). Este código é colocado emindex.js Arquivo.

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

Podemos clicar PLAY botão para iniciar a música de piano do src caminho.

Etapa 4B - funções de pausa e parada

As próximas funções de que precisamos é pauseAudio e stopAudio.

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

Agora podemos pausar ou parar o som do piano clicando PAUSE ou STOP botões.

Etapa 4C - Funções de Volume

Para definir o volume, podemos usar setVolumemétodo. Este método usa parâmetros com valores de0 para 1. Vamos definir o valor inicial para0.5.

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

Assim que pressionamos VOLUME UP ou VOLUME DOWN podemos mudar o valor do volume por 0.1.

A tabela a seguir mostra outros métodos que este plugin fornece.

S.No Método e detalhes
1

getCurrentPosition

Retorna a posição atual de um áudio.

2

getDuration

Retorna a duração de um áudio.

3

play

Usado para iniciar ou retomar o áudio.

4

pause

Usado para pausar o áudio.

5

release

Libera os recursos de áudio do sistema operacional subjacente.

6

seekTo

Usado para alterar a posição de um áudio.

7

setVolume

Usado para definir o volume do áudio.

8

startRecord

Comece a gravar um arquivo de áudio.

9

stopRecord

Pare de gravar um arquivo de áudio.

10

stop

Pare de reproduzir um arquivo de áudio.

Este plugin é usado para acessar as opções de captura do dispositivo.

Etapa 1 - Instalando o Plug-in de Captura de Mídia

Para instalar este plugin, vamos abrir command prompt e execute o seguinte código -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

Etapa 2 - Adicionar botões

Como queremos mostrar a você como capturar áudio, imagem e vídeo, criaremos três botões em index.html.

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

Etapa 3 - Adicionar ouvintes de eventos

A próxima etapa é adicionar ouvintes de eventos dentro onDeviceReady dentro index.js.

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

Etapa 4A - Função de captura de áudio

A primeira função de retorno de chamada em index.js é audioCapture. Para iniciar o gravador de som, usaremoscaptureAudiométodo. Estamos usando duas opções -limit permitirá a gravação de apenas um clipe de áudio por operação de captura única e duration é o número de segundos de um clipe de som.

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Quando pressionamos AUDIO botão, o gravador de som será aberto.

O console mostrará a matriz retornada de objetos que os usuários capturaram.

Etapa 4B - Função de captura de imagem

A função de captura de imagem será a mesma da anterior. A única diferença é que estamos usandocaptureImage método desta vez.

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Agora podemos clicar IMAGE botão para iniciar a câmera.

Quando tirarmos a foto, o console irá registrar o array com o objeto de imagem.

Etapa 4C - Função de captura de vídeo

Vamos repetir o mesmo conceito para a captura de vídeo. Nós vamos usarvideoCapture método desta vez.

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Se pressionarmos VIDEO botão, a câmera será aberta e podemos gravar o vídeo.

Assim que o vídeo for salvo, o console retornará o array mais uma vez. Desta vez com um objeto de vídeo dentro.

Este plugin fornece informações sobre a rede do dispositivo.

Etapa 1 - Instalando o plugin de informações de rede

Para instalar este plugin, vamos abrir command prompt e execute o seguinte código -

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

Etapa 2 - Adicionar botões

Vamos criar um botão em index.html que será usado para obter informações sobre a rede.

<button id = "networkInfo">INFO</button>

Etapa 3 - Adicionar ouvintes de eventos

Vamos adicionar três ouvintes de eventos dentro onDeviceReady função em index.js. Um ouvirá cliques no botão que criamos antes e os outros dois ouvirão mudanças no status da conexão.

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

Etapa 4 - Criação de funções

networkInfoA função retornará informações sobre a conexão de rede atual assim que o botão for clicado. Estamos ligandotypemétodo. As outras funções sãoonOffline e onOnline. Essas funções estão ouvindo as alterações de conexão e qualquer alteração acionará a mensagem de alerta correspondente.

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

Quando iniciamos o aplicativo conectado à rede, onOnline função irá disparar o alerta.

Se pressionarmos INFO o botão de alerta mostrará o estado da nossa rede.

Se nos desconectarmos da rede, onOffline função será chamada.

Este plugin é usado para exibir uma tela inicial na inicialização do aplicativo.

Etapa 1 - Instalação do plug-in da tela inicial

O plugin da tela inicial pode ser instalado em command prompt janela executando o seguinte código.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

Etapa 2 - Adicionar tela inicial

Adicionar a tela inicial é diferente de adicionar outros plug-ins do Cordova. Precisamos abrirconfig.xml e adicione os seguintes trechos de código dentro do widget elemento.

O primeiro snippet é SplashScreen. Temvalue propriedade que é o nome das imagens em platform/android/res/drawable- pastas. Cordova oferece padrãoscreen.pngimagens que estamos usando neste exemplo, mas provavelmente você desejará adicionar suas próprias imagens. O importante é adicionar imagens para visualização retrato e paisagem e também cobrir diferentes tamanhos de tela.

<preference name = "SplashScreen" value = "screen" />

O segundo snippet que precisamos adicionar é SplashScreenDelay. Estamos definindovalue para 3000 para ocultar a tela inicial após três segundos.

<preference name = "SplashScreenDelay" value = "3000" />

A última preferência é opcional. Se o valor for definido comotrue, a imagem não será esticada para caber na tela. Se estiver definido parafalse, será esticado.

<preference name = "SplashMaintainAspectRatio" value = "true" />

Agora, quando executarmos o aplicativo, veremos a tela inicial.

Este plugin é usado para conectar a funcionalidade de vibração do dispositivo.

Etapa 1 - Instalando o plug-in de vibração

Podemos instalar este plugin em command prompt janela executando o seguinte código -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

Etapa 2 - Adicionar botões

Assim que o plugin estiver instalado, podemos adicionar botões em index.html que será usado mais tarde para acionar a vibração.

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

Etapa 3 - Adicionar ouvintes de eventos

Agora vamos adicionar ouvintes de eventos dentro onDeviceReady dentro index.js.

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

Etapa 4 - Criar funções

Este plugin é muito fácil de usar. Vamos criar duas funções.

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

A primeira função está tomando o parâmetro de tempo. Este parâmetro é usado para definir a duração da vibração. O dispositivo vibrará por três segundos assim que pressionarmosVIBRATION botão.

A segunda função está usando patternparâmetro. Essa matriz fará com que o dispositivo vibre por um segundo, espere um segundo e repita o processo novamente.

Este plugin nos permite implementar uma política de lista de permissões para navegação de aplicativos. Quando criamos um novo projeto Cordova, owhitelistplugin é instalado e implementado por padrão. Você pode abrir oconfig.xml arquivo para ver allow-intent configurações padrão fornecidas por Cordova.

Lista de permissões de navegação

No exemplo simples abaixo, estamos permitindo links para algum URL externo. Este código é colocado emconfig.xml. Navegação parafile:// URLs são permitidos por padrão.

<allow-navigation href = "http://example.com/*" />

O sinal de asterisco, *, é usado para permitir a navegação para vários valores. No exemplo acima, estamos permitindo a navegação para todos os subdomínios doexample.com. O mesmo pode ser aplicado ao protocolo ou prefixo do host.

<allow-navigation href = "*://*.example.com/*" />

Lista branca de intenções

Existe também o allow-intentelemento que é usado para especificar quais URLs têm permissão para abrir o sistema. Você pode ver noconfig.xml que Cordova já permitiu a maioria dos links necessários para nós.

Lista de permissões de solicitação de rede

Quando você olha para dentro config.xml arquivo, existe <access origin="*" />elemento. Este elemento permite todas as solicitações de rede para nosso aplicativo por meio de ganchos Cordova. Se quiser permitir apenas solicitações específicas, você pode excluí-lo do config.xml e defini-lo você mesmo.

O mesmo princípio é usado como nos exemplos anteriores.

<access origin = "http://example.com" />

Isso permitirá todas as solicitações de rede de http://example.com.

Política de Segurança de Conteúdo

Você pode ver a política de segurança atual do seu aplicativo dentro do head elemento em index.html.

<meta http-equiv = "Content-Security-Policy" content = "default-src 
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 
   'self' 'unsafe-inline'; media-src *">

Esta é a configuração padrão. Se você quiser permitir tudo da mesma origem eexample.com, então você pode usar -

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

Você também pode permitir tudo, mas restringir CSS e JavaScript à mesma origem.

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

Como este é um tutorial para iniciantes, recomendamos as opções padrão do Cordova. Depois de se familiarizar com o Cordova, você pode experimentar alguns valores diferentes.

Cordova é usado para criar aplicativos móveis híbridos, portanto, você precisa considerar isso antes de escolhê-lo para seu projeto. Abaixo estão as melhores práticas para o desenvolvimento de aplicativos Cordova.

Aplicativos de página única

Este é o design recomendado para todos os aplicativos Cordova. O SPA está usando um roteador do lado do cliente e a navegação carregada em uma única página (geralmenteindex.html) O roteamento é feito via AJAX. Se você seguiu nossos tutoriais, provavelmente notou que quase todos os plug-ins Cordova precisam esperar até que o dispositivo esteja pronto para poder ser usado. O design do SPA melhorará a velocidade de carregamento e o desempenho geral.

Eventos de toque

Já que Cordova é usado para o mundo móvel, é natural usar touchstart e touchend eventos em vez de clickeventos. Os eventos de clique têm 300 ms de atraso, então os cliques não parecem nativos. Por outro lado, eventos de toque não são suportados em todas as plataformas. Você deve levar isso em consideração antes de decidir o que usar.

Animações

Você deve sempre usar aceleração de hardware CSS Transitions em vez de animações JavaScript, uma vez que terão melhor desempenho em dispositivos móveis.

Armazenamento

Use o armazenamento em cache o máximo possível. As conexões de rede móvel geralmente são ruins, portanto, você deve minimizar as chamadas de rede dentro do seu aplicativo. Você também deve lidar com o status offline do aplicativo, já que haverá momentos em que os dispositivos do usuário estarão offline.

Rolando

Na maioria das vezes, a primeira parte lenta dentro do seu aplicativo serão as listas de rolagem. Existem algumas maneiras de melhorar o desempenho de rolagem do aplicativo. Nossa recomendação é usar rolagem nativa. Quando houver muitos itens na lista, você deve carregá-los parcialmente. Use carregadores quando necessário.

Imagens

As imagens também podem tornar o aplicativo móvel mais lento. Você deve usar sprites de imagem CSS sempre que possível. Tente ajustar as imagens perfeitamente em vez de dimensioná-las.

Estilos CSS

Você deve evitar sombras e gradientes, pois eles reduzem o tempo de renderização da página.

Simplificação

O DOM do navegador é lento, então você deve tentar minimizar a manipulação do DOM e o número de elementos do DOM.

Testando

Certifique-se de testar seu aplicativo em tantos dispositivos e versões de sistema operacional quanto possível. Se o aplicativo funcionar perfeitamente em um dispositivo, isso não significa necessariamente que funcionará em outro dispositivo ou plataforma.