Jump to content

Recommended Posts

Boa tarde,

 

Ao entrar no site da https://www.pokedex.org ou do https://dev.opera.com, dá para instalar o site como app no Chrome para Android, ele até aparece na galeria de apps, e tem a opção de desinstalar, então o site meio que vira um aplicativo, gostaria de saber como faço para deixar meu site assim, para instalar meu site no meu Android.

 

Já tentei de tudo, já estou usando o arquivo manifest.json em meu site http://marchi.esy.es, mais só dá para criar a atalho na tela inicial, fica igual um app, até abre como um app, mais não instala.

Share this post


Link to post
Share on other sites

Cara, não adianta ficar replicando seu post para chamar alguém.

Se ninguém comentou ainda, é porque não sabemos como fazer isso.

 

Na verdade tu já tentou procurar no Google alguma coisa sobre isso? Não tenho muito conhecimento em aplicativos mobile, mas se você quer transformar seu site em um app, no mínimo você vai ter que programar alguma coisa na linguagem mobile... pelo menos para "criar" o app e "chamar" o site dentro dele.

 

:P

  • -1 3

Share this post


Link to post
Share on other sites
1 minuto atrás, rikaschmitt disse:

Cara, não adianta ficar replicando seu post para chamar alguém.

Se ninguém comentou ainda, é porque não sabemos como fazer isso.

 

Na verdade tu já tentou procurar no Google alguma coisa sobre isso? Não tenho muito conhecimento em aplicativos mobile, mas se você quer transformar seu site em um app, no mínimo você vai ter que programar alguma coisa na linguagem mobile... pelo menos para "criar" o app e "chamar" o site dentro dele.

 

:P

Já fiz alguns procedimentos, digamos que ja fiz tudo que vi e não obtive resultado ainda, até ja dei uma olha aqui:

https://imasters.com.br/desenvolvimento/como-criar-seu-primeiro-progressive-web-app-do-zero

 

Mais vlw pelos avisos, vou ficar no aguardo

Share this post


Link to post
Share on other sites

Cara,

 

Tu tá confundindo os apps para Chrome com apps para Android.

Pra realmente instalar algo no Android tu vai precisar da APK, enquanto no Chrome tu só vai empacotar "todo" o teu site em um diretório do PC. São conceitos bem diferentes.

O que tu pode fazer é "converter" a aplicação web para mobile.

Phonegap é uma boa opção.

Espero ter ajudado.

  • +1 1

Share this post


Link to post
Share on other sites
Em 2017-6-10 at 11:35, Marlon Pacheco disse:

Cara,

 

Tu tá confundindo os apps para Chrome com apps para Android.

Pra realmente instalar algo no Android tu vai precisar da APK, enquanto no Chrome tu só vai empacotar "todo" o teu site em um diretório do PC. São conceitos bem diferentes.

O que tu pode fazer é "converter" a aplicação web para mobile.

Phonegap é uma boa opção.

Espero ter ajudado.

Olá Marlon Pacheco

 

Na verdade ele está falando de Progressive Web Apps, é uma forma de construção de sites com algumas técnicas especificas onde o celular(e seu navegador) reconhecem e tratam o site como um aplicativo, permitindo que o site seja instalado(alguns recursos do celular são copiados para o celular inclusive)

 

Mais alguns links que podem ajudar:

https://medium.com/tableless/introdução-aos-progressive-web-apps-ad47ba24cddb

https://developers.google.com/web/progressive-web-apps/

 

  • +1 1

Share this post


Link to post
Share on other sites

Tem um mecanismo que é basicamente um navegador fechado, igual é feito com chromium em sistemas desenvolvidos pra web, mas que devem rodar com o 'instalavel', eu não sei exatamente como funciona, mas é basicamente um navegador modificado pra rodar só o seu site, o site da http://bandamaldita.com.br possui uma parada dessa.

  • +1 1
  • -1 1

Share this post


Link to post
Share on other sites
15 horas atrás, Pita disse:

Olá Marlon Pacheco

 

Na verdade ele está falando de Progressive Web Apps, é uma forma de construção de sites com algumas técnicas especificas onde o celular(e seu navegador) reconhecem e tratam o site como um aplicativo, permitindo que o site seja instalado(alguns recursos do celular são copiados para o celular inclusive)

 

Mais alguns links que podem ajudar:

https://medium.com/tableless/introdução-aos-progressive-web-apps-ad47ba24cddb

https://developers.google.com/web/progressive-web-apps/

 

@Pita, buenas.

 

A confusão q eu fiz foi sobre o Chrome (não atentei para o fato de ele estar falando do Android). Mas mesmo assim ainda não vi um PWA que seja instalado de fato no device.

Como você disse, PWA utiliza de recursos do device através do navegador e isso não é o que o @andjao está procurando.

 

@andjao, fiz os testes nos 2 sites que você comentou, mas nenhum deles aparece na tela de aplicativos para desinstalar, são apenas atalhos na tela inicial do dispositivo.

 

Admito que posso estar errado, pois já tem algum tempo que não me envolvo diretamente em projetos do tipo, mas tento me manter atualizado qto a essas novidades.

Se houver mesmo uma maneira de instalar um app através do navegador, eu gostaria de saber, de vdd.

Em tempo, um ótimo artigo do Sérgio Lopes, da Caelum: https://imasters.com.br/desenvolvimento/progressive-web-apps-palavra-chave-e-web-nao-app/

E uma galeria de PWA: https://pwa.rocks/

  • +1 1

Share this post


Link to post
Share on other sites

Olá @Marlon Pacheco, mas o PWA é isso mesmo, ele apenas cria o icone na tela inicial, não tem uma real instalação. Como falei, o que existe é criar o site de forma especial, informando recursos como JS e imagens que devem ficar em cache para ser acessado mesmo o celular estando offline, etc...

  • +1 1

Share this post


Link to post
Share on other sites

Caras, ele realmente instala, entra no meu site. https://marchi.ml pelo chrome do android, e espera um pouco, ele vai aparecer um pop-up do próprio navegador, e vai pedir para instalar no celular, quando forem ver, o meu site virou um app no cell de vcs, eu consegui transformar meu site em um Progressive Web App, o legal que ele usa Service Worker, ai da para usar offline. Detalher, só funciona se o site for em HTTPS, (com certificado SSL).

Share this post


Link to post
Share on other sites
11 minutos atrás, andjao disse:

Caras, ele realmente instala, entra no meu site. https://marchi.ml pelo chrome do android, e espera um pouco, ele vai aparecer um pop-up do próprio navegador, e vai pedir para instalar no celular, quando forem ver, o meu site virou um app no cell de vcs, eu consegui transformar meu site em um Progressive Web App, o legal que ele usa Service Worker, ai da para usar offline. Detalher, só funciona se o site for em HTTPS, (com certificado SSL).

 

Nenhum popup. Já publicou a alteração?

Share this post


Link to post
Share on other sites

Vamos lá.

Sobre os dois exemplos que você citou, pokedex e opera dev.
Nenhum deles instala um App nativo para Android no seu dispositivo, os dois são PWA's, o que fazem é criar um atalho no seu home screen, usando o Google Chrome como base.

Aqui o print de quando abro eles no meu chrome no android 

IaUtww1.png

 

O1prYnB.png

Pode conferir, os dois, assim como outras dezenas de apps, estão nessa lista: https://pwa.rocks/
Já o seu, não vai aparecer, pois isso quem decide é o Google, baseado na quantidade de acessos que as pessoas fazem ao seu site.

Quanto ao parecer com um app, quem fez se preocupou em criar animações baseadas nas animações do android.
Você pode ver isso no app que o Sergio Lopes publicou no github: https://github.com/sergiolopes/shopping

Share this post


Link to post
Share on other sites
57 minutos atrás, Vinicius Cainelli disse:

Vamos lá.

Sobre os dois exemplos que você citou, pokedex e opera dev.
Nenhum deles instala um App nativo para Android no seu dispositivo, os dois são PWA's, o que fazem é criar um atalho no seu home screen, usando o Google Chrome como base.

Aqui o print de quando abro eles no meu chrome no android 

IaUtww1.png

 

O1prYnB.png

Pode conferir, os dois, assim como outras dezenas de apps, estão nessa lista: https://pwa.rocks/
Já o seu, não vai aparecer, pois isso quem decide é o Google, baseado na quantidade de acessos que as pessoas fazem ao seu site.

Quanto ao parecer com um app, quem fez se preocupou em criar animações baseadas nas animações do android.
Você pode ver isso no app que o Sergio Lopes publicou no github: https://github.com/sergiolopes/shopping

 

Olá @Vinicius Cainelli, isso não tem nada haver com o Google autorizar ou não, isso tem haver como você faz o seu site, existe uma série de regras, como por exemplo, usar https, utilizar worker, etc, quando seguir esses padrões do PWA que será disponibilizada a opção de instalação.

 

Digo que não tem relação com o Google porque o PWA permite no Android, IOS, WindowsPhone, Windows10(sim, desktop), etc, então não depende de aprovação da Google nem do volume de acessos

Share this post


Link to post
Share on other sites
9 minutos atrás, Pita disse:

 

Olá @Vinicius Cainelli, isso não tem nada haver com o Google autorizar ou não, isso tem haver como você faz o seu site, existe uma série de regras, como por exemplo, usar https, utilizar worker, etc, quando seguir esses padrões do PWA que será disponibilizada a opção de instalação.

 

Digo que não tem relação com o Google porque o PWA permite no Android, IOS, WindowsPhone, Windows10(sim, desktop), etc, então não depende de aprovação da Google nem do volume de acessos

Querido, não disse que precisa ser autorizado, e sim mostrado automaticamente.

Exato, qualquer um pode fazer isso, mas para que o navegador mostre de forma automática, quem decide é o Google, (to falando só quando usa o Chrome, não posso falar dos outros).

Sacou?
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Motta
      Google e Oracle decidem na Suprema Corte briga judicial sobre Android
    • By Augusto Developer
      Olá, eu gostaria de uma ajuda, a qual eu não estou conseguindo repetir o laço do PHP para o meu script atual.
       
      Bom, eu tenho u script que gera 25 números aleatórios para assim, gerar o jogo desejado e também eu tenho um campo(input) que é minha $qtd['qtd_cartela']; a qual essa é responsável por gerar a quantidade de números desejados.
       
      Bom, o que eu preciso é quando alguém escolher mais de 1 jogo(cartela), irão gerar 25 números, aleatórios, pois não estou conseguindo gerar mais de um jogo, e mostrar isso através de um foreach ou outro laços do php.
       
      Enfim, quando eu coloco mais de 1 valor, para gerar a combinação, eu  dou um var_dump na minha variável $qtd eu consigo ver que esta mostrando a quantidade desejada, mais nao consigo fazer isso aparecer após escolher o valor desejado.
       
      Resumindo, eu preciso colocar um valor que eu quiser, e mostrar varios números apos submeter meu fomulário.
       
      Obrigado e aguardo ajuda.
       
       
      Meu script:
       
       <?php                 $bingo = filter_input_array(INPUT_POST, FILTER_DEFAULT);                 if(isset($bingo['gerar'])){                     unset($bingo['gerar']);                       if(!empty($bingo['qtd_cartela'] == '')){                         dialog('<b>Ops... preencha o campo cartela!</b>', 'warning');                     }elseif($bingo['qtd_cartela'] == 0 ){                         dialog('<b>Ops... preencha com um valor válido!</b>', 'warning');                     }else{                           $totalNumber = 25;                         $total = '';                          $qtd = $bingo['qtd_cartela'];                                                  for($i = 0; $i < $totalNumber; $i++){                             $numberGenerator = rand(1, 90);                             $total .= $numberGenerator;                         }
                              var_dump($total);                                              //dialog('Sucesso...', 'success');                        }                   }                   ?>                   <form action="" enctype="multipart/form-data" method="post">                     <div class="row">                         <div class="col-md-3">                             <div class="form-group">                                 <label class="form-control-label">NOME DO CONCURSO</label>                                 <input type="text" class="form-control is-invalid" placeholder="" disabled>                             </div>                         </div>                           <div class="col-md-3">                             <div class="form-group">                                 <label class="form-control-label">DATA DO PRÓXIMO CONCURSO</label>                                 <input type="text" class="form-control is-invalid" placeholder="" disabled>                             </div>                         </div>                           <div class="col-md-3">                             <div class="form-group">                                 <label class="form-control-label">PRÊMIO DO CURSO</label>                                 <input type="text" class="form-control is-invalid" placeholder="" disabled>                             </div>                         </div>                           <div class="col-md-3">                             <div class="form-group">                                 <label class="form-control-label">QUANTIDADE DE JOGO</label>                                 <input type="text" name="qtd_cartela" class="form-control" placeholder="Escolha a quantidades de cartelas">                             </div>                         </div>                           <div class="col-md-12 text-right">                             <input type="submit" class="btn btn-success btn-sm" name="gerar" value="Gerar Cartela">                         </div>                     </div>                 </form>  
    • By cheikspirit
      Está chegando a Olivia, um app gratuito que é uma revolução do gerenciamento de finanças pessoais. Uma assistente financeira inteligente e gratuita que te ajuda a fazer mais com seu dinheiro. Para ser um dos primeiros a testar o serviço, basta clicar no link https://www.olivia.ai/r/nouJJzuDEs/d
    • By victor.dsz
      Boa tarde!
      Preciso de ideia ou até exemplo de algum código que simule o funcionamento das camadas de rede segundo o modelo OSI. Tenho um projeto e a ideia é apresentar as informações deste modelo sem que pareça um slide. Exemplo: Desenvolvemos um PHP um código que simula o envio da mensagem e a detecção de erros pelo método CRC. Estava pensando em algum código que pudesse animar algum objeto do meu site, tipo, fazer ele passar de camada em camada com uma explicação. 
       
      Desde já, 
      grato!
       
      Aqui algumas imagens de como estamos fazendo: (ainda se parece com um slide)
       

       

       

    • By Israel Lira
      Por gentileza, preciso de ajuda! estou iniciando aqui na comunidade e recente no flutter. Tenho uma missão de utilizar o json e controller dos inputs. Preciso pelo botão (ADD) sair da Primeira tela redirecionar para a Segunda tela, salvar ao colocar os inputs e retornar para a primeira mostrando (nome e valor). O formulário da Segunda Tela terá campos: nome, telefone, data e valor. Quero manter a função dismissible para termos o efeito de arrastar o item da lista. Segue o que estou fazendo mais com erros.
       
      Não sei como proceder e apanhando a vários dias!
        
      import 'dart:async'; import 'dart:convert'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; void main(){ runApp(MaterialApp( home: Home(), )); } class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { final _toDoController = TextEditingController(); List _toDoList = [SegundaRota]; Map<String, dynamic> _lastRemoved; int _lastRemovedPos; @override void initState() { super.initState(); _readData().then((data) { setState(() { _toDoList = json.decode(data); }); }); } void _addToDo() { setState(() { Map<String, dynamic> newToDo = Map(); newToDo["title"] = _toDoController.text; _toDoController.text = ""; newToDo["ok"] = false; _toDoList.add(newToDo); _saveData(); }); } Future<Null> _refresh() async{ await Future.delayed(Duration(seconds: 1)); setState(() { _toDoList.sort((a, b){ if(a["ok"] && !b["ok"]) return 1; else if(!a["ok"] && b["ok"]) return -1; else return 0; }); _saveData(); }); return null; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Lista de Tarefas"), backgroundColor: Colors.blueAccent, centerTitle: true, ), body: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(17.0, 1.0, 7.0, 1.0), child: Row( children: <Widget>[ RaisedButton( color: Colors.blueAccent, child: Text("ADD"), textColor: Colors.white, onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => SegundaRota()), ); }, ) ], ), ), Expanded( child: RefreshIndicator(onRefresh: _refresh, child: ListView.builder( padding: EdgeInsets.only(top: 10.0), itemCount: _toDoList.length, itemBuilder: buildItem),), ) ], ), ); } Widget buildItem(BuildContext context, int index){ return Dismissible( key: Key(DateTime.now().millisecondsSinceEpoch.toString()), background: Container( color: Colors.red, child: Align( alignment: Alignment(-0.9, 0.0), child: Icon(Icons.delete, color: Colors.white,), ), ), direction: DismissDirection.startToEnd, child: CheckboxListTile( title: Text(_toDoList[index]["title"]), value: _toDoList[index]["ok"], secondary: CircleAvatar( child: Icon(_toDoList[index]["ok"] ? Icons.check : Icons.error),), onChanged: (c){ setState(() { _toDoList[index]["ok"] = c; _saveData(); }); }, ), onDismissed: (direction){ setState(() { _lastRemoved = Map.from(_toDoList[index]); _lastRemovedPos = index; _toDoList.removeAt(index); _saveData(); final snack = SnackBar( content: Text("Tarefa \"${_lastRemoved["title"]}\" removida!"), action: SnackBarAction(label: "Desfazer", onPressed: () { setState(() { _toDoList.insert(_lastRemovedPos, _lastRemoved); _saveData(); }); }), duration: Duration(seconds: 2), ); Scaffold.of(context).removeCurrentSnackBar(); Scaffold.of(context).showSnackBar(snack); }); }, ); } Future<File> _getFile() async { final directory = await getApplicationDocumentsDirectory(); return File("${directory.path}/data.json"); } Future<File> _saveData() async { String data = json.encode(_toDoList); final file = await _getFile(); return file.writeAsString(data); } Future<String> _readData() async { try { final file = await _getFile(); return file.readAsString(); } catch (e) { return null; } } } class SegundaRota extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Segunda Rota (tela)"), ), body: Column( children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(17.0, 1.0, 7.0, 1.0), child: Row( children: <Widget>[ Expanded( child: TextField( controller: _toDoController, decoration: InputDecoration( labelText: "Nova Tarefa", labelStyle: TextStyle(color: Colors.blueAccent) ), ) ), RaisedButton( color: Colors.blueAccent, child: Text("ADD"), textColor: Colors.white, onPressed: _addToDo, ) ], ), ), Expanded( child: RefreshIndicator(onRefresh: _refresh, child: ListView.builder( padding: EdgeInsets.only(top: 10.0), itemCount: _toDoList.length, itemBuilder: buildItem),), ) ], ), body: Center( child: RaisedButton( onPressed: () { Navigator.pop(context); }, child: Text('Retornar !'), ), ), ); } }  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.