HTML5 and the Future of the Mobile Web Patrick Carey Cengage Learning Author

2015 Cengage Learning Computing Conference2 “HTML5 is now supported on a wide variety of devices, lowering the cost of creating rich applications to reach users everywhere.” “HTML5 represents a set of features that people will be able to rely on for years to come..”

2015 Cengage Learning Computing Conference3 Mims, C. (2014, November 17) The Web is Dying; Apps are Killing It Wall Street Journal Manjoo, F. (2014, November 5) Fall of the Banner Ad: The Monster that Swallowed the Web. The New York Times Anderson, C. & Wolff, M. (2010, August 17) The Web is Dead. Long Live the Internet. Wired Kelly, K. & Wolff, G. (1997, March) Kiss your Browser Goodbye: The radical future of media beyond the Web. Wired The reports of my death have been greatly exaggerated

2015 Cengage Learning Computing Conference4

5 Source: comScore Digital Time Spent

Breakdown of Mobile Use 2015 Cengage Learning Computing Conference6

7 Native App  Runs as locally-installed application  Built with Objective-C, Java, or C#  Built for specific devices/screens  Approval from app store required

8 Web App  Runs within the mobile browser  Built with HTML5, CSS, & JS  Responsive design  No approval required

Forecast: The Web-Based Weather App 2015 Cengage Learning Computing Conference9

Financial Times Web App 2015 Cengage Learning Computing Conference10

11 Hybrid App  Runs within a native app container  Written in HTML5, CSS, & JS  Built for specific devices/screens  Approval from app store required

Benefits of Hybrid Apps 2015 Cengage Learning Computing Conference12 Developer can use existing web skills One code base Reduced development time and cost Responsive web design Access to some device features Advanced offline capabilities Increased visibility

Drawbacks of Hybrid Apps 2015 Cengage Learning Computing Conference13 Performance issues Increased time and effort Not all device features supported Risk of being rejected by app store

WKWebView and iOS Cengage Learning Computing Conference14 Source: caniuse.com via Sencha

Feature Comparison 2015 Cengage Learning Computing Conference15 Web App Native App Device Features Maintenance Offline Access Discoverability Performance Platform Independence Cost User Interface

2015 Cengage Learning Computing Conference16 — Mark Zuckerberg, 2012 When I’m introspective about the last few years, I think the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native. Because it just wasn’t there … “ … One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us. ”

2015 Cengage Learning Computing Conference17

2015 Cengage Learning Computing Conference18 Source: VisionMobile, Developer Economics 2013 Q1 What’s Unattractive about HTML5? What’s Attractive about HTML5?

Application Foundations of HTML5 (Looking Forward) 2015 Cengage Learning Computing Conference19  Security and Privacy  Core Web Design and Development  Device Interaction  Application Lifecycle  Media and Real-Time Communications  Performance and Tuning  Usability and Accessibility  Services

Graphics and Layout 2015 Cengage Learning Computing Conference20 FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox Timing Control for ScriptsCandidate Recommendation / Stable CSS Will Change PropertyWorking Draft / Early Draft CSS Flex LayoutLast Call Working Draft / Mostly Finished WOFF File FormatW3C Recommendation / Finished WOFF File Format 2Working Draft / Early Draft Orientation LockWorking Draft / Early Draft FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox SVG GraphicsW3C Recommendation / Finished HTML Canvas 2DCandidate Recommendation / Stable CSS Backgrounds & BordersCandidate Recommendation / Mostly Finished CSS TransformationsWorking Draft / Stabilizing CSS AnimationsWorking Draft / Early Draft CSS TransitionsWorking Draft / Early Draft Web AnimationsWorking Draft / Early Draft

Data Storage FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox Web StorageW3C Recommendation / Finished File Reader APILast Call Working Draft / Stabilizing HTML5 download attr.W3C Recommendation / Stable Indexed Database APIW3C Recommendation / Stable Quota ManagementWorking Draft / Early Work Web CryptographyCandidate Recommendation / Stable 2015 Cengage Learning Computing Conference21

Device Integration FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox GeolocationW3C Recommendation / Finished Motion sensorsLast Call Working Draft / Stabilizing Battery statusCandidate Recommendation / Stable Proximity sensorCandidate Recommendation / Likely to evolve Ambient lightLast Call Working Draft / Likely to evolve Camera & MicrophoneWorking Draft / Stabilizing NFCWorking Draft / Very early 2015 Cengage Learning Computing Conference22

FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox XMLHttpRequest Lev. 1Working Draft / Stabilizing BeaconLast Call Working Draft / Stabilizing Background SyncN/A / Early Draft Cross-domain requestsW3C Recommendation / Stable Server-sent EventsProposed recommendation / Stable FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox Push APIWorking Draft / Early Draft The WebSocket APICandidate Recommendation/ Stable Real-time Comm.Working Draft / Early Draft online State in HTML5W3C Recommendation / Stable Resource TimingWorking Draft / Stable Network Integration 2015 Cengage Learning Computing Conference23

Performance and Tuning FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox Navigation TimingW3C Recommendation / Finished Resource TimingWorking Draft / Stable Performance TimelineW3C Recommendation / Finished User TimingW3C Recommendation / Finished Frame TimingWorking Draft / Early Draft Page VisibilityW3C Recommendation / Finished Animation OptimizationCandidate Recommendation / Stable Web WorkersCandidate Recommendation / Stable 2015 Cengage Learning Computing Conference24

Application Lifecycle FeatureMaturity/Stability Safari Android Chrome Opera IE Firefox Packaging on the WebWorking Draft / Early Draft Manifest for Web appsWorking Draft / Early Draft Application CacheW3C Recommendation / Stable Service WorkersWorking Draft / Early Draft Task ScheduleWorking Draft / Early Draft Page VisibilityW3C Recommendation / Finished 2015 Cengage Learning Computing Conference25

Apps using Add to Home Screen 2015 Cengage Learning Computing Conference26 Available in Chrome 42 (beta) { "short_name": “Cengage 2015", "name": “Cenage 2015 Application", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url " : "index.html", "display": "standalone" }

2015 Cengage Learning Computing Conference27

Contact Information 2015 Cengage Learning Computing Conference28 Patrick Carey Carey Associates 8502 Miller Road Verona, WI (608)