Criar aplicativos Web hospedados

Artigo
02/16/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Os aplicativos Web hospedados são Universal Windows Platform applications (UWP apps) que permitem aproveitar seus fluxos de trabalho da Web existentes e a implantação contínua para publicar um aplicativo Web responsivo na Windows Store. Você pode começar com uma URL de site preexistente, colocá-la no manifesto do aplicativo e criar um aplicativo direcionado à plataforma Windows. Fácil assim.

Visão geral

Você pode criar um aplicativo Web hospedado com o Visual Studio ou a interface de linha de comando. As duas opções exigem que você tenha um site hospedado que possa ser manipulado com um pacote do aplicativo para descrever como deve ser implantado e que possa ser executado como um aplicativo Web.

Os aplicativos Web hospedados têm acesso completo à plataforma, incluindo chamar APIs do Tempo de Execução do Windows diretamente de um script hospedado em um servidor, aproveitar a integração com a Cortana e usar um provedor de autenticação online. Também há suporte para aplicativos híbridos, pois você pode incluir código local para ser chamado do script hospedado e fornecer com facilidade a navegação do aplicativo entre as páginas locais e remotas.

Aplicativos híbridos

Você tem opções para criar seu aplicativo UWP. O aplicativo pode ser desenvolvido para download da Windows Store e hospedagem total no cliente local, frequentemente chamado de Packaged Web App. Isso permite que você execute seu aplicativo offline em qualquer plataforma compatível. Ou o aplicativo pode ser um aplicativo Web totalmente hospedado que é executado em um servidor Web remoto, geralmente conhecido como Hosted Web App. Mas há também uma terceira opção: o aplicativo pode ser hospedado parcialmente no cliente local e parcialmente em um servidor Web remoto. Chamamos essa terceira opção de Hybrid app, e ela normalmente usa o componente WebView para fazer com que o conteúdo remoto se pareça com o conteúdo local. Aplicativos híbridos podem incluir seu código HTML5, CSS e Javascript em execução como um pacote dentro do cliente de aplicativo local e reter a capacidade de interagir com o conteúdo remoto.

manifoldjs e o manifesto do aplicativo

Uma maneira fácil de transformar seu site em um aplicativo UWP é usar um app manifest e manifoldjs. O manifesto do aplicativo é um arquivo xml que contém metadados sobre o aplicativo. Ele especifica itens como o nome do aplicativo, links para recursos, o modo de exibição, URLs e outros dados que descrevem como o aplicativo deve ser implantado e executado. manifoldjs facilita esse processo, mesmo em sistemas que não oferecem suporte a aplicativos Web. Acesse manifoldjs.com para saber mais sobre seu funcionamento. Você também pode ver uma demonstração sobre manifoldjs como parte desta apresentação Aplicativos Web do Windows 10.

Incluir URLs no manifesto do aplicativo

Você pode definir quais URLs seu aplicativo da Web hospedado pode e não pode incluir. Você faz isso definindo regras de URI de conteúdo do aplicativo (ACURs) no manifesto do pacote do aplicativo. As regras devem incluir a página inicial do aplicativo e outras páginas que você deseja incluir como páginas do aplicativo. Opcionalmente, você pode excluir URLs específicos também.

Há várias formas de especificar uma correspondência de URL nas suas regras:

Um nome de host exato
Um nome de host para o qual um URI com qualquer subdomínio desse nome de host é incluído ou excluído
Um URI exato
Um URI exato que pode conter uma propriedade de consulta
Um caminho parcial e um curinga para indicar uma extensão de arquivo específica para uma regra de inclusão
Caminhos relativos para regras de exclusão

Se o usuário navegar até uma URL que não esteja incluída em suas regras, o Windows abrirá a URL de destino em um navegador.

Veja a seguir alguns exemplos de ACURs.

<uap:ApplicationContentUriRules>
      <uap:Rule Type="include" Match="https://example.com/" />
      <uap:Rule Type="include" Match="https://*.example.com/" />
      <uap:Rule Type="exclude" Match="https://example.com/excludethispage.aspx" />
</uap:ApplicationContentUriRules>

Chamar APIs de Tempo de Execução do Windows

Você pode chamar diretamente as APIs do Tempo de Execução do Windows por meio de JavaScript hospedado no seu servidor, desde que o conteúdo hospedado esteja sendo executado como um aplicativo no Windows.

Para habilitar essa opção, é necessário especificar o atributo (WindowsRuntimeAccess="<<level>>") nas ACURs com um destes valores:

"none" bloqueia todo o acesso a APIs do Tempo de Execução do Windows. Este é o padrão.
"AllowForWebOnly" permite que scripts remotos chamem componentes locais do Tempo de Execução do Windows que estão incluídos no pacote do aplicativo.
"all" oferece aos desenvolvedores acesso de código de servidor a todos os namespaces do Tempo de Execução do Windows e componentes locais.

Veja um tipo de regra de exemplo:

<uap:ApplicationContentUriRules>
      <uap:Rule Type="include" WindowsRuntimeAccess="all" Match="http://example.com/" />
</uap:ApplicationContentUriRules>

Isso proporciona o script em execução em http://example.com/ acesso para namespaces do Tempo de Execução do Windows e componentes personalizados incluídos no pacote. Consulte o exemplo Windows.UI.Notifications.js no GitHub para notificações do sistema.

Integrar comandos de voz da Cortana

Você pode tirar proveito da integração com a Cortana especificando um arquivo de definição de comando de voz (VCD) na sua página html. O arquivo VCD é um arquivo xml que mapeia os comandos para frases específicas. Por exemplo, um usuário pode tocar no botão Iniciar e dizer "Contoso Widgets, mostrar best sellers" para inicializar o aplicativo Contoso Widgets e navegar para a página "best sellers".

Quando você adiciona uma tag de elemento <meta> que lista o local do seu arquivo VCD, o Windows automaticamente faz o download e registra o arquivo de definição de comando de voz.

Veja um exemplo do uso da tag <meta> em uma página html em um aplicativo da Web hospedado:

<meta name="msapplication-cortanavcd" content="http:// example.com/vcd.xml"/>

Para saber mais sobre integração com a Cortana e VCDs, consulte interações da Cortana e Voice Command Defintion (VCD) elements and attributes v1.2.

Usar o agente de autenticação da Web

Você pode usar o agente de autenticação da Web para manipular o fluxo de logon para os usuários se tiver um provedor de identidade online que use protocolos de autenticação e autorização da Internet como OpenID ou OAuth. Especifique os URIs iniciais e finais em uma tag <meta> em uma página html em seu aplicativo. O Windows detecta esses URIs e os transmite para o agente de autenticação da Web para concluir o fluxo de logon. O URI inicial é composto pelo endereço para onde você envia a solicitação de autenticação para o seu provedor de identidade online junto com outras informações necessárias, como ID do aplicativo, um URI de redirecionamento para o qual o usuário é enviado após concluir a autenticação e o tipo de resposta esperado. Seu provedor deverá informar quais são os parâmetros necessários.

Veja um exemplo de uso da tag <meta>:

<meta name="ms-webauth-uris" 
      content="https://<providerstartpoint>?client_id=<clientid>&response_type=token, 
               https://<appendpoint>"/>

Para saber mais, consulte Considerações do agente de autenticação da Web para provedores online.

Novo modelo de segurança

Os aplicativos UWP originalmente usavam uma política de segurança de aplicativo Web específica do Windows. O Windows 10 apresenta um novo modelo de segurança com base no uso do novo padrão do W3C Content Security Policy (CSP). A UWP aplicará automaticamente uma política padrão para o conteúdo local. Mas o desenvolvedor pode modificar essa política e torná-la mais ou menos restritiva conforme necessário. A CSP fornece um cabeçalho HTTP padrão para declarar fontes aprovadas de conteúdo com permissão para serem executadas no aplicativo, incluindo conteúdo JavaScript, estruturas, CSS, quadros HTML, fontes, imagens e objetos que podem ser inseridos como miniaplicativos Java, ActiveX, arquivos de áudio e vídeo. Para saber mais, consulte Política de Segurança de Conteúdo preliminar do W3C.

Recursos de plataforma disponíveis

Os aplicativos da Web hospedados podem acessar a maioria das APIs do Tempo de Execução do Windows, mas há recursos especiais que não estão inerentemente disponíveis. Para saber mais, consulte Declarações de funcionalidades do aplicativo.

Usar Visual Studio

Criar o aplicativo da Web hospedado no Visual Studio é simples. Tudo que você precisa é de um site existente para o host. Usar o Visual Studio também fornece acesso à plataforma universal do Windows completa e todas as APIs com suporte.

Inicie um novo projeto JavaScript do Windows 10 usando o modelo em branco.
Defina o URL da página inicial e regras de URI de conteúdo de aplicativo em package.appxmanifest.
- No explorador de soluções do Microsoft Visual Studio Express, clique com o botão direito do mouse no arquivo package.appxmanifest do aplicativo e selecione Visualizar Designer.
- Especifique os URIs que você deseja incluir ou excluir.
- Em seguida, o Visual Studio atualiza o arquivo de manifesto.
Pressione Executar.

Site Try WinJS

O site Try WinJS é parte integrante do projeto WinJS e cria aplicativos UWP. Ele oferece aos desenvolvedores a possibilidade de ter experiência prática trabalhando com WinJS e seus controles da interface do usuário, assim como seria no jsfiddle. Cada controle da interface do usuário principal é demonstrado com código HTML/CSS/JS que você pode alterar e ver instantaneamente os efeitos dessas alterações. Um recurso Playground é fornecido para permitir que você teste seus próprio código HTML/CSS/JS usando a biblioteca WinJS. Os links oferecem acesso ao GitHub (o lar do código-fonte do WinJS), o gateway do WinJS no Centro de Desenvolvimento do Windows, além de acesso a vídeos sobre o uso do WinJS.

Há planos ativos para adicionar ainda mais conteúdo novo ao site Try WinJS no futuro.