Aplicações Web no Windows 10 (Hosted Web Apps)

A partir da versão 8 do Windows e Windows Phone, foi disponibilizada a opção de desenvolver aplicativos HTML/Javascript. Dessa forma, os desenvolvedores poderiam aproveitar seus conhecimentos em HTML e Javascript para criar aplicações para a plataforma Microsoft.

Hosted Web App
Hosted Web App

Agora, com o lançamento do Windows 10, não só temos a possibilidade de continuar desenvolvendo com HTML/Javascript como também criar os chamados Hosted Web Apps (ou somente Web apps, do Universal Windows Platform Bridge), aplicativos web instalados no computador do usuário. E para deixar claro, o Hosted Web App não é somente uma Web View e sim um aplicativo local cuja página inicial é uma página na Web.

Esse é o primeiro de uma série de artigos sobre Hosted Web Apps. E vocês podem contribuir mandando suas dúvidas, comentários e sugestões para abordarmos aqui.

Antes de começar

Antes de começarmos, lembre-se que estamos lidando com recursos do Windows 10. Portanto, devemos ter disponível uma versão do novo Sistema Operacional da Microsoft (versão preview disponível gratuitamente através do programa Windows Insiders).

Além disso, precisamos ter instalada uma versão do Visual Studio 2015 no Windows 10. A Microsoft também disponibiliza uma versão gratuita do Visual Studio 2015 Community Edition para que possamos explorar os novos recursos de desenvolvimento da plataforma.

Criando o Hosted Web App

  1. Vamos começar abrindo a nossa versão do Visual Studio 2015.
  2. Nele vamos selecionar a opção File > New > Project... (ou ainda a tecla de atalho Ctrl+Shift+N).
  3. Será apresentada a tela para selecionar o template do projeto. Vamos selecionar a opção Templates > Javascript > Windows Universal e então escolher o item Blank App (Windows Universal). Vamos dar o nome “MyHostedWebApp” e então criar o projeto:
    Criando novo projeto Javascript para Universal Windows
    Criando novo projeto Javascript para Universal Windows
  4. Uma vez criado o projeto vamos abrir o arquivo package.appxmanifest.
  5. Nele vamos alterar o valor do atributo StartPage do elemento Application. Vamos ainda incluir uma regra para delimitar o escopo Web da nossa aplicação:
      <Applications>
        <Application
          Id="App"
          StartPage="http://your-site.com">
    
          <uap:VisualElements
            DisplayName="MyHostedWebApp"
            Description="MyHostedWebApp"
            BackgroundColor="#464646"
            Square150x150Logo="images\Logo.png"
            Square44x44Logo="images\SmallLogo.png">
    
            <uap:SplashScreen Image="images\splashscreen.png" />
            
          </uap:VisualElements>
    
          <uap:ApplicationContentUriRules>
            <uap:Rule Match="http://your-site.com" Type="include"/>
          </uap:ApplicationContentUriRules>
        </Application>
      </Applications>
    

Notas:

  • O uap:Rule define as URLs que estão dentro (ou fora) do escopo da aplicação. Podemos definir quantos uap:Rule precisarmos podendo defini-los como “include”, para incluir a URL no escopo da aplicação, ou “exclude” para excluir a URL do escopo da aplicação.
  • Quando o usuário acessa qualquer link nas páginas visualizadas pelo aplicativo, o Windows irá verificar se a nova URL está dentro do escopo da aplicação. Caso esteja, ele continua exibindo a página dentro da aplicação. Caso contrário é aberto um browser externo para exibir a página em questão.
Hosted Web App em execução
Hosted Web App em execução

E pronto! Agora é só executar nosso aplicativo Web no Windows. E qualquer hyperlink para outra página fora do site irá abrir o Browser padrão instalado no computador.

Para alterar o Tile da aplicação e a Splashscreen, é só alterar os arquivos de imagem contidos na pasta images.

E se desejar, você pode remover o arquivo default.html e as pastas css, js e WinJS já que eles não estão sendo utilizados.

Suporte aos elementos Web e recursos CSS

Para uma correta visualização do site na sua aplicação Web, garanta que seu site usa os padrões definidos pela W3C e está aderente a Web moderna. Para maiores detalhes, veja nosso outro post intitulado “Esteja preparado para o Microsoft Edge”.

Até a próxima e continuem nos seguindo no talkitbr!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s