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 te damos total liberdade para customizar. Vai ai um código de 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> está chamando um método padrão da PWA _href() que por traz representa o atributo onclick, e passando o path da url, o método consegue te redirecionar pra página desejada.

.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;
}