Copyright is owned by the Author of the thesis. Permission is given for a copy to be downloaded by an individual for the purpose of research and

Size: px

Start display at page:

Download "Copyright is owned by the Author of the thesis. Permission is given for a copy to be downloaded by an individual for the purpose of research and"

Sherilyn Malone
6 years ago
Views:

1 Copyright is owned by the Author of the thesis. Permission is given for a copy to be downloaded by an individual for the purpose of research and private study only. The thesis may not be reproduced elsewhere without the permission of the Author.

2 Creating Offline Web Applications Using HTML5 Sam Marshall A thesis presented in partial fulfillment of the requirements for the degree of Master of Information Sciences in Computer Science Institute of Information and Mathematical Sciences Massey University Albany North Shore , Auckland, New Zealand sam.marshall@windowslive.com Tel: Fax: March 1, 2013

3 Abstract With the proliferation in the use of mobile devices, browser based applications are becoming the ideal information system for both individuals and organization. Web applications are platform independent and easy to deploy so can be accessed from any device that has a browser. A large number of businesses are now offering cloud services to deliver their software, which are on-demand and pay-as-you-go solutions. The increase in this trend is adding a huge economic and bandwidth challenge to both the network provider and consumer. While traditional web applications work when they are online, it is however essential for these applications to be available both online and offline modes. With this explosion in the use of mobile devices, the ability of these applications to work offline is especially important in situations where there is intermittent or no network availability. In this thesis we discuss ways of developing offline web applications. We also propose a method of implementing a wrapper that simplifies the currently proposed W3C s HTML5 client-side database API, IndexedDB, by providing a fluent interface with a Language Integrated Query (LINQ) feel. In cases where synchronization of the client-side data with the server database is a requirement, conflict resolution becomes a bit challenging. We discuss techniques for synchronizing the data that is stored at the client during offline mode with the server database. Keywords: Web applications, HTML5, Client side storage, Browser databases, IndexedDB, Database replication/synchronization

4 Acknowledgements I would like to express my thanks to some people who supported me. First, I thank Prof. Ken Hawick for supervisory, advisory support and for giving me the opportunity to write about this interesting topic. Thanks also to my wife, who has been there for me and our two beautiful kids, Sean and Chantelle-Rose despite not seeing much of me. And last but not least I would like to thank my parents and my friends for their ongoing encouragement, and their willingness to understand my research topic, even though they do not have any clue of what I am talking about.

5 Contents 1 Introduction Overview Problem Definition Objectives Security And Privacy Volatility of User data Thesis structure Literature Review Introduction Web Application Online Web Application Offline Web Application Latency Web Caching Web Application Performance Web Application Scalability Web Performance Rules Technology Drivers Cloud Computing: Software as a Service (SaaS) Mobile Computing Database Synchronization

6 2.3.1 Introduction Data integrity Database synchronization techniques Current Issues Web architecture challenges Functional dependencies Data dependencies Existing Solution Options Dojo Offline Toolkit Google Gears Web SQL Database HTML Introduction Hardware Acceleration Local File Access IndexedDB Cookies Web Storage Application Cache Web Workers Long polling Web Sockets XMLHttpRequest Methodology Introduction Important Design Aspects Designing for Performance and UI Responsiveness Javascript Libraries jquery Knockout.js

7 3.3.3 Model View ViewModel Design Pattern HTML IndexedDB ACID Properties of Transactions Asynchronous Synchronous Application Cache Problems with App Cache Improving App Cache Leveraging Browser Cache Designing a Fluent Interface Domain Specific Language (DSL) Method Chaining Language Integrated Query (LINQ) Lazy Load Pattern Data persistence Integrity and Reliability Database Synchronisation Data Consistency and Application Responsiveness Client-side Transaction Logging Receiving Server Updates Change Tracking Conflict Detection and Resolution Prioritizing Data Exchange Background Synchronization Security Error Handling and Recovery Privacy and Security Privacy Introduction

8 4.1.2 Privacy By Design User Centred Design User information confidentiality Control and log access Sensitivity of data Security Introduction Injection Attacks File System API Security Considerations IndexedDB Security Web Sockets API Countermeasures Discussions And Conclusions Discussion Design Considerations Implementation risks Browser Differences Performance and Scalability Security Client-side Development and Debugging Summary And Conclusions

9 List of Figures 1.1 Page Not Found HTML DOM Tree [23] Mobile Users versus Desktop Users [28] Core elements of an online web application Core elements of an offline web application IndexedDB Browser Compatibility[37] Typical WebSocket handshake: web client request and web server response [50] Network Throughput: Polling vs WebSocket [78] Latency: Polling vs WebSocket[78] Extended: Core elements of an offline web application

10 Listings 2.1 Creating a table with Web SQL Retrieving data with SQL select Storing a JSON Object How to check online status Subscribing to window event Example of a Manifest File Traditional Way of Querying IndexedDB Proposed Way of Querying IndexedDB Method Chaining Example

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012