Platforma průmyslové spolupráce CZ.1.07/2.4.00/17.0041 Název Framework for Developing Offline HTML5 Applications Popis a využití • úvod do tvorby offline HTML5 aplikací • výuka: značkovací jazyky, webové aplikace Jazyk textu • anglický Autor (autoři) • Petr Kunc Oficiální stránka projektu: • http://lasaris.fi.muni.cz/pps Dostupnost výukových materiálů a nástrojů online: • http://lasaris.fi.muni.cz/pps/study-materials-and-tools Contents 1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 Introduction to HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3 HTML5 and Offline Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.1 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.2 Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.3 File API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.4 Offline detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.5 Application cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 4 Application cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 4.1 The Cache Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 4.2 Structure of manifest file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.2.1 Explicit section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 4.2.2 Network section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.2.3 Fallback section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2.4 Settings section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3 Processing the manifest file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.1 Downloading manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.2 JavaScript API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5 Drawbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.1 Changes of resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.2 Double reload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.3 Modularity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.4 Error prone lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.5 Files from cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.6 Control of process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6 Proposed solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 6.1 Modifications of language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 6.1.1 Connection between languages . . . . . . . . . . . . . . . . . . . . . . . 28 6.1.2 Import support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.1.3 Parsing filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.1.4 Language extensibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2 Existing filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.3 Processing framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 6.4 Solved problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 7 Processing tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 7.1 Used technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 7.1.1 Language enhancements in JDK 7 . . . . . . . . . . . . . . . . . . . . . 33 vi 7.1.2 New File System API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.1.3 Maven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.1.4 Apache Commons Lang . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.1.5 Apache log4j . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.1.6 JUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.2 Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.2.1 Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.2.2 Class structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7.3 Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 7.4 Importing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 7.5 Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 7.5.1 GlobFilter and RegexFilter implementation . . . . . . . . . . . . . . . . 43 7.5.2 RGlobFilter and RRegexFilter implementation . . . . . . . . . . . . . . 45 7.6 Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 8 Demonstration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 8.1 Celebrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 8.2 Demonstration application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 8.2.1 Description of the application . . . . . . . . . . . . . . . . . . . . . . . . 47 8.2.2 Offline Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 8.3 Benefits of framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 8.3.1 Application modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 8.3.2 Reduced number of lines . . . . . . . . . . . . . . . . . . . . . . . . . . 50 8.3.3 Automatization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 9 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Bibliography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 A Attached CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 B Example of lesscache and generated appcache file . . . . . . . . . . . . . . . . . . . 2 C JavaScript APIs Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 vii Chapter 1 Introduction Development of web technologies and web browsers quickly aims to fully support HTML5 Candidate Recommendation published by W3C [3]. One of the main topics of recommenation is a chapter about Offline Web Applications. It is possible, in most browsers, to develop a complex application which can work even offline and synchronize its data with a distant storage when the user goes online. The term offline web application sounds like a contradiction. All web applications are dependent on internet connection and download data every time user demands a web page. Modern technologies allowed to migrate even basic dekstop applications like text or spreadsheet editors, calendars, notes or books to complex web applications which allow easy cooperation, sharing, data exchange and access to important resources on multiple devices. Users quickly adopted this trend and use applications like Google Drive 1 , Office 365 2 , Dropbox 3 and many others. As internet connection became more accessible by mobile internet access, people moved their data and even everyday tools on the web. But this approach has also its disadvantages. When loss of internet connection happens, users are completely cut from their data and programs. While travelling people cannot even create a presentation because they rely on web applications. A click in bad time when a person is on a train and their train enters a tunnel and computer is out of signal can lead to a loss of their several hours work [13]. Computer would become a useless machine when there is no internet connection. One solution would be to keep desktop applications too and work with them when access to web is not possible. This solution creates redundancy, a need to work with more tools than necessary and users lose all the advantages mentioned above. HTML5 offers a set of tools developers can make use of and create applications which are not dependent on stable connection. These new tools can be capable of automatical detection of online/offline status, they can also store data on computer’s file system and in local browser databases and even automatically synchronize data when computer goes online. This thesis focuses on describing how the offline technologies and techniques work with a main focus on application cache technology. Application cache uses manifest files to determine which files should be stored in browser and therefore reachable offline [23]. It points out the pro et contra of appcache and also proposes own solution how to overcome the 1. 2. 3. 1 1. INTRODUCTION greatest disadvantages of this technology. Theoretical part of this thesis is a little longer than usually is as the technologies and syntax is not well known. Therefore, the technology, its advantages and problems, are thoroughly introduced. Chapter two describes arrival of HTML5 and its features. Third chapter focuses on offline technologies available in HTML5. Next chapter describes the main topic of this thesis – Application Cache. In chapter five, drawbacks and problems of development using Application cache are mentioned. Following chapter proposes a solution to the mentioned problems and chapter 7 shows architecture and implementation of the framework, which was developed as part of this thesis. Last chapter introduces a demonstration application showing results of the framework use. Framework is comprised of language extending possibilites of current implementation and processing tool – Java application parsing this language. 2 Chapter 2 Introduction to HTML5 A brief overview of HTML5 will be presented in the beginning of this thesis. As this topic is vastly covered in many other publications, it will be introduced just to span the very basic terms and link to proper books and articles. New HTML5 features can be divided into three main categories: those connected with markup, styles and scripting. Figure 2.1: The W3C HTML5 logo 2.1 HTML HTML (Hypertext Markup Language) is a markup language mostly used for webpages. It is about to enter its fifth revision of the standard and in December 2012 it moved from Working draft to Candidate Recommendation phase. Developers use the word HTML5 even when they refer to standards which are not parts of HTML5 standards as CSS3, Geo Location, WebGL and many others. The history of HTML5 is quite complicated. HTML was supposed to be an SGML (Standard Generalized Markup Language) language in the beginning. HTML 4.0 completely fulfilled ISO 8879 - SGML and became part of SGML family in 1997. In 1998, the W3C stopped working on HTML and focused on XML-based XHTML, which was supposed to be more strict than its predecessor. XHTML was supposed to clean the original HTML and enforce stricter rules. It was a helpful quality of XHTML as it helped coders to find minor bugs which could cause inconsistency among browsers. As XHTML was heavily XML influenced, some more ideas and 3 2.2. CSS benefits were supposed to become true: interoperability, easy page processing, portability and extensibility, but these features never fulfilled the expectations [20]. The main problem of XHTML was that no browsers enforced the strict error-checking so developers could keep creating not valid codes. If the code contains errors, browsers switch to a quirk mode which handle the problems as the browser wants. The solution should be XHTML2 which forced the browsers to reject invalid pages. It did not work in the end as developers were urged to change every existing page of theirs, to support the standards. The experts from Apple, Opera and Mozilla formed their own group WHATWG (Web Hypertext Application Technology Working Group) which started working on their own extension of HTML as they considered XHTML2 to be too strict and does not bring the tools the developers want and need. Later, W3C dismissed XHTML2 group and started to cooperate with WHATWG on standardization of HTML5 [29]. HTML5 is much looser than HTML used to be. There is no need for elements like , or , the specification does not require them. Tags and attributes are case insensitive and attribute values do not have to be in quotes. The key principle of HTML5 is “Do not break the Web!” which means – fully support everything what worked until now and do not enforce strict rules where it is not necessary but just gives recommendations (lower case, use the elements mentioned above and so on). The biggest value of HTML5 is its great support for modern web applications [10]. • HTML5 supports semantic elements for structuring a page like
,
,
,
,