NEXT
GENERATION
APPS Progressive Web Apps
reinventar os Native Apps e os Websites

Teste grátis por 30 dias - Não é necessário cartão de crédito

Service worker

Service workers são a chave principal do PWA. Um service worker é um script que corre no plano de fundo do navegador.Posiciona-se entre o PWA e o servidor. Dependendo da disponibilidade da rede, o service worker, agindo como um proxy, servirá elementos da sua cache ou irá recuperá-los ao longo da rede do servidor. Service workers tornam possível aceder ao seu PWA offline. Entre outras funções, os service workers também são responsáveis pelo recepção de notificações push no seu PWA.

Notificações de Web push:
Firebase e APNs

O seu PWA pode receber notificações push. Essa funcionalidade é suportada pela maioria dos navegadores da Web recentes. Para o Chrome, o Firefox e o Opera, as notificações push são fornecidas pelo Firebase, que é a plataforma da Google. Para o Safari, as notificações são entregues por APNs, a plataforma da Apple.

Notificações de Web push: Firebase e APNs

Capacidades do navegador

O seu PWA é progressivo. Irá sempre oferecer a melhor experiência possível dadas as capacidades do navegador em que está a ser utilizado. Quando mais moderno foi o navegador, melhor é a experiência.

Capacidades do navegador chrome

* Esta funcionalidade irá ficar disponível na GoodBarber brevemente
** Disponível com o Chrome 68
Capacidades do navegador safari

** WebKit Feature Status em Web App Manifest https://webkit.org/status/#specification-web-app-manifest
Capacidades do navegador edge

Capacidades do navegador firefox

Capacidades do navegador opera

* Esta funcionalidade irá ficar disponível na GoodBarber brevemente
Esta tabela é mantida pela GoodBarber  Licence Creative Commons

Framework

Angular

Angular

O seu PWA é desenvolvido sob a versão mais recente e estável de Angular. Angular é uma estrutura alimentada pela Google. Suporta PWA de topo. Oferece experiências semelhantes a apps no navegador de rede: alta performance, offline, instalações com zero passos. O seu PWA é compilado para gerar um código altamente optimizado para as máquinas virtuais de Javascript de hoje. Ao combinar Server Side Rendering para propósitos de SEO e Client Side Rendering para exibição rápida, funcionalidade offline, e fluidez, a GoodBarber oferece-lhe um PWA bastante compreensivo e isomórfico.

Material Angular

O seu PWA é impulsionado por uma nova geração de Angular Material UI Framework. Cada interação que você gera é unificada num estilo moderno. Esta interface é clara, consistente e construída sem falhas através do telemóvel, tablet e desktop. Material Design é uma linguagem visual criada pela Google.

HTTP/2

Seu PWA é servido por HTTP/2. A mais recente e poderosa versão do protocolo http. HTTP/2 suporta compressão de cabeçalho, gestão inteligente de packet streaming, multiplexação de consulta e prioridade. Isto acelera o carregamento da página e reduz a latência.

HTTP/2

O futuro das apps


Shell App

Shell app, é o esqueleto de seu PWA. Este contém a UI e os componentes núcleo para gerar a sua app no navegador. Shell app mantém o UI do seu PWA local, ao passo que o conteúdo é recuperado dinamicamente de uma API. Graças ao app shell, especialmente para visitas repetidas, o seu PWA carrega mais rapidamente, usa o mínimo de dados possível, usa componentes estáticas da cache local, e separa o conteúdo da navegação.

PWA isomórfico

Seu PWA corre com código javascript tanto do lado do cliente como do servidor. O primeiro pedido feito pelo browser é processado pelo servidor. É chamado Service Side Rendering (SSR), mas o PWA também executa computação no navegador, que é chamado Client Side Rendering (CSR). SSR é útil para fins de SEO porque ambos podem indexar uma página completamente processada. O CSR permite que o seu PWA funcione offline já que o Javascript completo do seu PWA é carregado no plano de fundo e armazenado em cache.

API de cabeçalho para gestão de cache local

O seu PWA baixa os recursos da rede somente quando necessário. Desenvolvemos uma API dedicada para gerir respostas de cabeçalho. Um cabeçalho personalizado recupera a última data de modificação dos artigos. Esta informação é obtida com um ping de 45 bytes (o tamanho foi reduzido em 1000) antes de pedir novos arquivos. Se não houver necessidade de retransmitir os recursos solicitados, uma resposta http 304 é enviada pelo servidor e o PWA usa o seu cache local.

padrão PRPL

O seu PWA é construído seguindo o padrão PRPL. Esse padrão é usado para oferecer uma experiência na web móvel mais rápida. Este lida com desafios como condições de rede não confiáveis ou dispositivos móveis subjacentes, aproveitando as funcionalidades modernas da plataforma web para fornecer consistentemente uma boa experiência de usuário. PRPL significa: recursos críticos Push para a rota URL inicial / Renderizar a rota inicial / Pré-cache das restantes rotas / Carregamento demorado e criação das restantes rotas sob pedido. Seguindo esse padrão, a quantidade de tempo necessário para a primeira interação com o seu PWA é mínima. À medida que o utilizador continua a navegar, os recursos são inteligentemente armazenados em cache, melhorando a experiência de primeira classe do seu PWA.

Velocidade


Compressor de imagem optimizado

Para minimizar o consumo banda larga e reduzir o tempo de carregamento, nossos engenheiros desenvolveram um algoritmo dedicado para gerir a compressão de imagens. Cada vez que você carrega uma imagem, várias cópias com diferentes tamanhos são criadas. Cada cópia é compactada com nosso algoritmo que foi codificado para minimizar a perda de qualidade. As cópias são usadas para entregar uma imagem que nunca seja maior que a versão apresentada na tela do utilizador. É a melhor prática para melhorar a qualidade do seu PWA e ficar em conformidade com as recomendações do Lighthouse, carregando imagens rapidamente e consumindo menos dados do celular.

Original Comprimido
ORIGINAL
COMPRIMIDO

CDN

Cada recurso estático do seu PWA (código e imagens Javascript) é distribuído numa rede de entrega de conteúdo (CDN) usando o protocolo HTTP/2. Em qualquer lugar do mundo, o seu PWA será carregado rapidamente. Os recursos estão localizados perto de todos os seus utilizadores finais. Confiamos na rede global do Stack Path. Os recursos são recebidos em centros de dados premium com 10 GB de conexões, localizados em 18 lugares em todo o mundo.

Gestão de fontes assíncronas

No seu PWA, as fontes são carregadas de forma assíncrona para a velocidade da página. Uma vez que as fontes são arquivos de bloqueio de renderização ao criar o conteúdo de uma página da Web, confiamos nas fontes padrão do dispositivo do usuário durante a sua primeira interação. No plano de fundo, o PWA carrega as fontes que faltam e as usa assim que estiverem totalmente carregadas. Enquanto isso, o usuário consegue aceder ao conteúdo em tempo útil.

SEO


Os slugs URL

O modelo de distribuição do seu PWA é o link e o slug é o URL exacto de uma página da Web. Você pode personalizar cada slug do seu PWA, tornando o URL das páginas importantes acessível a SEO. Uma vez que cada página do seu PWA tem um slug dedicado, é possível fazer uma ligação profunda com o seu PWA.

HTTPS

Service workers podem realizar operações muito poderosas no navegador do utilizador. Para assegurar que seu poder é usado para um bom fim, só é possível registar um service worker numa página servida por https. Todas as páginas do seu PWA são servidas por https por defeito. Isto garante que o service worker instalado no navegador não foi adulterado. Também auxilia com o SEO das suas páginas.

Manifest.json

O seu PWA é descrito por um ficheiro JSON chamado Web App Manifest. Este contém a meta-informação necessária para indexar seu PWA numa loja como a Windows, e para instalá-la no dispositivo do usuário. O Web App Manifest é uma especificação estabelecida pelo W3C.

Manifest.json