This document provides an agenda for a community camp on developing universal apps using HTML and JavaScript. It includes an introduction to universal apps, how they differ from web and native apps, and how to create a universal app project template. It also discusses how to create and consume background tasks to run code even when the app is not running, including examples of when to use background tasks and how to register and declare them.

1. Developing Advanced
Universal Apps Using
HTML and JS
COMMUNITY CAMP, 17-21 NOV 2014

2. Agenda
About 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

3. Senthamil Selvan
Microsoft 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

4. Introduction to Universal Apps
You 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

5. Web app versus native app
WEB APP NATIVE APP
DATA
LOGIC
UI

6. Universal App Project Template
Windows Project Template
Windows Phone Project Template

7. Project Structure
DEMO

8. Background Tasks
What 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…

9. How to Create Task
◦ Create jsWorker file
◦ Implement Task Behaviors
◦ Register
◦ Declare it in Manifest

10. task.js
// this file runs in context of WorkerGlobalScope
(function () {
// importScripts is method of WorkerGlobalScope
importScripts( “//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 WorkerGlobalScope
close();
})();

11. 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
})();

12. BackgroundTaskBuilder
// create “namespace”
var back = Windows.ApplicationModel.Background;
// create instance of BackgroundTaskBuilder
var builder = back.BackgroundTaskBuilder();
builder.name = “task name”;
builder.taskEntryPoint = “jstask.js”;
builder.setTrigger(new back.TimeTrigger(15, false));
// register the task
builder.register();

13. package.appxmanifest - Declarations

14. Consume Tasks
How Tasks Triggered
Conditional Tasks
Lock Screen Scenario

15. Tasks
DEMO