PWA: Aprenda a criar um com Rails em 15 minutos
Será que todo sistema precisa de um aplicativo mobile? 🤔
Quantos aplicativos você baixou e utilizou apenas uma vez?
Muitos desenvolvedores acabam optando por criar um APP Mobile para seu produto porque querem que seus clientes tenham acesso fácil, rápido e até mesmo offline a ele, porém nem sempre é necessário fazer esse investimento de tempo e dinheiro para ter tudo isso.
Um caminho alternativo que vem ganhando força é transformar o seu site em um PWA (Progressive Web App) através da inclusão de alguns arquivos simples.
Fazendo isso, você deixará o seu site mais amigável ao mundo mobile, permitindo que o usuário instale-o (crie um ícone de fácil acesso na tela do mobile), use os recursos Offline e etc.
O que é PWA?
Explicando de forma sucinta, um pwa é uma aplicação web que entrega ao usuário uma experiência semelhante a de um app mobile.
Segundo definições do google um pwa deve ser:
- Confiável – Carregar instantaneamente e funcionar mesmo que o usuário esteja offline.
- Rápido – Responder rapidamente a interações do usuário.
- Envolvente – Ser como um app nativo, oferecendo uma experiência de usuário imersiva.
O que vamos criar (aprenda na prática)
Desenvolveremos uma aplicação que exibirá informações sobre o que você encontra no Onebitcode.
Nela será aplicado a metodologia pwa, possibilitando a instalação em dispositivos mobile e também a configuração de uma página de resposta para quando o usuário não estiver conectado a internet. Para isso vamos utilizar uma gem chamada ServiceWorker::Rails.
Obs: No final tem um GIF para você ver o resultado final do projeto, bora aprender na prática?
Ferramentas
- • Ruby 2.5
- • Rails 5.2
- • Gem ServiceWorker::Rails
- • Gem MaterializeCSS
Passo a Passo
Início
Neste tópico você criará e realizará as configurações iniciais do projeto.
1- Crie uma nova aplicação chamada pwa
|
1 |
rails new pwa |
2- Adicione as gems materializecss, jquery-rails e serviceworker-rails ao Gemfile do projeto.
|
1 2 3 |
gem 'materializecss' gem 'jquery-rails' gem 'serviceworker-rails' |
A gem materializecss ajudará na estilização do projeto.
3- Instale as gems com o comando
|
1 |
bundle |
4- Inclua o javascript das gems adicionadas substituindo o código de app/assets/javascripts/application.js por
|
1 2 3 4 5 6 |
//= require jquery //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . //= require materialize |
5- Agora, inclua os estilos da gem materializecss no arquivo app/assets/application.css
|
1 2 3 4 5 |
/* *= require_tree . *= require_self *= require materialize */ |
Páginas
Após realizar as configurações iniciais, construa as páginas que estarão disponíveis na aplicação.
1- Crie o controller Pages com algumas actions
|
1 |
rails g controller Pages home blog courses bootcamp |
2- Defina a raiz da aplicação adicionando a config/routes.rb
|
1 |
root to: 'pages#home' |
3- Substitua o código de app/views/layouts/application.html.erb por
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Pwa - Onebitcode</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h1 class="header center-align"> Onebitcode </h1> <%= yield %> </div> </body> </html> |
Você adicionou metatag viewport para que a responsividade da aplicação se adeque a tela de dispositivos menores como smartphones.
4- Altere o código de app/views/pages/home.html.erb para
|
1 2 3 4 5 6 |
<div class="collection with-header"> <div class="collection-header"><h4>Conteúdos</h4></div> <a href="pages/blog" class="collection-item">BLOG</a> <a href="pages/courses" class="collection-item">CURSOS</a> <a href="pages/bootcamp" class="collection-item">BOOTCAMP</a> </div> |
Neste arquivo você listou alguns conteúdos presentes no Onebitcode.
Dando continuidade, é preciso adicionar a descrição de cada tipo de conteúdo.
5- Adicione a descrição do conteúdo Blog substituindo o código de app/views/pages/blog.html.erb por
|
1 2 3 4 5 6 7 8 9 |
<h3>Blog</h3> <div class="row"> <div class="col l10"> <p>Nossa atividade inicial e que cresce a cada dia são os conteúdos gratuitos direcionados a todos do blog e das redes sociais do One Bit Code.</p> <p>São conteúdos técnicos e não-técnicos em textos, vídeos, talks ao vivo e podcasts, criados para levar a todos um excelente material que de alguma forma possa auxiliá-lo em sua carreira ou estudos.</p> </div> </div> <p class="center-align"> <a href="/" class="btn waves-effect center-align">Voltar</a></p> |
6- Para adicionar a descrição do conteúdo Cursos altere o código de app/views/pages/courses.html.erb para
|
1 2 3 4 5 6 7 8 9 |
<h3>Cursos</h3> <div class="row"> <div class="col l10"> <p>O OneBitCode também traz conteúdos em formato de curso para que você possa ter um melhor acompanhamento do que foi ensinado e registrar seu aprendizado no blog.</p> <p>Nesta seção temos <a href="https://onebitcode.com/cursos/">cursos</a> gratuitos e pagos, e em breve teremos muito mais conteúdos disponíveis para diversos níveis de conhecimento.</p> </div> </div> <p class="center-align"> <a href="/" class="btn waves-effect center-align">Voltar</a></p> |
7- Insira a descrição do conteúdo Bootcamp substituindo o código de app/views/pages/bootcamp.html.erb por
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h3>Bootcamp</h3> <div class="row"> <div class="col l10"> <p>O Bootcamp Super Full Stack é um curso intensivo de 6 meses onde desenvolvemos 10 APPs entre Twitter, Slack, Chatbot, entre outros.</p> <p>O foco é Ruby on Rails, mas adaptamos cada APP para a melhor e mais nova tecnologia para que o aluno obtenha um amplo conhecimento na área (ex.: Chatbot com Sinatra).</p> <p>Além disso, temos um grupo fechado no Slack com mais de 150 alunos trocando experiências 24 horas por dia.</p> <p>Curtiu essa imersão no mundo Super Full Stack? Então <a href="https://super.onebitcode.com/bootcamp">conheça o Bootcamp Super Full Stack.</a></p> </div> </div> <p class="center-align"> <a href="/" class="btn waves-effect center-align">Voltar</a></p> |
SSL
Quando estamos criando PWAs é obrigatório o uso do certificado ssl, então vamos forçar o uso nas configurações do Rails.
1- Para exigir que todas requisições sejam feitas utilizando ssl vá até o arquivo config/environments/production.rb e adicione a seguinte instrução
|
1 2 3 4 5 6 7 8 |
Rails.application.configure do # ... # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. config.force_ssl = true # ... end |
Obs: Lembre-se de adicionar um certificado ssl ao ambiente de produção antes de realizar o deploy.
ServiceWorker::Rails
Agora você irá instalar a gem serviceworker-rails, que através de poucos passos permite transformar uma aplicação em um Progressive Web App.
1- Adicione a gem ao seu Gemfile
|
1 |
gem "serviceworker-rails" |
2- Instale a gem executando
|
1 |
bundle |
A gem disponibiliza um generator para criar alguns arquivos necessários.
3- Rode o generator
|
1 |
rails g serviceworker:install |
Ele criará os seguintes arquivos:
• config/initializers/serviceworker.rb – Para configurações da aplicação
• app/assets/javascripts/serviceworker.js.erb – Um serviceworker com algumas estratégias. Ele é capaz de interferir em requisições e exibir uma página específica quando o usuário não estiver conectado.
• app/assets/javascripts/serviceworker-companion.js – Arquivo que registra o serviceworker no navegador.
• app/assets/javascripts/manifest.json.erb – Arquivo que possui algumas meta informações da aplicação. O navegador utiliza elas para instalar sua aplicação em um dispositivo mobile.
• public/offline.html – A página html que será exibida quando o usuário não estiver conectado a rede.
Ajustando o pwa
Neste ponto você já tem uma aplicação pwa. Para finalizar faça os seguintes ajustes.
1- Adicione uma mensagem em português para a página offline indo até public/offline.html e alterando seu conteúdo para
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html> <head> <title>Você não está conectado</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body { background-color: #EFEFEF; color: #2E2F30; text-align: center; font-family: arial, sans-serif; margin: 0; } div.dialog { width: 95%; max-width: 33em; margin: 4em auto 0; } div.dialog > div { border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; border-top: #B00100 solid 4px; border-top-left-radius: 9px; border-top-right-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); } h1 { font-size: 100%; color: #730E15; line-height: 1.5em; } div.dialog > p { margin: 0 0 1em; padding: 1em; background-color: #F7F7F7; border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #999; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); } </style> </head> <body> <!-- This file lives in public/offline.html --> <div class="dialog"> <div> <h1>Você não está conectado</h1> <p>Por favor, tente reconectar-se a internet!</p> </div> </div> </body> </html> |
Depois que você acessar a aplicação pela primeira vez, o conteúdo da página offline ficará salvo em cache.
Caso tente acessar alguma página sem conexão com a internet, a página offline.html será exibida
2- Agora você irá ajustar algumas informações no arquivo app/assets/javascript/manifest.json.erb
Altere o valor de “name”: para
|
1 |
"name": "Onebitcode Progressive Rails App", |
E altere o valor de “short_name”: para
|
1 |
"short_name": "Onebitcode PWA", |
Instalando a Aplicação
Nesta última etapa você irá instalar e testar o resultado de sua aplicação.
1- Faça o download e instalação do ngrok através deste link.
Com ele você conseguirá acessar sua aplicação no mobile (basicamente ele permite que você acesse pela internet um servidor que esteja rodando local na sua máquina) 😁
2- Levante sua aplicação com o comando
|
1 |
rails s |
3- Abra outra janela do terminal (vá até onde o ngrok foi instalado) e execute o ngrok com o comando
|
1 |
./ngrok http 3000 |
4- Sua aplicação pode ser acessada através de seu dispositivo mobile através da url https fornecida pelo ngrok
Veja como ficou a instalação e utilização da aplicação:
Conclusão
Neste artigo você conheceu alguns aspectos de uma grande novidade no mundo da programação, percebeu como é fácil transformar uma aplicação Ruby on Rails em um pwa e pôde observar como isso funciona na prática.
Encontre este projeto no Github:
https://github.com/Leoxxid/pwa
O que achou dessa nova metodologia?
Utilize os comentários para compartilhar sua opinião.
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!
Fique por dentro de todos os conteúdos o/
Nossas redes sociais:
📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
📱 • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode
Nossos cursos:
🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • https://onebitcode.com/ryan-single-dating-site-graphic-designer-brooklyn-new-york/
⚙ • dating services long island ny
🐞 • Minicurso de Testes para Ruby on Rails com RSpec
Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
Muito legal Leo!
É possível fazer uma app PWA acessando dados de SGBD de uma app em produção? Digo, um app Rails já em produção, e a app PWA acessando esses dados?
Sim, e sem a necessidade de mais nenhum passo. O que foi feito na publicação também pode ser aplicado para qualquer página dinâmica!!!
Boa tarde.
Eu tive o seguinte erro: Tunnel 86a4ed0d.ngrok.io not found
Talvez seja devido a minha versão do Rails ? (5.1.6)
Rafael, isso acontece quando o endereço que você está tentando acessar não existe. Por favor, confira se você copiou o endereço que aparece depois do comando ngrok http 3000 de forma correta.
Parabéns e muito obrigado por compartilhar a novidade! Muito show.
Gostaria de saber se tem como usar um banco de dados SQlite offline. Algo como o usuário quando está offline ele pode continuar utilizando o app normalmente e quando ele voltar com uma conexão com a internet essas alterações são enviadas para o servidor. Tem como?
De uma olhada neste artigo:
https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
Nossa, brigadaço pelo tutorial, tava precisando mesmo!
Uma dúvida. Eu buildo meu front angular dentro da pasta public servida no rails. E aí a index.html do angular é onde fica o HEAD. Além de adaptar esse cabeçalho, posso seguir o restante do tutorial sem problemas? Ou só funciona se eu usar as controllers e views do rails?
Bom dia Leonardo..estou tendo ese erro e não consigo consertar…
Mostrando /mnt/d/OneBitCode/pwa/app/views/layouts/application.html.erb onde a linha 6 foi criada:
undefined local variable or method `csp_meta_tag’ for #
Did you mean? csrf_meta_tag
csrf_meta_tags
Fonte extraída (em torno da linha 6 ):
Pwa – Onebitcode
Meu RAILS é o 5.1.6
Resolvido com o Rails 5.2
Leo esta dando erro
https://www.4shared.com/photo/ghX2uKlQgm/Captura_de_Tela_2018-11-05_as_.html
E ai Lucas, beleza?
Pelo erro parece que você estava com outro servidor ruby ativo (ocupando a porta 3000), pare este outro projeto e suba novamente o do tutorial 🙂
Bom dia Léo tudo bem…tudo funcionou perfeitamente…..Obrigado.
Quero só tirar uma dúvida…..minhas outras apps que tenho posso aplicar essas instruções que acessaremos tbm e meus apps serão como se fosse app de celular?
E ai Carlos 🙂
Pode sim, valeu por acompanhar o tutorial.
Fala my friend, blz? Rapaz ainda estou com uma dúvida… como é que no final das contas isto vai virar um aplicativo onde pode ser “instalado” no celular da pessoa.
Testar por uma url em um navegador do celular ok, mas o que preciso é do aplicativo mesmo… seja rodando pelo navegador mas sem o aspecto do navegador se é que me entende
Como gerar essa aplicação pwa em uma aplicação instalável mesmo no celular? Não pode ficar rodando pelo navegador com a barra de navegação
E ai Rodrigo, beleza?
Dá uma olhada no Gif no final do post, lá você pode ver que no resultado final o APP é instalado no mobile, e não aparece nenhuma barra do browser ou qualquer coisa assim.
Inclusive, depois de instalado o APP (dependendo da configuração) ele pode até mesmo ser usado offline, então fica bem transparente.
Inclusive, essa semana liberamos um curso sobre isso: https://super.onebitcode.com/aula1
Grande abraço
Olá Léo.
Sou fã do seu blog. Já aprendi muito aqui.
Pela primeira vez não consegui produzir o resultado esperado. Estou com um erro no application.js, na linha
//= require activestorage
Parece que não encontra o o activestorage.js
O que pode estar errado? Como posso conseguir este arquivo.
Pode me ajudar?
Obrigado
Obrigado. O problema foi resolvido com atualização do rails.
E ai Almir, beleza?
Que bom que deu certo 🙂
Olá Léo, eu novamente (rs)
Sabe se há alguma incompatibilidade entre gem “serviceworker-rails” e gem “omniauth-facebook”.
Tentei utilizar as duas juntas e tenho a resposta do facebook: “The parameter app_id is required”
Eu testei a técnica do PWA e funcionou direitinho. Depois acrescentei o devise e ominiauth e este não funcionou.
Já chequei o código e está exatamente igual a outra aplicação teste do “omniauth-facebook”.
Você já fez algo com os dois juntos?
Obrigado.
Opa e ai Almir, beleza?
Acredito que não exista ligação entre o erro e a configuração do PWA.
Verifique se você configurou corretamente as credenciais do facebook no seu APP 🙂
Valeu \o
Oi, funcionou aqui, as páginas carregam mais rápido depois da primeira vez.
mas a pagina offline criada não apareceu aqui. Nem o botão de baixar o icone para a área de trabalho =/
No caso se eu preferir usar o boostrap no lugar do MaterializeCSS, eu simplesmente troco a gem ?
Excelente artigo, obrigado!
Como vai Leo,
Você tem algum conteúdo sobre “push notifications”?
Um abraço.
E ai Almir, beleza?
Poxa ainda não, mas é uma boa sugestão o/