Estou desenvolvendo um aplicativo da web que usa PhoneGap: Build para uma versão móvel e quero ter uma única base de código para as versões 'desktop' e móvel. Quero ser capaz de detectar se as chamadas do PhoneGap funcionarão (ou seja, se o usuário está em um dispositivo móvel compatível com o PhoneGap).
Eu procurei e não consigo acreditar que não existe uma maneira simples de fazer isso. Muitas pessoas deram sugestões;
- http://www.sencha.com/forum/showthread.php?144127-Checking-if-running-in-PhoneGap-or-Mobile-Web-Browser
- http://groups.google.com/group/phonegap/browse_thread/thread/322e80bd41bb1a54/a421300eb2a2029f?lnk=gst&q=detect+desktop#a421300eb2a2029f
- http://groups.google.com/group/phonegap/browse_thread/thread/8a95dfeb0f313792/3ff10d8f35211739?lnk=gst&q=detect+desktop+browser#3ff10d8f35211739
Nada disso funciona, a menos que você remova o arquivo Javascript do PhoneGap da versão desktop do aplicativo, o que anula meu objetivo de ter uma base de código.
Até agora, a única solução que encontrei foi farejar o navegador / agente do usuário, mas isso não é robusto para dizer o mínimo. Quaisquer soluções melhores são bem-vindas!
EDIT: Uma solução marginalmente melhor é tentar chamar uma função PhoneGap após um pequeno tempo limite - se não funcionar, suponha que o usuário esteja em um navegador da web de desktop.
fonte
Respostas:
Eu uso este código:
ATUALIZAR
Existem muitas outras maneiras de detectar se o phonegap está sendo executado em um navegador ou não; aqui está outra ótima opção:
como visto aqui: Detectar entre um navegador móvel ou um aplicativo PhoneGap
fonte
Eu escrevi um post sobre isso há alguns dias. Esta é a melhor solução que você pode encontrar (até que o PhoneGap lance algo, talvez ou talvez não), é curta, simples e perfeita (eu verifiquei de todas as formas e plataformas possíveis).
Esta função fará o trabalho para 98% dos casos.
Para completar os outros 2% dos casos, siga estas etapas (envolve uma ligeira mudança no código nativo):
Crie um arquivo chamado __phonegap_index.html , com a fonte:
Agora, no nativo, basta alterar a página inicial de index.html para __phonegap_index.html em todas as suas plataformas PhoneGap. Digamos que o nome do meu projeto seja um exemplo , os arquivos que você precisa alterar são (como no PhoneGap versão 2.2.0):
CordovaLibApp/AppDelegate.m
src/org/apache/cordova/example/cordovaExample.java
example/package.appxmanifest
www/config.xml
framework/appinfo.json
src/WebForm.cpp
(linha 56)Finalmente, você pode usá-lo em qualquer lugar do seu site, se estiver ou não rodando no PhoneGap:
Espero que ajude. :-)
fonte
/^file:\/{3}[^\/]/i.test(window.location.href)
mas estamos usando PhoneGap, por exemplo, ao carregar o index.html de outra página, em config.xml algo assim<content src="http://10.100.1.147/" />
(cordova || PhoneGap || phonegap)
lançará um ReferenceError se alguma dessas variáveis não for definida. Você deve testar comtypeof cordova !== undefined
, certo?return ( typeof cordova !== undefined || typeof PhoneGap !== undefined || typeof phonegap !== undefined )
ReferenceError
mais um devido aowindow
prefixo). Apenas pensei em apontar isso, já que isso torna a cadeia de comentários desatualizada (e, portanto, incorreta).Sei que foi respondido há um tempo, mas "PhoneGap.available" não existe mais. Você deveria usar:
ou desde 1.7, prefira:
EDIT 2019: como dito nos comentários, isso só funciona se você não incluir cordova lib em seu navegador de desktop. E, claro, é uma boa prática incluir apenas os arquivos javascript / html / css mínimos estritos para cada dispositivo de destino
fonte
A maneira mais confiável que encontramos de saber se estamos em um aplicativo cordova / phonegap é modificar o agente do usuário do aplicativo cordova usando esta configuração AppendUserAgent .
Além disso
config.xml
:Então ligue:
Por quê?
window.cordova
edocument.addEventListener('deviceready', function(){});
estão sujeitos às condições de corridanavigator.standalone
não funciona quando<content src="index.html" />
é um site (Ex:<content src="https://www.example.com/index.html" />
ou com cordova-plugin-remote-inject )fonte
Cordova AppName/v0.0.1
<3 Assim, desta forma, você pode até mesmo usar isso de alguma forma para rastreamento (mas observe que qualquer um pode modificar seu useragent, então não conte com isso para verificações críticas de segurança)Acho que é o mais simples:
var isPhoneGap = (location.protocol == "file:")
EDITAR Para algumas pessoas que não funcionou. Então você pode tentar (não testei)
fonte
var isPhoneGap = ! /^http/.test(document.location.protocol)
Isso funciona para mim (executando 1.7.0)
Testado em desktop Chrome e Safari.
fonte
Como o autor do pôster original, estou usando o serviço de construção do phonegap. Depois de dois dias e quase 50 compilações de teste, descobri uma solução elegante que funciona muito bem para mim.
Não pude usar o UA sniffing porque queria testar e executar em navegadores móveis. Eu havia me decidido originalmente pela técnica bastante funcional do cobberboy. Isso não funcionou para mim porque o atraso / tempo limite de "howPatientAreWe: 10000" era muito incômodo para o desenvolvimento no navegador. E defini-lo para um valor mais baixo ocasionalmente falha no teste no modo app / dispositivo. Tinha que haver outra maneira...
O serviço de construção do phonegap requer que o
phonegap.js
arquivo seja omitido de seu repositório de código antes de enviar os arquivos de seu aplicativo para o serviço. Portanto, posso testar sua existência para determinar se está sendo executado em um navegador ou em um aplicativo.Outra ressalva: também estou usando o jQueryMobile, então tanto o jQM quanto o phonegap tiveram que inicializar antes que eu pudesse iniciar qualquer script personalizado. O código a seguir é colocado no início do meu arquivo index.js personalizado para o aplicativo (após jQuery, antes de jQM). Além disso, os documentos de construção do phonegap dizem para colocar
<script src="phonegap.js"></script>
em algum lugar no HTML. Deixo-o completamente de fora e o carrego usando $ .getScript () para testar a sua existência.fonte
Curiosamente, muitas respostas, mas não incluem essas três opções:
1 - O cordova.js irá definir o objeto cordova no âmbito global. Se estiver lá, provavelmente você está executando em um osciloscópio Cordova.
2 - O Cordova executará seu aplicativo da mesma forma que você abriria um documento HTML na sua área de trabalho. Em vez do protocolo HTTP, ele usará FILE. Detectar isso lhe dará a chance de presumir que seu aplicativo foi carregado localmente.
3 - Use o evento load do script cordova para detectar o contexto. O script include pode ser facilmente removido no processo de construção ou o carregamento do script simplesmente falhará em um navegador. Para que esta variável global não seja configurada.
O crédito vai para Damien Antipa, da Adobe
fonte
Eu uso este método:
debug
estarátrue
no ambiente do navegador,false
no dispositivo.fonte
Isso parece viável e eu usei na produção:
Fonte: http://tqcblog.com/2012/05/09/detecting-phonegap-cordova-on-startup/
fonte
A essência do problema é que, desde que cordova.device seja indefinido, seu código não pode ter certeza se é porque cordova estabeleceu que seu dispositivo não é compatível ou se é porque cordova ainda está se preparando e o dispositivo irá disparar mais tarde (ou terceira opção: cordova não carregou corretamente).
A única solução é definir um período de espera e decidir que após esse período seu código deve assumir que o dispositivo não é compatível. Gostaria que cordova definisse um parâmetro em algum lugar para dizer "Tentamos encontrar um dispositivo compatível e desistimos", mas parece que esse parâmetro não existe.
Uma vez que isso seja estabelecido, você pode querer fazer algo específico precisamente nas situações em que não há dispositivo compatível. Como esconder links para o mercado de aplicativos do aparelho, no meu caso.
Reuni essa função que deve abranger praticamente todas as situações. Ele permite que você defina um gerenciador pronto para o dispositivo, um gerenciador que nunca está pronto para o dispositivo e um tempo de espera.
fonte
Estou fazendo isso usando uma variável global que é substituída por uma versão somente para navegador do cordova.js. Em seu arquivo html principal (geralmente
index.html
), tenho os seguintes scripts que dependem do pedido:E por dentro
cordova.js
tenho simplesmente:Ao construir para um dispositivo móvel, o cordova.js não será usado (e em vez disso o arquivo cordova.js específico da plataforma será usado), então este método tem a vantagem de ser 100% correto, independentemente dos protocolos, userAgents ou biblioteca variáveis (que podem mudar). Pode haver outras coisas que eu deveria incluir em cordova.js, mas ainda não sei o que são.
fonte
if ( typeof __cordovaRunningOnBrowser__ !== 'undefined' ) { stuff(); }
.. certo?Outra forma, baseada na solução do SlavikMe:
Basta usar um parâmetro de consulta passado
index.html
de sua fonte do PhoneGap. Ou seja, no Android, em vez deusar
O SlavikMe tem uma grande lista de onde fazer isso em outras plataformas.
Então você
index.html
pode simplesmente fazer isto:fonte
<content src="index.html" />
opção no arquivo config.xml para<content src="index.html?cordova=1" />
. Até agora, parece funcionar e é de longe a melhor solução sugerida aqui.Para manter uma base de código, o que interessa é a "plataforma" em que o código está sendo executado. Para mim, essa "plataforma" pode ser três coisas diferentes:
A forma de verificar a plataforma:
Nota:
Isso deve ser executado somente depois que cordova.js foi carregado (body onload (...), $ (document) .ready (...))
'ontouchstart' em document.documentElement estará presente em laptops e monitores de desktop que possuem uma tela habilitada para toque, de forma que ele reportaria um navegador móvel, mesmo sendo um desktop. Existem diferentes maneiras de fazer uma verificação mais precisa, mas eu uso porque ainda atende 99% dos casos de que preciso. Você sempre pode substituir essa linha por algo mais robusto.
fonte
typeof cordova !== 'undefined'
vez de pescar uma exceção.Aarons, tente
fonte
A solução de GeorgeW é OK, mas mesmo em um dispositivo real, PhoneGap.available só é verdadeiro depois que as coisas do PhoneGap foram carregadas, por exemplo, onDeviceReady em document.addEventListener ('deviceready', onDeviceReady, false) foi chamado.
Antes disso, se você quiser saber, pode fazer assim:
Esta solução pressupõe que a maioria dos desenvolvedores desenvolve usando Chrome ou Firefox.
fonte
Eu tenho o mesmo problema.
Estou inclinado a adicionar # cordova = true ao URL carregado pelo cliente cordova e testar para location.hash.indexOf ("cordova = true")> -1 em minha página da web.
fonte
O seguinte funciona para mim com o PhoneGap / Cordova mais recente (2.1.0).
Como funciona:
Vantagens:
Desvantagens:
==
Crie um novo projeto PhoneGap em branco. Na amostra index.js fornecida, substitua a variável "app" na parte inferior por:
fonte
Eu me deparei com esse problema há vários meses, ao iniciar nosso aplicativo, porque queríamos que o aplicativo
browser-compatible
também fosse " " (com o entendimento de que algumas funcionalidades seriam bloqueadas nesse cenário: gravação de áudio, bússola, etc.).A única
100%
solução (e eu insisto na condição de cem por cento) para pré-determinar o contexto de execução do aplicativo foi esta:inicializar uma variável JS "sinalizador" para verdadeiro e alterá-lo para falso quando em um contexto totalmente web;
portanto, você pode usar uma chamada como "
willIBeInPhoneGapSometimesInTheNearFuture()
" (que é PRE-PG, é claro que você ainda precisa de um método POST-PG para verificar se você pode chamar APIs de PG, mas esse é trivial).Aí você diz: "
but how do you determine the execution context
?"; a resposta é: "você não faz" (porque eu não acho que você pode confiar, a menos que aquele pessoal brilhante do PG faria isso em seu código API);você escreve um script de compilação que faz isso por você: uma base de código com duas variantes.
fonte
Não é realmente uma resposta para a pergunta, mas quando eu testo em um navegador de desktop, apenas defino um valor de armazenamento local para fazer o navegador carregar o aplicativo, apesar de o dispositivo não disparar.
fonte
Outra opção seria usar a pasta merges , veja a imagem abaixo.
Você pode adicionar arquivos específicos da plataforma / substituir os padrão.
(deve funcionar em alguns cenários)
Em outras palavras: em vez de detectar o navegador, você simplesmente não inclui certos arquivos para compilar / anexar certos arquivos apenas para iOS.
fonte
Detecta o navegador da área de trabalho mesmo se a emulação do dispositivo estiver ativa
Funciona em máquinas Windows e Mac. Precisa encontrar uma solução para linux Ver detalhes
fonte
Na verdade, descobri que uma combinação de duas das técnicas listadas aqui funcionou melhor. Em primeiro lugar, verifique se o cordova / fone de ouvido pode ser acessado e também se o dispositivo está disponível. Igual a:
fonte
Experimente esta abordagem:
fonte
Eu uso uma combinação do que GeorgeW e mkprogramming sugeriu:
fonte
Eu acho que de alguma forma eles não são tão diferentes, são? Ha Ha ... não é engraçado. Quem não achou que isso não seria um problema? Esta é a solução mais simples para suas considerações. Envie arquivos diferentes para o seu servidor e depois para o PhoneGap. Eu também iria temporariamente com a http: verificação sugerida acima.
Meu interesse é aumentar a barra de navegação dos navegadores, então, na verdade, posso simplesmente excluir a tag do script isolado e pressionar reconstruir [no DW] (haverá alguma limpeza para implantação de qualquer maneira, então essa pode ser uma dessas tarefas). De qualquer forma, sinto é uma boa opção (considerando que não há muito mais disponível) de forma eficiente apenas comentar coisas manualmente com isMobileBrowserAndNotPhoneGap ao enviar para PG). Novamente, para mim, na minha situação, irei simplesmente deletar a tag do arquivo (código isolado) que empurra a barra de navegação quando é um navegador móvel (será muito mais rápido e menor). [Então, sim, se você puder isolar o código para essa solução otimizada, mas manual.]
fonte
Ligeiramente modificado, mas funciona perfeitamente para mim sem problemas.
A intenção é carregar o Cordova apenas quando estiver em um dispositivo embutido, não em um desktop, então evito completamente o Cordova em um navegador de desktop. O teste e o desenvolvimento da IU e do MVVM são muito confortáveis.
Coloque este código, por exemplo. no arquivo cordovaLoader.js
Então, em vez de incluir o próprio cordova javascript, inclua cordovaLoader.js
Facilite seu trabalho! :)
fonte
fonte
Apenas para obter informações como no PhoneGap 3.x Mobile Application Development Hotshot
e na estrutura YASMF
https://github.com/photokandyStudios/YASMF-Next/blob/master/lib/yasmf/util/core.js#L152
fonte
Eu estava tentando com os objetos da janela, mas não funcionou porque estava abrindo o url remoto no InAppBrowser. Não foi possível fazer isso. Portanto, a melhor e mais fácil maneira de fazer isso é anexar uma string ao url que você precisa abrir no aplicativo phonegap. Em seguida, verifique se o local do documento tem uma string anexada a ele.
Você verá que uma string é adicionada ao url "#phonegap". Então, no url do domínio, adicione o seguinte script
fonte