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

Hosted Web App
Hosted Web App
Recentemente publicamos um post referente a aplicações Web no Windows 10, os chamados Hosted Web Apps.

E o que vimos até então foi um site Web embutido dentro de uma aplicação Windows 10. Mas muitos se perguntaram: e se quisermos acessar recursos do Windows como Live Tiles e Background Tasks? Ou ainda, o que devemos fazer para incluir componentes específicos do Windows na nossa aplicação?

Acessando API do Windows para Windows Runtime

Para conseguirmos acessar a API do Windows para Windows Runtime, teremos que mexer um pouco no nosso site Web e fazer pequenas inserções de código Javascript para garantir que conseguiremos acessar os recursos do Windows 10. E faremos isso via Javascript através de um recurso que permite verificar se ele está sendo executado num Hosted Web App:

if (window.windows)
{
  // add script specific for windows here.
}

E dentro do bloco condicional podemos usufruir dos recursos da Windows API para Windows Runtime Apps.

Além disso, precisamos ainda alterar o nosso arquivo de manifesto da aplicação Windows 10 para permitir acesso ao Windows Runtime através do atributo WindowsRuntimeAccess:

<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" WindowsRuntimeAccess="all"/>
    </uap:ApplicationContentUriRules>
  </Application>
</Applications>

Executando Javascript da aplicação Windows 10

Incluir no nosso site todo o código Javascript para usar os recursos do Windows 10 não é uma tarefa agradável. Além de disponibilizarmos nosso código na Web, o desenvolver no site e depois testar localmente na aplicação é pouco produtivo. E uma forma de abordar este problema é incluir no nosso site o carregamento de um Javascript contido na nossa aplicação Windows 10.

Por exemplo, todos os projetos Javascript para Windows 10 incluem um arquivo js/default.js. Podemos então, no momento em que a página do site for carregada pela nossa aplicação Web, incluir esse Javascript local:

// execute the following code only if running on windows as hosted web app
if (window.Windows) 
{
	// add the default javascript file of Windows App.
	var windowsAppDefaultJS = document.createElement("script");
	windowsAppDefaultJS.src = "ms-appx-web:///js/default.js";

	// add at the end of head tag
	document.head.appendChild(windowsAppDefaultJS);
}

Importante: O uso do esquema de URI ms-appx-web nesse caso é necessário por se tratar de um acesso feito através de um compartimento Web e não de dentro da nossa aplicação. Para maiores detalhes sobre esquemas de URI acesse o site Esquemas de URI.

Isso fará com que o nosso arquivo Javascript seja carregado. Porém o arquivo default.js padrão do projeto usa recursos do WinJS que era carregado pelo arquivo default.html da nossa aplicação mas não pelo nosso site. Portanto, para continuar usando o WinJS, temos que incluir esse Javascript também na nossa página. Isso pode ser feito ainda no nosso site ou no próprio arquivo default.js.

  • Incluindo o WinJS através da página do site:
    // execute the following code only if running on windows as hosted web app
    if (window.Windows) 
    {
    	// add the WinJS javascript file
    	var windowsWinJS = document.createElement("script");
    	windowsWinJS.src = "ms-appx-web:///WinJS/js/WinJS.js";	
    	
    	// add at the end of head tag
    	document.head.appendChild(windowsWinJS);
      
    	// add the default javascript file of Windows App.
    	var windowsAppDefaultJS = document.createElement("script");
    	windowsAppDefaultJS.src = "ms-appx-web:///js/default.js";
    
    	// add at the end of head tag
    	document.head.appendChild(windowsAppDefaultJS);
    }
    
  • Incluindo o WinJS através do nosso Javascript local:
    (function () {
        "use strict";
        
        // first of all, add WinJS if not defined
        if (typeof WinJS === "undefined")
        {
            // Adding the script tag
            var winJSScript = document.createElement("script");
            winJSScript.type = "application/javascript";
            winJSScript.src = "ms-appx-web:///WinJS/js/WinJS.js";
        
            document.head.appendChild(winJSScript);
    
            winJSScript.onload = winJSLoaded;
        }
        else
        {
            winJSLoaded();
        }
    
        // JS function executed when WinJS has been loaded by app
        function winJSLoaded() 
        {
            var app = WinJS.Application;
            var activation = Windows.ApplicationModel.Activation;
    
            app.onactivated = function (args) {
                if (args.detail.kind === activation.ActivationKind.launch) {
                    if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                        // TODO: This application has been newly launched. Initialize your application here.
                    } else {
                        // TODO: This application has been reactivated from suspension.
                        // Restore application state here.
                    }
                    args.setPromise(WinJS.UI.processAll());
                }
            };
    
            app.oncheckpoint = function (args) {
                // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
                // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
                // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
            };
    
            app.start();
        }
    })();
    

A partir desse ponto podemos adicionar os recursos que considerarmos necessários como:

Nota: No caso de usarmos componentes de UI do Windows API, não podemos nos esquecer que eles requerem o CSS do Windows para serem visualizados adequadamente. Portanto, para usar esses componentes é necessário também incluir o CSS definido na pasta do WinJS:

var cssFile = document.createElement("link");
cssFile.rel = "stylesheet";
cssFile.href = "ms-appx-web:///WinJS/css/ui-light.css";
document.head.appendChild(cssFile);

Código fonte e exemplos

Disponibilizamos no repositório GIT oficial do blog talkitBR a solução LiveTiles que demonstra a criação de Live Tiles além do uso de Background Tasks em uma Hosted Web Application.

Aqui encerramos mais um post sobre aplicações Web no Windows 10. Não deixem de dar sua contribuição através de comentários e sugestões. E em breve iremos divulgar ainda mais recursos e funcionalidades para Hosted Web Apps. Por isso continuem nos acompanhando aqui 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