Solicitar ao usuário que crie um ícone do meu site na tela inicial do seu smartphone. Preciso que quando o usuário entrar no site ele receba uma notificação para criar o icone. Preciso saber o comando que faz isso. Já pesquisei e nada encontrei.
-
O que quer dizer com criar un ícone? Atalho ou ícone?– SergioCommented 29/10/2014 às 16:13
-
Pode ser feito sim, o que ele quer está aqui nesse site pushcrew.com o site pergu ta se o usuário deseja inserir um atalho na tela inicial e ao usuaruario aceitar o site faz isso sozinho.– user49436Commented 24/06/2016 às 22:58
-
Tem jeito sim, utilize o manifest.JSON Segue link com tutorial para implementação: developers.google.com/web/fundamentals/web-app-manifest/…– Sergio GuerjikCommented 24/01/2019 às 11:51
2 Respostas
Informar o utilizador
Para websites não existe tal comando, o controlo do que acontece no dispositivo está no utilizador do mesmo e não no que ele utiliza.
Deverás apresentar uma popup ou algo do género para informar o visitante que pode aceder ao menu X e adicionar um atalho à tela inicial.
alert("Olá, adiciona-me ao teu homescreen fazendo uso do menu principal do teu navegador!");
Também podes ter um texto a detalhar como realizar a tarefa de forma a facilitar a vida ao utilizador:
Como adicionar este website à tela inicial
iOS
Clique no ícone que se parece com uma caixa com um salto seta fora dela (isso também permite que você tweet, imprimir ou enviar a página que você está). Clique em "Adicionar à tela inicial".Android
No Android há algumas maneiras diferentes de conseguir isso:
- Adicionar o website aos favoritos
- Vá para a tela inicial onde deseja adicionar o link / marcador
- Tocar continuamente num espaço vazio até abrir o menu "Adicionar à tela inicial"
- Selecione "Atalhos"
- Selecione "Favoritos"
- Escolha o marcador que você acabou de criar
Dependendo do seu dispositivo e versão do Android, isso pode funcionar:
- Adicionar o website aos favoritos
- Abrir a gestão de favoritos
- Tocar continuamente sobre o marcador do website
- Selecionar "Adicionar à tela Início"
Preparar a página com Icon, nome e cores a usar
Podes é ter a tua página com toda a informação necessária para dar a conhecer ao smartphone o icon e nome a utilizar no caso do utilizador adicionar o web site ao homescreen:
Apple
Link para documentação completa (Inglês)
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Meu Site"/>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
Microsoft
Link para documentação completa (Inglês)
<meta name="application-name" content="Meu Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-TileImage" content="http://www.example.com/windows_tile.png"/>
Outros
<title>Meu Site</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Nota:
O concenso é os navegadores localizarem os icons identificativos das páginas web na raiz do domínio: http://www.example.com/favicon.ico
mas podes especificar outras localizações fazendo uso das meta tags em cima.
Para gerar icons a partir de um só ficheiro, esta ferramenta é excelente.
Desculpe, mas acho que não da via web.
As opções seriam:
- O usuário, utilizando os recursos do smartphone fará isso manualmente
- Você terá que criar um aplicativo nativo android que apenas abra seu site, terá um ícone e abrirá seu site como uma aplicativo, seria como se seu app fosse um 'navegador' (existe esse recurso) e abriria sua página web;
- Você utilizaria algum framework multiplataforma (exemplo phonegap) para criar esse 'app' para visualizar seu site;
Acredito que utilizando o Phonegap ou outra ferramenta multiplataforma (que usa javascript, html5, css e tal) seria mais prático, e não seria custoso (hardware do smartphone) pois só abriria sua página web (já que normalmente esse tipo de aplicativo é mais pesado). Além disso você poderia compilar o mesmo código para outras plataformas como windows phone, firefox os, ios, etc.
O nativo seria mais trabalhoso, porém mais leve (como já dito, pra proposta, não irá interferir no desempenho) e exclusivo para android.
http://phonegap.com/ http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index