Publicar ionic na web

Pessoal... dei uma pesquisada aqui sobre usar ionic na web... A ideia é usar o mesmo código da sua app em ionic para publicar na web e os usuários acessarem via browser...

Bom, fonte principal da minha pesquisa foi esse tópico de fórum: https://forum.ionicframework.com/t/deploy-ionic-app-as-a-website/2845/45


Seguem alguns apps funcionando com ionic na web:

Snaphappi
http://app.snaphappi.com/on-the-go.App/#/app/gallery/all/top-picks

Strappd
https://strappd.org/

American Society of Hematology
http://ashpocketguides.hematology.org
https://itunes.apple.com/us/app/ash-pocket-guides/id1055482799?mt=8
https://play.google.com/store/apps/details?id=org.hematology.pocketguides&hl=en

National Marrow Donor Program
http://hct.bethematchclinical.org
https://itunes.apple.com/us/app/transplant-hct-guidelines/id405310144?mt=8
https://play.google.com/store/apps/details?id=com.nmdp.webView&hl=en




Alguns pontos de atenção:

Usar media query para CSS específico para web.. ou seja, crie um arquivo web.css por exemplo e use @media (min-width: 601px) { <seu CSS aqui> }. Nesse arquivo coloque todo o CSS referente à parte web. Se preferir quebrar em mais arquivos, pode fazer tmb, a ideia é usar o media query para coisas específicas de telas grandes.

Tem que trabalhar margens/paddings e tamanhos de fontes... usando percentuais em margem e padding, e "em" ao invés de "px" nos font-size...

Talvez alguns componentes (combobox/componente de data/sliders/toggle) podem não funcionar... Nesse caso teria que usar um outro componente ou se for só estilo corrigir com CSS

Verificar se login vai funcionar bem... JWT..

Onde usar plugin tem q verificar se é celular: if(window.cordova)
Por exemplo se usar push notification vai ter que fazer esse if para o código de push não rodar na web

Se você salva dados no localstorage de forma aberta, e publicar a app na web pode dar problemas, alguém pode alterar dados ali e "hackear" sua aplicação. Para funcionar direto, tem que de alguma forma criptografar os dados salvos e descriptografar quando precisar, ou salvar os dados em outro lugar.

Tem que ter que testar em vários browsers (Teríamos que fazer isso de qualquer forma, mas aqui é pra ver se o ionic tem alguma limitação)

Sugiro testar nesses browsers:
Chrome
Firefox
IE10+
Microsoft Edge 13
Safari
Safari no IPhone
Chrome no Android

Nos browsers que não funcionar e nos demais browsers que não estão na lista acima, você pode sugerir para o usuário baixar/trocar de browser

O scrool pode não funcionar como esperado com o mouse pois o touch é diferente, mas é possível arrumar.



Tecnicamente falando:

Aqui um cara mostra como ele fez pra rodar:
https://forum.ionicframework.com/t/deploy-ionic-app-as-a-website/2845/40

Outro cara q fez algo:
https://github.com/shprink/ionic-cross-platform-boilerplate

Mas talvez só dar ionic serve já é o suficiente (configurando pra usar a porta correta e talvez outros pequenos ajustes):



De qualquer forma recomendo fazer uma POC com sua aplicação para validar...


Agradeço a Rangel Torrezan que me deu a ideia :)


Abraço!
Adriano Schmidt