Página não encontrada

Páginas que não são encontradas em seu projeto, serão automaticamente redirecionadas para a página de erro, mais conhecida como 404.

Até nela você total liberdade para customizar. Abaixo disponibilamos um código exemplo, para você copiar e colar em seu projeto:

HTML

<div class="error">
  <h1 class="title">Hmmm, não encontramos o que você está buscando.</h1>
  <p class="description">
    Mas não se preocupe, dê uma olhadinha nas nossas novidades.
  </p>
  <a {{ _href('/link-de-novidades') }}>
    Ver novidades
  </a>
</div>

Uma observação sobre o link de redirecionamento: a tag <a> utiliza o método padrão da PWA chamado _href(), que, por trás, substitui o uso do atributo onclick, recebendo o path da URL. Dessa forma, o método realiza o redirecionamento para a página desejada.

Também disponibilizamos abaixo um código css opcional para facilitar na estilização da página de erro.

.error {
  min-height: 500px;
  padding: 28px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.error .title {
  font-size: 33px;
  max-width: 430px;
  text-align: center;
  color: #999;
}

.error .description {
  font-size: 20px;
  max-width: 379px;
  text-align: center;
  margin-top: 24px;
  line-height: 30px;
  color: #444;
}

.error .btn-news {
  margin-top: 40px;
  background: #000;
  width: 200px;
  height: 45px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}