a very "appy" web
DESCRIPTION
Jeff Burtoft's talk from Future Insights Live 2014 in Las Vegas: "Talk Description: Users want Apps. That used to be a problem for the web, but not anymore. From “Web Apps” to “Packaged Apps” and everything in between, the tools are here to “appify” your web content and get it on the home screen of your user’s device." Miss his talk? Join us at a future show: www.futureofwebapps.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.TRANSCRIPT
![Page 1: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/1.jpg)
1! @0#1 @#1 %@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $
Appifing your Web App Building Mobile Applications from the Web you know and Love
Jeff Burtoft {Microsoft | DX | Technical Evangelist}
![Page 2: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/2.jpg)
![Page 3: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/3.jpg)
![Page 4: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/4.jpg)
Deployment Workflow
Lunchtime Node.js server
Yelp API
Application UI Application Data Services Yelp Data Service
![Page 5: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/5.jpg)
%@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $ 1! @0#1 @#1 $@@ %?1<0@
Slightly Appy Web Apps Pinning, adding to home screen, live tile
![Page 6: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/6.jpg)
Make your Web App memorable
![Page 7: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/7.jpg)
<!-- Info for iOS --> <link href="touch-icon-iphone.png" rel="apple-touch-icon"> <link href="img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76"> <link href="img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120"> <link href="img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">
![Page 8: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/8.jpg)
Tiles - Live Tile <meta name="application-name" content="It's Lunchtime"> <meta name="msapplication-TileColor" content="#40eb5f"> <meta name="msapplication-square70x70logo" content="img/square70x70logo.png">
<meta name="msapplication-square150x150logo" content="img/square150x150logo.png">
<meta name="msapplication-wide310x150logo" content="img/wide310x150logo.png">
<meta name="msapplication-square310x310logo" content="img/square310x310logo.jpg"> <meta name="msapplication-notification" content="frequency=30;polling-uri=https://build-lunchtime.azurewebsites.net/xml/tile.xml; cycle=1">
![Page 9: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/9.jpg)
Share / Open Graph Data <!-- Share Charm "share"--><meta name="title" content="It's Lunchtime"><meta name="description" content="The app that helps you remember lunch!"> <meta content="http://build-lunchtime.azurewebsites.net/img/square150x150logo.png" property="og:image"> <meta content="http://build-lunchtime.azurewebsites.net/img/square70x70logo.png" property="og:image">
![Page 10: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/10.jpg)
![Page 11: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/11.jpg)
http://www.buildmypinnedsite.com/
![Page 12: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/12.jpg)
![Page 13: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/13.jpg)
Developer Feedback
Don’t see a lot of usage from users
Poor offline experience
Doesn’t feel like an app
![Page 14: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/14.jpg)
%@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $ 1! @0#1 @#1 $@@ %?1<0@
The Browser App conundrum Browser app markets and users
![Page 15: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/15.jpg)
Chrome app store
Opera mobile
app market
FireFox Market Place
iOS Web Apps
IE Gallery
Browser App markets
![Page 16: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/16.jpg)
http://www.iegallery.com/
![Page 17: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/17.jpg)
APP
![Page 18: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/18.jpg)
Developer Feedback App discovery isn’t coming though browser app stores
Even when I advertise, users still seem to prefer website (via url)
Not sticky for users
![Page 19: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/19.jpg)
%@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $ 1! @0#1 @#1 $@@ %?1<0@
A Very Appy Web App Getting in Stores, WebView, Web App Template
![Page 20: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/20.jpg)
Web App
Packaged App
Hosted App
![Page 21: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/21.jpg)
User
![Page 22: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/22.jpg)
App Markets
![Page 23: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/23.jpg)
Deployment Workflow
Lunchtime Node.js server
Yelp API
Application UI Application Data Services Yelp Data Service
![Page 24: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/24.jpg)
Deployment Workflow
Web App
Native Application
Web View (x-ms-webview element)
![Page 25: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/25.jpg)
https://wat.codeplex.com/
![Page 26: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/26.jpg)
https://wat.codeplex.com/
Windows Android iOS And more!
![Page 27: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/27.jpg)
Developer Feedback Helps Web Apps get discovered along side of native apps Easier to built offline experience, but not implied Doesn’t require me to change the way I do work Not every market allows
![Page 28: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/28.jpg)
%@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $ 1! @0#1 @#1 $@@ %?1<0@
Packaged Web Packaged Apps, local Web Apps
![Page 29: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/29.jpg)
ZIP Submit Down Load
![Page 30: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/30.jpg)
App Builder
![Page 31: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/31.jpg)
Developer Feedback Helps Web Apps get discovered along side of native apps
Works offline by default
Requires client side generated code
![Page 32: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/32.jpg)
![Page 33: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/33.jpg)
![Page 34: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/34.jpg)
%@@ 0?< 0!$ $11 0>$ 1 1@1 <1 #0?100?1!<<%% 1%!? $?#1 !#0 0 0?0>% 00 > 1 %$ 1 %0 00@! 1 %111 !# < >1% ? 01 <0 %#10$@ 0>011 >11 @% %0 10%010@# ?#< %@< !11! !0?01 1 $>>% %## #1><%0@ 1 @#@0 ?!> 11 <%%@0!0?0 0# !1 ?!! $>< >0 1! #1<?0? <<1@ <0>0 0 0$$ > ###%0%01 !1 0 @ #10# % 1 0@#1 1@0 <1 >#1 % #1 %?%@1<0?>>1 %>1 !0 ?0?%@ #00 @01 0# > >1%! 0>01 11 1 @ 0<0 0!1%$1<$11# @ > 0 <# $> @?!1 ?$1001 >> ?00 %0 1#< 00%10#0?# %1$ #1% 1@ <$ 01 > 1!< 101 00>>>1! 0 11@@< $1@ >!< #@ 0 00 # $!$1 >@#>$00 > 0 %11 01 00# 1$ 1 <?%1#0 1 $10 0> > !$ %<1?0 11 $>$ #0%% >0$ > !1@1 110> # ?> # >>01 < <0010 !01!>>$$!< >110 1# # ! 0 1 #> $0$@ % 100 !10 !@ 00%?< ><%@!% 11 !>!@ >1 $10>0 > 0 0$ ??10 ## ?1 ?? 10$@@ 10>!#< ?00! 1><0 @> %01 ?>0 @% # 1@01<100% 11 01 < ? 0?>% $ 1 1% >0#1? ## ?!0# 10 0#$ 1><101 !?0? 0#0 @<0@ 0 1 >0 1$?1<< 1 11@1 !> %?1<># %> 011 !@!##0 #0<%@ %! $< $!? $ 1! @0#1 @#1 $@@ %?1<0@
What’s Next Cross Platform Hosted Apps
![Page 35: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/35.jpg)
W3C Manifest for web application JSON-based manifest, which provides developers with a centralized place to put metadata associated with a web application.
JSON document that contains startup parameters and application defaults for when a web application is launched.
http://w3c.github.io/manifest/
![Page 36: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/36.jpg)
Blending the web
Web site Browser Apps Hosted App Packaged App
![Page 37: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/37.jpg)
https://github.com/Gr8Gatsby/build-lunchtime.git
http://teched-lunchtime.azurewebsites.net/
https://github.com/boyofgreen/Win8-app-bridge.git
https://wat.codeplex.com/
Get the code
![Page 39: A Very "Appy" Web](https://reader035.vdocuments.us/reader035/viewer/2022062312/554ba01fb4c905b8618b49c8/html5/thumbnails/39.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.