View
477
Download
0
Category
Preview:
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.
Citation preview
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}
Deployment Workflow
Lunchtime Node.js server
Yelp API
Application UI Application Data Services Yelp Data Service
%@@ 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
Make your Web App memorable
<!-- 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">
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">
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">
http://www.buildmypinnedsite.com/
Developer Feedback
Don’t see a lot of usage from users
Poor offline experience
Doesn’t feel like an app
%@@ 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
Chrome app store
Opera mobile
app market
FireFox Market Place
iOS Web Apps
IE Gallery
Browser App markets
http://www.iegallery.com/
APP
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
%@@ 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
Web App
Packaged App
Hosted App
User
App Markets
Deployment Workflow
Lunchtime Node.js server
Yelp API
Application UI Application Data Services Yelp Data Service
Deployment Workflow
Web App
Native Application
Web View (x-ms-webview element)
https://wat.codeplex.com/
https://wat.codeplex.com/
Windows Android iOS And more!
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
%@@ 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
ZIP Submit Down Load
App Builder
Developer Feedback Helps Web Apps get discovered along side of native apps
Works offline by default
Requires client side generated code
%@@ 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
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/
Blending the web
Web site Browser Apps Hosted App Packaged App
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
Jeff Burtoft
Email: jeffburt@microsoft.com twitter: @boyofgreen blog: html5hacks.com
© 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.
Recommended