- •Contents at a Glance
- •Contents
- •Foreword
- •About the Authors
- •About the Technical Reviewer
- •Acknowledgments
- •Introduction
- •Who This Book Is For
- •An Overview of This Book
- •Example Code and Companion Web Site
- •Contacting the Authors
- •Overview of HTML5
- •The Story So Far—The History of HTML5
- •The Myth of 2022 and Why It Doesn’t Matter
- •Who Is Developing HTML5?
- •A New Vision
- •Compatibility and Paving the Cow Paths
- •Utility and the Priority of Constituencies
- •Interoperability Simplification
- •Universal Access
- •A Plugin–Free Paradigm
- •What’s In and What’s Out?
- •What’s New in HTML5?
- •New DOCTYPE and Character Set
- •New and Deprecated Elements
- •Semantic Markup
- •Simplifying Selection Using the Selectors API
- •JavaScript Logging and Debugging
- •window.JSON
- •DOM Level 3
- •Monkeys, Squirrelfish, and Other Speedy Oddities
- •Summary
- •Using the Canvas API
- •Overview of HTML5 Canvas
- •History
- •What Is a Canvas?
- •Canvas Coordinates
- •When Not to Use Canvas
- •Fallback Content
- •CSS and Canvas
- •Browser Support for HTML5 Canvas
- •Using the HTML5 Canvas APIs
- •Checking for Browser Support
- •Adding a Canvas to a Page
- •Applying Transformations to Drawings
- •Working with Paths
- •Working with Stroke Styles
- •Working with Fill Styles
- •Filling Rectangular Content
- •Drawing Curves
- •Inserting Images into a Canvas
- •Using Gradients
- •Using Background Patterns
- •Scaling Canvas Objects
- •Using Canvas Transforms
- •Using Canvas Text
- •Applying Shadows
- •Working with Pixel Data
- •Implementing Canvas Security
- •Building an Application with HTML5 Canvas
- •Practical Extra: Full Page Glass Pane
- •Practical Extra: Timing Your Canvas Animation
- •Summary
- •Working with Scalable Vector Graphics
- •Overview of SVG
- •History
- •Understanding SVG
- •Scalable Graphics
- •Creating 2D Graphics with SVG
- •Adding SVG to a Page
- •Simple Shapes
- •Transforming SVG Elements
- •Reusing Content
- •Patterns and Gradients
- •SVG Paths
- •Using SVG Text
- •Putting the Scene Together
- •Building an Interactive Application with SVG
- •Adding Trees
- •Adding the updateTrees Function
- •Adding the removeTree Function
- •Adding the CSS Styles
- •The Final Code
- •Summary
- •Working with Audio and Video
- •Overview of Audio and Video
- •Video Containers
- •Audio and Video Codecs
- •Audio and Video Restrictions
- •Browser Support for Audio and Video
- •Using the Audio and Video API
- •Checking for Browser Support
- •Accessibility
- •Understanding Media Elements
- •Working with Audio
- •Working with Video
- •Practical Extras
- •Summary
- •Using the Geolocation API
- •About Location Information
- •Latitude and Longitude Coordinates
- •Where Does Location Information Come From?
- •IP Address Geolocation Data
- •GPS Geolocation Data
- •Wi-Fi Geolocation Data
- •Cell Phone Geolocation Data
- •User–Defined Geolocation Data
- •Browser Support for Geolocation
- •Privacy
- •Triggering the Privacy Protection Mechanism
- •Dealing with Location Information
- •Using the Geolocation API
- •Checking for Browser Support
- •Position Requests
- •Building an Application with Geolocation
- •Writing the HTML Display
- •Processing the Geolocation Data
- •The Final Code
- •Practical Extras
- •What’s My Status?
- •Show Me on a Google Map
- •Summary
- •Using the Communication APIs
- •Cross Document Messaging
- •Understanding Origin Security
- •Browser Support for Cross Document Messaging
- •Using the postMessage API
- •Building an Application Using the postMessage API
- •XMLHttpRequest Level 2
- •Cross-Origin XMLHttpRequest
- •Progress Events
- •Browser Support for HTML5 XMLHttpRequest Level 2
- •Using the XMLHttpRequest API
- •Building an Application Using XMLHttpRequest
- •Practical Extras
- •Structured Data
- •Framebusting
- •Summary
- •Using the WebSocket API
- •Overview of WebSocket
- •Real-Time and HTTP
- •Understanding WebSocket
- •Writing a Simple Echo WebSocket Server
- •Using the WebSocket API
- •Checking for Browser Support
- •Basic API Usage
- •Building a WebSocket Application
- •Coding the HTML File
- •Adding the WebSocket Code
- •Adding the Geolocation Code
- •Putting It All Together
- •The Final Code
- •Summary
- •Using the Forms API
- •Overview of HTML5 Forms
- •HTML Forms Versus XForms
- •Functional Forms
- •Browser Support for HTML5 Forms
- •An Input Catalog
- •Using the HTML5 Forms APIs
- •New Form Attributes and Functions
- •Checking Forms with Validation
- •Validation Feedback
- •Building an Application with HTML5 Forms
- •Practical Extras
- •Summary
- •Working with Drag-and-Drop
- •Web Drag-and-Drop: The Story So Far
- •Overview of HTML5 Drag-and-Drop
- •The Big Picture
- •Events to Remember
- •Drag Participation
- •Transfer and Control
- •Building an Application with Drag-and-Drop
- •Getting Into the dropzone
- •Handling Drag-and-Drop for Files
- •Practical Extras
- •Customizing the Drag Display
- •Summary
- •Using the Web Workers API
- •Browser Support for Web Workers
- •Using the Web Workers API
- •Checking for Browser Support
- •Creating Web Workers
- •Loading and Executing Additional JavaScript
- •Communicating with Web Workers
- •Coding the Main Page
- •Handling Errors
- •Stopping Web Workers
- •Using Web Workers within Web Workers
- •Using Timers
- •Example Code
- •Building an Application with Web Workers
- •Coding the blur.js Helper Script
- •Coding the blur.html Application Page
- •Coding the blurWorker.js Web Worker Script
- •Communicating with the Web Workers
- •The Application in Action
- •Example Code
- •Summary
- •Using the Storage APIs
- •Overview of Web Storage
- •Browser Support for Web Storage
- •Using the Web Storage API
- •Checking for Browser Support
- •Setting and Retrieving Values
- •Plugging Data Leaks
- •Local Versus Session Storage
- •Other Web Storage API Attributes and Functions
- •Communicating Web Storage Updates
- •Exploring Web Storage
- •Building an Application with Web Storage
- •The Future of Browser Database Storage
- •The Web SQL Database
- •The Indexed Database API
- •Practical Extras
- •JSON Object Storage
- •A Window into Sharing
- •Summary
- •Overview of HTML5 Offline Web Applications
- •Browser Support for HTML5 Offline Web Applications
- •Using the HTML5 Application Cache API
- •Checking for Browser Support
- •Creating a Simple Offline Application
- •Going Offline
- •Manifest Files
- •The ApplicationCache API
- •Application Cache in Action
- •Building an Application with HTML5 Offline Web Applications
- •Creating a Manifest File for the Application Resources
- •Creating the HTML Structure and CSS for the UI
- •Creating the Offline JavaScript
- •Check for ApplicationCache Support
- •Adding the Update Button Handler
- •Add Geolocation Tracking Code
- •Adding Storage Code
- •Adding Offline Event Handling
- •Summary
- •The Future of HTML5
- •Browser Support for HTML5
- •HTML Evolves
- •WebGL
- •Devices
- •Audio Data API
- •Touchscreen Device Events
- •Peer-to-Peer Networking
- •Ultimate Direction
- •Summary
- •Index
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Using Application Cache to Boost Performance
Peter says: “One nice side-effect of the application cache mechanism is that you can use it to prefetch resources. The regular browser cache stores pages that you have visited, but what is stored is dependent on both client and server configuration (browser settings and expires headers). Therefore, returning to specific pages by relying on regular browser caching is fickle to say the least—anyone who has ever attempted to rely on regular browser caching to navigate through the pages of a website while on an airplane will probably agree here.
Using application cache, however, allows you not only to cache pages as you visit them but also to cache pages you have not even visited yet; it can be used as an effective prefetching mechanism. When it is time to use one of those prefetched resources it will be loaded from the application cache on local disk and not from the server, speeding up the load time dramatically. Used wisely (don’t prefetch Wikipedia), you can use application cache to dramatically improve performance. One important thing to remember is that regular browser caching is also still in effect, so watch for false positives, especially if you are trying to debug application cache behavior.”
Building an Application with HTML5 Offline Web Applications
In this example application, we will track a runner’s location while out on the trail (with intermittent or no connectivity). For example, Peter goes running, and he will have his new Geolocation–enabled phone and HTML5 web browser with him, but there is not always a great signal out in the woods around his house. He wants to use this application to track and record his location even when he cannot use the Internet.
When offline, the Geolocation API should continue to work on devices with hardware geolocation (such as GPS) but obviously not on devices that use IP geolocation. IP geolocation requires network connectivity to map the client's IP address to coordinates. In addition, offline applications can always access persistent storage on the local machine through APIs such as local storage or Indexed Database.
The example files for this application are located on the book’s page at www.apress.com and at the book‘s website in the offline code folder, and you can start the demo by navigating to the code/offline folder and issuing the command:
Python –m SimpleHTTPServer 9999.
Prior to starting the web server, make sure you have configured Python to serve the manifest files (files with the *.appcache extension) with the correct mime type as described earlier. This is the most common cause of failure for offline web applications. If it does not work as expected, check the console in Chrome Developer tools for possible descriptive error messages.
This starts Python’s HTTP server module on port 9999 (you can start it on any port, but you may need admin privileges to bind to ports lower than 1024. After starting the HTTP server, you can navigate to http://localhost :9999/tracker.html to see the application in action.
Figure 12-3 shows what happens in Firefox when you access the site for the first time: you are prompted to opt in to storing data on your computer (note, however, that not all browsers will prompt you before storing data).
303
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Figure 12-3. Firefox prompting to store data for the web application
After allowing the application to store data, the application cache process starts and the browser starts downloading the files referenced in the application cache manifest file (this happens after the page is loaded, and, therefore, it has minimal impact on the responsiveness of the page. Figure 12-4 shows how Chrome Developer Tools provide a detailed overview of what is cached for the localhost origin in the Resources pane. It also provides information in the console about the application cache events that fire while the page and the manifest were processed.
304
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Figure 12-4. The Offline Page in Chrome with details about the application cache in Chrome Developer Tools
To run this application, you will need a web server serving these static resources. Remember that the manifest file must be served with the content type text/cache-manifest. If your browser supports the application cache, but the file is served with the incorrect content type, you will receive a cache error. An easy way to test this is to view the events that fire in the Chrome Developer Tools console as shown in Figure 12-4; it will tell you if the appcache file is served with the wrong mime type.
To run this application with complete functionality, you will need a server that can receive geolocation data. The server-side complement to this example would presumably store, analyze, and make available this data. It may or may not be served from the same origin as the static application.
Figure 12-5 shows the example application running in offline mode in Firefox. You can use File Work Offline to turn this mode on in Firefox and Opera. Other browsers do not have this convenience function, but you can disconnect from the network. Note, however, that disconnecting from the network does not interrupt the connection to a Python server running on localhost.
305
CHAPTER 12 ■ CREATING OFFLINE WEB APPLICATIONS
Figure 12-5. The application in offline mode
Creating a Manifest File for the Application Resources
First, in a text editor, create the tracker.appcache file as follows. This manifest file will list the files that are part of this application:
CACHE MANIFEST
#JavaScript
./offline.js
#./tracker.js
./log.js
#stylesheets
./html5.css
#images
Creating the HTML Structure and CSS for the UI
This is the basic UI structure of the example. Both tracker.html and html5.css will be cached, so the application will be served from the application cache.
<!DOCTYPE html>
<html lang="en" manifest="tracker.appcache"> <head>
<title>HTML5 Offline Application</title> <script src="log.js"></script>
<script src="offline.js"></script> <script src="tracker.js"></script>
306