PWA com Delphi

PWA ou Progressive Web Apps (Aplicativos Web Progressivos), oferecendo uma experiência semelhante à de aplicativos nativos com a flexibilidade da web. Eles combinam o melhor dos dois mundos: são acessíveis como sites, mas podem ser instalados, funcionar offline e utilizar recursos do dispositivo como se fossem apps nativos.

O que é e quais as vantagens de um PWA?

São uma alternativa aos aplicativos tradicionais que são instalados diretamente nos dispositivos. A ideia é ter uma aplicação web responsiva que possa, de certa forma, ser instalada no seu dispositivo Android, iOS, Windows ou Linux por meio de algumas configurações especiais. Isso dá ao PWA alguns acessos adicionais a recursos e permissões nativas dos dispositivos Android ou iOS.

O usuário vai configurar esse PWA como se fosse um atalho na tela inicial do Android, iOS ou até mesmo do Windows ou Linux. Ao clicar nesse atalho, ele será aberto como se fosse um app nativo, embora continue utilizando o navegador por baixo dos panos.

Entre os principais benefícios de uma PWA, podemos destacar:

• Capacidade de instalação como se fosse um app nativo
• Offline: Funciona mesmo sem conexão com a internet, usando cache inteligente (via Service Workers).
• Pode lidar com cache
• Pode ser distribuído em lojas (como a Play Store)
• Pode ser executado no navegador
• Pode ser instalado no: Windows, macOS, Linux, Android e até mesmo em um Xbox
• Responsividade. Se adapta a qualquer tamanho de tela, seja celular, tablet ou desktop.
• Exibição em tela cheia
• Atualizações automáticas: Sempre entrega a versão mais recente sem intervenção do usuário.
• Deve sempre usar HTTPS para garantir a integridade dos dados e a segurança da navegação.
• Pode usar push notification, como apps nativos.

Quem usa PWA

Sites como Twitter, Pinterest e Starbucks usam PWAs para permitir que usuários tenham experiências rápidas e completas, mesmo com conexões lentas ou instáveis.

Criando uma PWA com Delphi

O TMS WEB Core facilita a criação de PWAs ao fornecer um template específico: “TMS WEB PWA Application” (acessando o menu File > New > Other > TMS Web > TMS WEB PWA Application). Ao selecionar este template, seu projeto já incluirá arquivos essenciais como ServiceWorker.js e manifest.json, além de ícones para diferentes plataformas.

Ao criar um novo projeto com suporte a PWA, os arquivos essenciais como ServiceWorker.js, manifest.json e ícones já vêm prontos para uso. Com eles, é possível:

• Garantir a instalação da aplicação na tela inicial do dispositivo
• Controlar o comportamento offline com Service Workers
• Exibir a aplicação em modo tela cheia
• Personalizar o nome, ícone e tema exibidos ao usuário

Testando sua PWA

Para verificar se sua aplicação está pronta para ser considerada uma PWA, a ferramenta Lighthouse, disponível no Google Chrome, pode ser usada para realizar uma auditoria completa. Ela verifica critérios como:

• Conexão segura (HTTPS)
• Existência e validade do manifest.json
• Funcionamento correto do Service Worker
• Comportamento de instalação e exibição da aplicação

Convertendo Projetos Web Existentes

Se você já possui um projeto com TMS WEB Core, a conversão para PWA é simples:

1. Adicione os arquivos necessários: Inclua ServiceWorker.js, manifest.json e os ícones ao seu projeto.
2. Atualize o HTML: Modifique o arquivo Project.html para referenciar o manifest.json e registrar o Service Worker.
3. Configure o servidor: Certifique-se de que sua aplicação está sendo servida por HTTPS.

Vídeo de demonstração

Para demonstrar na prática como é simples criar um PWA com o Delphi, criamos um vídeo demonstrando passo a passo como realizar todos os processo de forma rápida e facil com o Delphi. Segue o link do vídeo: Code4Delphi – YouTube

Repositório no GitHub: https://github.com/Code4Delphi/pwa-delphi

Considerações Finais

Com o TMS WEB Core, desenvolver PWAs no Delphi torna-se uma tarefa acessível, permitindo que você leve suas aplicações a um novo patamar de usabilidade e alcance. Aproveite as vantagens das PWAs e ofereça aos seus usuários uma experiência rica e moderna.

Por hoje é só, deixe o seu comentário. Valeu!