Developing Advanced Universal Apps Using HTML and JSCOMMUNITY CAMP, 17-21 NOV 2014

AgendaAbout Me

Introduction to Universal Apps◦ What is Universal App?

◦ Web App Vs Native App

Universal App Template◦ Project Structure

◦ Shared Project

◦ Demo

Background Tasks◦ Create Task

◦ Consume Task

Senthamil SelvanMicrosoft MVP (Windows Consumer Apps)

Working as Solution Architect at Xchanging Pte Ltd

Blog: http://altfo.wordpress.com

FB: www.facebook.com/altfo

My Page: https://www.facebook.com/pages/Math-Formulas-App/546631962132092

WPUG: https://www.facebook.com/groups/apolloexplorer/

Animal Taxonomy IUPAC Math Formulas Ultimate Player SG Parking SG Things To Do Mani Samayal Ultimate Cryptex SEASPC

Introduction to Universal AppsYou can build an app that targets to Windows and Windows Phone◦ Single Logic code sharing

◦ Share Images and Data

◦ Target multiple devices

◦ Common experience

◦ Shared authentication

◦ Shared data/profile

◦ Single app purchase

◦ Single IAP purchase

Web app versus native app

WEB APP NATIVE APP

DATA

LOGIC

UI

Universal App Project TemplateWindows Project Template

Windows Phone Project Template

Project StructureDEMO

Background TasksWhat is Background Task?

◦ Run the code even when the App is not running.◦ Schedule certain activities to be performed.

Features Available◦ Push Notifications◦ Audio Playback◦ File Transfer API◦ Share Contracts

Scenarios for Background task◦ Download Mail◦ Toast Notification◦ Update Service

Not applicable◦ Heavy downloads◦ User interaction like login / click button required…

How to Create Task◦ Create js Worker file

◦ Implement Task Behaviors

◦ Register

◦ Declare it in Manifest

task.js// this file runs in context of WorkerGlobalScope(function () {

// importScripts is method of WorkerGlobalScopeimportScripts( “//Microsoft.WinJS.1.0/js/base.js”,

“/js/app.js” );

// do work here, possibly using code from /js/app.js

// close is a method of WorkerGlobalScopeclose();

})();

WebUIBackgroundTaskInstance(function () {

// imports

// access background task via current property var currentTask = WebUIBackgroundTaskInstance.current;// instanceId, progress, succeeded // getDeferral for async calls within task// canceled event handler

// close})();

BackgroundTaskBuilder// create “namespace”var back = Windows.ApplicationModel.Background;

// create instance of BackgroundTaskBuildervar builder = back.BackgroundTaskBuilder();builder.name = “task name”;builder.taskEntryPoint = “js\\task.js”;builder.setTrigger(new back.TimeTrigger(15, false));

// register the taskbuilder.register();

package.appxmanifest - Declarations

Consume TasksHow Tasks Triggered

Conditional Tasks

Lock Screen Scenario

TasksDEMO