-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·2020 lines (1823 loc) · 78.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML>
<!-- <html lang="en-US"> -->
<html lang="en-US" class="fade nonumbers">
<!--
^ a class of "fade" makes slides fade smoothly into one another
-->
<!-- <html lang="en-US" class="nonumbers"> -->
<!--
If you want no numbers on the slides add a "nonumbers" class
to the HTML element.
Adding a class of "fade" will make slides fade into another.
-->
<head>
<meta charset="UTF-8">
<title>HTML5 for the mobile web - Firefox OS</title>
<!--
If you upload your slides to the web, ensure that you have
a good title - this shows up in search results and social
media links
-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="themes/mozilla/styles/style.css">
<link rel="stylesheet" href="themes/mozilla/styles/partners.css">
<style type="text/css">
div[id$='bullets'].slide > div::after {
content: 'For Information only, do NOT present';
background: rgba(200, 0, 0, 0.5);
color: #fff;
position: absolute;
top: 20px;
right: 0;
padding: 5px 20px;
transform: rotate(90deg) translate(52%, -150px);
border-radius: 5px;
}
.full div[id$='bullets'].slide > div::after {
animation: wiggle alternate 1s infinite;
}
@keyframes wiggle {
from {
transform: rotate(90deg) translate(52%, -150px);
}
to {
transform: rotate(90deg) translate(52%, -160px);
}
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>PhoneGap/Cordova and Firefox OS Workshop</h1>
<p class="footer">
Jason Weathersby, Technical Evangelist, Mozilla
<a href="https://twitter.com/JasonWeathersby">@JasonWeathersby</a> or
<a href="mailto:jweathersby@mozilla.com">jweathersby@mozilla.com</a>
</p>
</header>
<aside class="talkdescription">
<p>This slide deck is using the shower system - roll over the previews to see the notes and click any slide to go into presentation mode. Then use keys to navigate.
<button onclick="goFullScreen()">Go fullscreen</button>
</p>
<p class="abstract">
<strong>Abstract: </strong> This talk discusses Firefox OS.
</p>
</aside>
<!--
Simply copy the whole block for each slide you want.
Special slides get extra classes. Each slide needs an ID
to allow for bookmarking and target jumping.
-->
<div id="cover" class="slide">
<div>
<section>
<header>
<h2>PhoneGap/Cordova and Firefox OS Workshop</h2>
</header>
<img src="pictures/latest/mozilla-cordova.png" class="middle shadow" height="300" alt="High-five at the Mozilla Festival!">
<!--<div class="right">
<div id="foxtail-phone">
<div id="foxtail-overlay">
<div id="foxtail"></div>
</div>
</div>
</div>-->
<br>
<small class="byline">
twitter: @jasonweathersby email: jweathersby@mozilla.com
</small>
<footer class="notes">
This is a simple cover slide with an image in the middle
</footer>
</section>
</div>
</div>
<!-- end slide block -->
<!-- ===================================================================
Firefox OS
======================================================================== -->
<div id="deserves" class="slide cover h">
<div>
<section>
<header>
</header>
<img src="pictures/fxos/Firefox_Layers.png" alt="Keep calm and trust HTML5" class="middle shadow" height="450">
<footer class="notes">
Explain that unlike other platforms, HTML5 is not a second class citizen in Firefox OS but that the system itself, the UI of the OS, is written in HTML5. Instead of hoping for support of HTML5 features, the OS is very much dependent on them.
</footer>
</section>
</div>
</div>
</div>
</div>
<div id="forall" class="slide">
<div>
<section>
<header>
<h2>Upgrading the mobile world</h2>
</header>
<figure class="right ">
<img src="pictures/latest/phones.png" alt="Phone Selection" height="400">
</figure>
<ul class="inner">
<li class="active">Targeted at new, emerging markets</li>
<li>Very affordable hardware</li>
<li>No credit card needed - client billing</li>
<li>Web technologies through and through</li>
<li>Released in 24 countries including Brazil, Germany, Poland, Hungary, Venezuela, Serbia, Columbia</li>
<li>13 Operators including Telefonica, Deutsche Telekom, Telenor</li>
<li>12 Smart Phones</li>
</ul>
<footer class="notes">
Firefox OS was created to bring users of feature phones into the web-enabled mobile world. It is meant to cater to the markets not covered by iOS and Android. Yes, you can buy cheap Androids world-wide but the version of Android they support doesn't have an out-of-the-box browser that allows you to do interesting things on the web. Much like Firefox and Opera for Android allow more users world-wide to have a great web experience without having the latest hardware, Firefox OS goes further. Its main goal is to bring millions of new users to the web on their mobile devices without getting a second-grade experience. https://blog.mozilla.org/blog/2014/02/23/firefox-os-unleashes-the-future-of-mobile/
</footer>
</section>
</div>
</div>
<!-- ===================================================================
OPEN WEB APPS
======================================================================== -->
<div id="zomgopenapps" class="slide shout">
<div>
<section>
<header>
<h2>Open Web Apps</h2>
</header>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="manifest" class="slide">
<div>
<section>
<header>
<h2>Defined by manifest</h2>
</header>
<pre>
<code>{</code>
<code> "name": "My App",</code>
<code> "description": "My elevator pitch goes here",</code>
<code> "launch_path": "/",</code>
<code> "icons": { "128": "/img/icon-128.png" },</code>
<code> "developer": {</code>
<code> "name": "Your name or organization",</code>
<code> "url": "http://your-homepage-here.org"</code>
<code> }</code>
<code>}</code>
</pre>
<p class="demourl"><a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest">App manifest</a>
</p>
<footer class="notes">
The main step to turn an HTML5 page/app into a Firefox App is to define an app manifest. These are simple files in JSON defining the name of your app, where the icons are and what permissions you need for the application to work. They need to be sent with the right MIME type on the server and get submitted to the Mozilla marketplace. See them as a quick description of your app.
</footer>
</section>
</div>
</div>
<div id="threekinds" class="slide">
<div>
<section>
<header>
<h2>Three levels of access…</h2>
</header>
<ul>
<li>
<mark>Hosted apps</mark>- stored on your server, easy to upgrade, limited access.</li>
<li>
<mark>Privileged apps</mark>- reviewed by the App store, packaged and signed</li>
<li>
<mark>Certified apps</mark>- part of the OS, only by Mozilla and partners</li>
</ul>
<p class="demourl"><a href="https://developer.mozilla.org/en-US/docs/Apps/App_permissions">App permissions</a>
</p>
<footer class="notes">
There are three different type of apps in Firefox OS: Hosted Apps, Privileged apps and Certified apps. The first kind is hosted on your own server and has access to a limited amount of extra functionality Firefox OS offers on top of what HTML5 gives you. Privileged apps have much more access to the hardware and must be hosted by Mozilla. Certified apps are part of the operating system and are only built by Mozilla and partners.
</footer>
</section>
</div>
</div>
<div id="installapp" class="slide">
<div>
<section>
<header>
<h2>Install apps from the web</h2>
</header>
<pre>
<code>var installapp = navigator.mozApps.install(manifestURL);</code>
<code>installapp.onsuccess = function(data) {</code>
<code> // App is installed</code>
<code>};</code>
<code>installapp.onerror = function() {</code>
<code> // App wasn't installed, info is in </code>
<code> // installapp.error.name</code>
<code>};</code>
</pre>
<p>AddType application/x-web-app-manifest+json .webapp</p>
<p class="demourl"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Apps.install">Install App Code</a>
</p>
<footer class="notes">
Installing applications from the web is possible by using the open web apps API, which is part of the WebAPI work in Mozilla. You can test if navigator.mozApps is supported and then create a button that calls the install method pointing to the URL of the manifest file of the app to be installed. You then get onsuccess and onerror handlers to deal with the returned objects of the install process. This means that any mobile friendly web site can be turned into an app in a few minutes, and that all the work you put into making your sites found in search engines wasn't wasted, but actually is now advertising for your app.
</footer>
</section>
</div>
</div>
<div id="marketplace" class="slide">
<div>
<section>
<header>
<h2>Firefox OS Marketplace</h2>
</header>
<img src="pictures/fxos/marketplace.png" alt="Firefox OS Marketplace" class="middle shadow" height="400">
<p class="demourl">
<a href="https://marketplace.firefox.com">https://marketplace.firefox.com/</a>
</p>
<footer class="notes">
The Firefox OS marketplace is where you can get apps for Firefox OS. It is the end user facing resource for new apps and your apps will show up here.
</footer>
</section>
</div>
</div>
<div id="coreapps1" class="slide">
<div>
<section>
<header>
<h2>Core Apps</h2>
</header>
<ul class="inner" style="list-style:none">
<li class="active">
<img class="middle " alt="coming from email" src="pictures/latest/homescreen.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/settings.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/email.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/calendar.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/clock.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/fmradio.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/marketplace.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/heremaps.png"></img>
</li>
</ul>
</section>
</div>
</div>
<div id="socialapps1" class="slide">
<div>
<section>
<header>
<h2>Social Apps</h2>
</header>
<ul class="inner">
<li class="active">
<img class="middle " alt="coming from email" src="pictures/latest/twitter.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/facebook.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/buzzfeed.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/messageme.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/rormix.png"></img>
</li>
<li>
<img class="middle " alt="pointless menu" src="pictures/latest/youtube.png"></img>
</li>
</ul>
</section>
</div>
</div>
<div id="gameapps1" class="slide">
<div>
<section>
<header>
<h2>Games</h2>
</header>
<ul class="inner">
<li class="active">
<img class="middle " alt="coming from email" src="pictures/latest/ageofbarb.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/skull.png"></img>
</li>
<li>
<img class="middle " alt="redirected to landing" src="pictures/latest/steelstory.png"></img>
</li>
</ul>
</section>
</div>
</div>
<div id="gameappslandscape" class="slide">
<div>
<section>
<header>
<h2>Games</h2>
</header>
<ul class="inner">
<li class="active">
<img class="middle shadow" alt="redirected to landing" src="pictures/latest/cuttherope.png"></img>
</li>
<li>
<img class="middle shadow" alt="redirected to landing" src="pictures/latest/captainrogers.png"></img>
</li>
<li>
<img class="middle shadow" alt="pointless menu" src="pictures/latest/jewels.png"></img>
</li>
<li>
<img class="middle shadow" alt="pointless menu" src="pictures/latest/shanghai.png"></img>
</li>
</ul>
</section>
</div>
</div>
<!-- ===================================================================
WEB APIS
======================================================================== -->
<div id="zomgapis" class="slide shout">
<div>
<section>
<header>
<h2>WebAPIs</h2>
</header>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="webapis" class="slide h">
<div>
<section>
<header>
<h2>Web APIs</h2>
</header>
<img src="pictures/fxos/webapi.png" height="400" class="middle" alt="WebAPI wiki">
<p class="demourl">
<a href="https://wiki.mozilla.org/WebAPI">WebAPI Wiki</a>
</p>
<footer class="notes">
The WebAPI effort of Mozilla is tracked and described on the wiki.
</footer>
</section>
</div>
</div>
<div id="webapilist" class="slide">
<div>
<section>
<header>
<h2>Web APIs (hosted apps)</h2>
</header>
<ul class="inline">
<li>GetUserMedia - Audio/Video capture, part of WebRTC</li>
<li>Vibration API</li>
<li>Screen Orientation</li>
<li>Geolocation API</li>
<li>Open WebApps</li>
<li>Network Information API</li>
<li>Battery Status API</li>
<li>Alarm API</li>
<li>Push API</li>
<li>Notifications API</li>
<li>WebFM API / FMRadio</li>
<li>WebPayment</li>
<li>IndexedDB</li>
<li>Ambient light sensor</li>
<li>Proximity sensor</li>
<li>Pointer Lock API</li>
<li>File Handle API</li>
<li>Web Activities</li>
</ul>
<footer class="notes">
Hosted applications, meaning HTML5 apps you run on your own server, get the full functionality of HTML5 and additional API support shown here. All of these APIs are defined on the Mozilla Wiki and proposals to the standard bodies. Some of them have already been implemented in other other browsers, like the geolocation API. For now, however, only Firefox OS gives you all of them. These APIs bring much needed extra functionality to the HTML5 stack.
</footer>
</section>
</div>
</div>
<div id="battery" class="slide">
<div>
<section>
<header>
<h2>Battery API</h2>
</header>
<pre>
<code>var b = navigator.battery;</code>
<code>if (b) {</code>
<code> var level = Math.round(b.level * 100) + "%",</code>
<code> charging = (b.charging) ? "" : "not ",</code>
<code> chargeTime = parseInt(b.chargingTime / 60, 10),</code>
<code> dischargeTime = parseInt(b.dischargingTime/60,10);</code>
<code> b.addEventListener("levelchange", show);</code>
<code> b.addEventListener("chargingchange", show);</code>
<code> b.addEventListener("chargingtimechange", show);</code>
<code> b.addEventListener("dischargingtimechange", show);</code>
<code>}</code>
</pre>
<footer class="notes">
This is an example of how to use one of those APIs. They come with properties, methods and fire a lot of events which makes it easy to include them in your own solutions. And as you can see using a simple if statement around your code ensures that only environments that support it execute your code.
</footer>
</section>
</div>
</div>
<div id="geolocation" class="slide">
<div>
<section>
<header>
<h2>Geolocation API</h2>
</header>
<img src="pictures/fxos/share.png" alt="share geolocation" class="right phone-shots-far">
<pre>
<code>navigator.geolocation.getCurrentPosition(function (position) {</code>
<code> geo.innerHTML = "Lat:" + </code>
<code> position.coords.latitude + </code>
<code>", Long:" + position.coords.longitude;</code>
<code> },</code>
<code> function () {</code>
<code> geo.innerHTML = "Failed...";</code>
<code> });</code>
Need permissions in webapp.manifest.
<code>"permissions": {</code>
<code> "geolocation": {</code>
<code> "description" : "location"</code>
<code> }</code>
<code> }</code>
</pre>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="notificationapi" class="slide">
<div>
<section>
<header>
<h2>Notification API</h2>
</header>
<img src="pictures/fxos/notification.png" alt="notification" class="right shadow phone-shots-far ">
<pre>
<code>Notification.requestPermission(function (permission) {</code>
<code> if(!("permission" in Notification)) {</code>
<code> Notification.permission = permission;</code>
<code> }</code>
<code>});</code>
<code>if (Notification.permission === "granted") {</code>
<code> new Notification("See this", {</code>
<code> body : "This is a notification"</code>
<code> });</code>
<code>}</code>
<code>//avoid prompt by adding to manifest</code>
<code> "desktop-notification": {</code>
<code> "description": "To show notifications"</code>
<code> },</code>
</pre>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="mozpay" class="slide">
<div>
<section>
<header>
<h2>Web Payments (Bit Coin anyone?)</h2>
</header>
<img class="right shadow" alt="pointless menu" src="pictures/latest/cuba.jpg"></img>
<pre>
<code> //paymentToken is a signed</code>
<code> //JSON Web Token (JWT)</code>
<code> //with payment details </code>
<code></code>
<code> var buyme = </code>
<code> navigator.mozPay(paymentToken);</code>
<code> buyme.onsuccess = function(event){</code>
<code> //Dont spend it all in one place</code>
<code> }</code>
</pre>
<p><a href="https://hacks.mozilla.org/2013/04/introducing-navigator-mozpay-for-web-payments/">mozPay,</a>
<a href="https://hacks.mozilla.org/2014/09/introducing-fxpay-for-in-app-payments/">In App Payments - fxpay for serverless support,</a>
<a href="https://hacks.mozilla.org/2013/10/monetization-with-inneractive-on-firefox-os/">Inneractive Ads</a>
</p>
Make sure to implement receipt validation in your code, which can be tested in the simulator:
<a href="https://developer.mozilla.org/en-US/Apps/Publishing/Validating_a_receipt">Validating a Receipt Paid App</a>.
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="PageVisibility" class="slide">
<div>
<section>
<header>
<h2>Page Visibility API</h2>
</header>
<img class="right shadow" alt="pointless menu" src="pictures/latest/eye.jpg"></img>
<pre>
<code>//Not really a Web API</code>
<code>document.addEventListener("visibilitychange",</code>
<code> function () {</code>
<code>if (document.hidden) {</code>
<code> console.log("App is hidden");</code>
<code>} else {</code>
<code> console.log("App has focus");</code>
<code>} });</code>
</pre>
<footer class="notes">Not a web api but good to know when developing
</footer>
</section>
</div>
</div>
<div id="webworkers" class="slide">
<div>
<section>
<header>
<h2>Web Workers with 1.3></h2>
</header>
<pre>
<code>var myWorker = new Worker("js/worker.js");</code>
<code>myWorker.onmessage = function (oEvent) {</code>
<code> alert("Worker said : " + oEvent.data);</code>
<code>};</code>
<code>myWorker.postMessage("John");</code>
<code>//worker.js</code>
<code>onmessage = function (oEvent) {</code>
<code> self.setTimeout(</code>
<code> function() {</code>
<code> postMessage("Hi " + oEvent.data);</code>
<code> }, Math.random() * 2000 + 1000);</code>
<code>};</code>
</pre>
<footer class="notes">Not a web api but good to know when developing
</footer>
</section>
</div>
</div>
<div id="promises" class="slide">
<div>
<section>
<header>
<h2>Promises with 1.4></h2>
</header>
<pre>
<code>var p1 = new Promise(</code>
<code> function(resolve, reject) {</code>
<code> window.setTimeout(</code>
<code> function() {</code>
<code> var secs = Math.random() * 2000 + 1000;</code>
<code> resolve(secs / 1000);</code>
<code> }, secs);</code>
<code> });</code>
<code>p1.then(</code>
<code> function(val) {</code>
<code> alert("promise done in " + val + " secs");</code>
<code> });</code>
</pre>
<footer class="notes">Not a web api but good to know when developing
</footer>
</section>
</div>
</div>
<div id="webapilistprivileged" class="slide">
<div>
<section>
<header>
<h2>Web APIs (privileged apps)</h2>
</header>
<ul class="inline">
<li>Device Storage API</li>
<li>Browser API</li>
<li>TCP Socket API</li>
<li>Contacts API</li>
<li>systemXHR</li>
<li>Keyboard</li>
<li>Camera API - as of 2.0</li>
<li>Mobile Identity API - as of 2.0</li>
</ul>
Need type set in manifest.webapp
<pre>
<code> "type": "privileged"</code>
</pre>
<footer class="notes">
Privileged apps have access to more APIs and those dealing with content of more sensitive nature like storing information on the device's file system, accessing the contacts list or loading third party data from the web. To recap, privileged apps need to be packaged up, submitted to the marketplace and delivered from Mozilla's infrastructure. We can not allow just any server on the web to access the user's address book as that would allow the creation of malware in a very easy fashion.
</footer>
</section>
</div>
</div>
<div id="contactsapi" class="slide">
<div>
<section>
<header>
<h2>Contacts API</h2>
</header>
<pre>
<code>var contact = new mozContact();</code>
<code>contact.init({name: "William"});</code>
<code>var request = navigator.mozContacts.save(contact);</code>
<code>request.onsuccess = function() {</code>
<code> // contact generated</code>
<code>};</code>
<code>request.onerror = function() {</code>
<code> // contact generation failed</code>
<code>};</code>
Permission must be set in manifest.webapp
<code>"contacts":{ "access": "readwrite" },</code>
</pre>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="device storage" class="slide">
<div>
<section>
<header>
<h2>Device Storage API</h2>
</header>
<pre>
<code>var sdcard = navigator.getDeviceStorage("sdcard");</code>
<code>var file = new Blob([vcard], {type: "text/plain"});</code>
<code>var request = sdcard.addNamed(file, "test/my-file.vcf");</code>
<code>request.onsuccess = function () {</code>
<code>..</code>
<code>}</code>
<code>request.onerror = function () {</code>
<code>..</code>
<code>} </code>
Permission must be set in manifest.webapp
<code>"device-storage:sdcard":{ "access": "readwrite" },</code>
<code>"device-storage:pictures":{ "access": "readwrite" }, </code>
</pre>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="cross domain" class="slide">
<div>
<section>
<header>
<h2>Cross Domain XML Httprequest</h2>
</header>
<pre>
<code>var xhr = new XMLHttpRequest({mozSystem: true});</code>
<code>xhr.open("GET", "http://urltoreadme/README.md", true);</code>
<code>xhr.onreadystatechange = function () {</code>
<code> if (xhr.status === 200 && xhr.readyState === 4) {</code>
<code> }</code>
<code>}</code>
<code>xhr.onerror = function () {....};</code>
<code>xhr.send();</code>
Permission must be set in manifest.webapp
<code> "systemXHR": {}, </code>
</pre>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="webapilistcertified" class="slide">
<div>
<section>
<header>
<h2>Web APIs (certified apps)</h2>
</header>
<ul class="inline">
<li>Telephony</li>
<li>WebSMS</li>
<li>Idle API</li>
<li>Settings API</li>
<li>Power Management API</li>
<li>Mobile Connection API</li>
<li>WiFi Information API</li>
<li>Bluetooth</li>
<li>Permissions API</li>
<li>Network Stats API</li>
<li>Time/Clock API</li>
<li>Attention screen</li>
<li>Voicemail</li>
<li>Wappush</li>
<li>Background Services</li>
<li>WebNFC</li>
</ul>
<footer class="notes">
Certified apps are the apps that make up the operating system itself. They are only built by Mozilla and partners and have full access to the hardware of the device, for example to make phone calls or change permissions on the device.
</footer>
</section>
</div>
</div>
<!-- ===================================================================
WEB ACTIVITIES
======================================================================== -->
<div id="zomgactivities" class="slide shout">
<div>
<section>
<header>
<h2>Web Activities</h2>
</header>
<img class="right shadow" alt="pointless menu" src="pictures/latest/web.jpg"></img>
<footer class="notes">
</footer>
</section>
</div>
</div>
<div id="activities" class="slide">
<div>
<section>
<header>
<h2>Web activities</h2>
</header>
<ul class="lots">
<li>browse</li>
<li>configure</li>
<li>costcontrol</li>
<li>dial</li>
<li>open</li>
<li>pick</li>
<li>record</li>
<li>save-bookmark</li>
<li>share</li>
<li>view</li>
<li>update</li>
<li>new: type:"mail", “websms/sms” or “webcontacts/contact”</li>
</ul>
<p class="demourl">
<a href="https://wiki.mozilla.org/WebAPI/WebActivities">WebActivies Wiki</a> --
<a href="https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities">WebActivities Description</a>
</p>
<footer class="notes">
If you want to access the camera or the address book without packaging your application, there is an alternative called Web Activities. These are much like Web Intents were for Chrome, but more focused on real use cases of the web rather than Android. Using Web Activities you can access the hardware without having to authenticate on the user's behalf. Instead, the users get prompted to use the apps they always use to give you what your app wants.
</footer>
</section>
</div>
</div>
<div id="webactivityservermanifest" class="slide">
<div>
<section>
<header>
<h2>Web Activity Receiver Manifest</h2>
</header>
<pre>
<code>"activities": {</code>
<code> "pick": {</code>
<code> "filters": {</code>
<code> "type": ["image/*", "image/jpeg", "image/png"]</code>
<code> },</code>
<code> "disposition": "inline"</code>
<code> "returnValue": true, </code>
<code> "href": "/index.html#pick"</code>
<code> }, </code>
</pre>
<footer class="notes">
window, new window or inline with overlay or popup https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities must be installed packaged app to be a receiver.
</footer>
</section>
</div>
</div>
<div id="webactivityservercode" class="slide">
<div>
<section>
<header>
<h2>Web Activity Receiver Handler</h2>
</header>
<pre>
<code>navigator.mozSetMessageHandler('activity',function(activityRequest) {</code>
<code> var option = activityRequest.source;</code>
<code> if (activityRequest.source.name === "pick") {</code>
<code> // Do something to handle the activity</code>
<code> if (picture) {</code>
<code> activityRequest.postResult(picture);</code>
<code> } else {</code>
<code> activityRequest.postError("Unable to provide a picture");</code>
<code> }</code>
<code> }</code>
<code>});</code>
</pre>
<footer class="notes">
window, new window or inline with overlay or popup https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities
</footer>
</section>
</div>
</div>
<div id="webactivitysendercode" class="slide">
<div>
<section>
<header>
<h2>Web Activity Sender 1(2)</h2>
</header>
<pre>
<img src="pictures/fxos/pick-activity.jpg" alt="Pick activity" class="right shadow">
<code>var activity = new MozActivity({</code>
<code> name: "pick",</code>
<code> // Provide the data required by the</code>
<code> //filter of the activity</code>
<code> data: {</code>
<code> type: "image/jpeg"</code>
<code> }</code>
<code>});</code>
</pre>
<footer class="notes">
The 'pick' activity is most probably the most useful one, as it allows you to tell the user that you want something from the device. In this case we define in the MIME type array that we are expecting an image. This would result in the screenshot shown on the right - the user gets asked to give us an image, either from the wallpaper or the photos folder or by taking a new photo with the camera.
</footer>
</section>
</div>
</div>
<div id="imageactivity2" class="slide">
<div>
<section>
<header>
<h2>Web Activity Sender 2(2)</h2>
</header>
<pre>
<code>activity.onsuccess = function () {</code>
<code> var img = document.createElement("img");</code>
<code> if (this.result.blob.type.indexOf("image") != -1) {</code>
<code> img.src = window.URL.createObjectURL(this.result.blob);</code>
<code> }</code>
<code>};</code>
<code>activity.onerror = function () { // error</code>
<code>};</code>
</pre>
<footer class="notes">
To retrieve the photo all you need is a simple event handler in which you get the image as a data blob and you can play with it in your app.
</footer>
</section>
</div>
</div>
<div id="callactivity" class="slide">
<div>
<section>
<header>
<h2>Sending a number to the phone</h2>
</header>
<pre>
<img src="pictures/fxos/dialer.png" alt="Pick activity" class="phone-shots right shadow">
<code>var call = new MozActivity({</code>
<code> name: "dial",</code>
<code> data: {</code>
<code> number: "+46777888999"</code>
<code> }</code>
<code>});</code>
</pre>
<footer class="notes">
This, as an example, is a call activity. When this JavaScript executes, the user will be sent to the dialer app (or Skype, depending on what app was defined as the default one), the number is sent to the app and the user needs to initiate the call. This is the main difference to WebAPIs - the user has the final say. When the call is denied or the user hung up the phone would go back to your app.
</footer>
</section>
</div>
</div>
<div id="addcontactwebactivity" class="slide">
<div>
<section>
<header>
<h2>Adding a Contact with Web API</h2>
</header>
<pre>
<img src="pictures/fxos/addcontact.png" alt="add contact activity" class="phone-shots right shadow">
<code>var newContact = new MozActivity({</code>
<code> name: "new", </code>
<code> data: {</code>
<code> type: "webcontacts/contact",</code>
<code> params: { </code>
<code> givenName: "Robert",</code>
<code> lastName: "Nyman",</code>
<code> company: "Mozilla"</code>
<code> }</code>
<code> }</code>
<code>});</code>
</pre>
<footer class="notes">
Only has one handler
</footer>
</section>
</div>
</div>
<div id="boilerplate" class="slide">
<div>
<section>
<header>
<h2>Web Activities Boiler Plate</h2>
</header>
<img src="pictures/fxos/boilerplate.jpg" alt="Firefox OS Boiler Plate" class="middle shadow" height="400">
<p class="demourl">
<a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App">Firefox OS Boiler Plate app</a>
</p>
<footer class="notes">
The Firefox OS Boiler Plate app by Robert Nyman is a perfect start to get accustomed to Web Activities. It is a showcase of buttons calling different web activities. Simply use the ones you want to have and delete the others. The code is highly commented to show you where to put your functionality.
</footer>
</section>
</div>
</div>
<div id="android" class="slide">
<div>
<section>
<header>