Aplicativos web são aplicativos construídos usando tecnologias padrões da Web. Eles funcionam em qualquer navegador web moderno, e podem ser desenvolvidos usando as suas ferramentas favoritas. Algumas características que distinguem aplicativos web de websites: aplicativos são instalados por um usuário, eles são independentes e não precisam sempre do chrome de uma janela de um navegador, e eles podem ser feitos para executar offline. Gmail, Twitter, e Etherpad são aplicativos web.
O projeto Open Web Apps propõe algumas pequenas adições para os sites existentes para transformá-los em aplicativos que executam em ambientes computacionais ricos, divertidos e poderosos. Estes aplicativos executam em navegadores desktop e dispotivos móveis, e são mais fáceis de serem descobertos e acessados pelo usuário do que sites. Eles tem acesso a um crescente conjunto de características, tais como a sincronização entre todos os dispositivos do usuário.
Antes de você começar
Se você é um desenvolvedor de primeira viagem querendo começar a desenvolver aplicativos web então você pode verificar a implementation state of the API.
Publicando o aplicativo
A única coisa que você tem que fazer para criar um aplicativo Web a partir de um site é adicionar um manifesto. O manifesto é um arquivo JSON que descreve o seu aplicativo, incluindo seu nome, seus ícones, e uma descrição legível.
O manifesto deve ser hospedado no mesmo domínio que o seu website, e tem que estar munido com um tipo de conteúdo de application/x-web-app-manifest+json (Nota: isto não é imposto atualmente pelo Firefox, mas é necessário para a Marketplace). Para todos os detalhes sobre o manifesto consulte a documentação, e para ajudar a começar você pode tentar o online manifest checker.
Política da mesma origem
É importante observar que cada aplicativo deve ser hospedado em seu próprio domínio. Aplicativos diferentes não devem compartilhar o mesmo domínio. Uma solução aceitável é hospedar cada aplicativo de um subdomínio diferente, por exemplo. Veja FAQs about apps manifests para maiores informações sobre as origens.
Checando se o aplicativo está instalado
Quando um navegador web carrega a página de um aplicativo, a página precisa lidar com o caso em que o usuário não tem o aplicativo instalado. Você pode checar se o aplicativo está instalado chamando o método getSelf(), desta forma:
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
}
}
request.onerror = function() {
alert('Error checking installation status: ' + this.error.message);
}
Instalando o aplicativo
Você pode distribuir o seu aplicativo diretamente do seu site. É também uma boa idéia testar a instalação a partir de seu site, só para ter certeza que o seu manifesto valida, antes de você submetê-lo para a Mozilla Marketplace.
Somente construa um botão ou link que invoca este JavaScript:
var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
}
request.onerror = function() {
// whoops - this.error.name has details
}
Invocando navigator.mozApps.install() faz com que o navegador carregue o manifesto e pergunte ao usuário se ele quer instalar a aplicação. Se o usuário aprovar a instalação, o aplicativo é instalado no navegador.
O segundo parâmetro é um install_data argumento para navigator.mozApps.install(), para gravar alguma informação nos dados do usuário sobre as aplicações instaladas. Essa informação pode ser sincronizada para os outros dispositivos dele, e pode ser acessada pela sua aplicação usando o método getSelf() (veja Checking whether the app is installed). Por exemplo:
navigator.mozApps.install(
"https://path.to/my/example.webapp",
{
user_id: "some_user"
}
);
Promovendo o aplicativo
Mozilla está construindo uma marketplace de aplicativos que toma conta da descoberta, revisão, avaliação e faturamento, usando uma infraestrutura aberta que pode ser usada por terceiros para criarem suas próprias lojas. Mas não é requerido que você liste o seu aplicativo em uma loja.
Se você quer que as pessoas paguem pelo seu aplicativo, Marketplace payments.
Espera-se que a Mozilla App Marketplace esteja disponível em breve. Você também pode sign up for the Apps Developer newsletter para ter notícias sobre o progresso da Mozilla App Marketplace, além de dicas e conselhos sobre como criar aplicativos.
Executando offline e usando APIs avançadas do dispositivo
Navegadores web modernos adicionaram uma grande quantidade de excelente recursos que permitem que sua aplicação execute offline ou acesse os recursos do dispositivo. Abaixo estão alguns links úteis:
- Running offline: detalhes e demos que monstram como usar o HTML5 AppCache
- Online and Offline Events: detectando quando o dispotivo muda entre os estados online e offline.
- Using audio and video na sua aplicação
- Drawing Graphics with Canvas
- Drawing 3D Graphics with WebGL
- Using Content-Editable para criar editores de texto completos e rápidos.
- Using Files from Web Applications com a HTML5 File API
- Using Drag and Drop para arrastar itens entre e dentro de aplicações web.
- Detecting Device Orientation
Gravando dados localmente
A API localStorage provê um armazenamento na forma de chave-valor como forma de gravar dados que você pode usar para manter o controle sobre os dados do usuário entre as visitas ao seu aplicativo. Se o usuário tem um navegador moderno, como o Firefox 4 ou posterior, ou Google Chrome, você pode usar também o IndexedDB, uma forma de armazenamento client-side estruturada e de alta performance.
Se você tem dados que devem ser compartilhados entre todas as instâncias do seu aplicativo através de todos os dispositivos que o usuário usa, então você deve usar o parâmetro install_data na função install(), como descrito acima.
Exemplos
Alguns exemplos de aplicativos web abertos:
- MozillaBall Example (Usa uma API velha, veja Old API and the new API para uma comparação)