The Power of HTML5 Offline: Mobile and More!

67 %
33 %
Information about The Power of HTML5 Offline: Mobile and More!

Published on November 18, 2013

Author: fitc_slideshare



Presented by Jarvis Brown
at Web Unleashed 2013 in Boston on Nov 7-8, 2013.

Wanting to use your existing HTML5 skills and have a mobile application or website that works offline when your user isn’t connected to the Internet? This session is your key to developing multi-platform HTML5 gems that run locally on iOS, Android, BlackBerry and Windows even when initially deployed to the web.

In 60 minutes Jarvis Brown will show you the secrets to optimize and configure your HTML5 code to seamlessly work and function as a local app in any modern browser.

Building Offline Web Apps Jarvis Brown Consultant/Tech Entrepreneur BlackBerry Developer Evangelist @iamJarvisBrown

Resources, Files & More 

Offline Web Applications Live Web Site/ App Offline Applications Your WebServer Mobile Device

Demo 4

Demo Application 5

Agenda Simple Offline Applications Why? How? Getting Started Tips & Tricks

AppCache & HTML5 7

What is AppCache? 8

What is AppCache? Appcache was intended to let your web app run offline, no Internet connection required. 9

Where Can I Use It? Desktop Tablets Mobile 10

Supported Mobile Platforms Android BlackBerry iOS Tizen Windows Phone 11

Supported Browsers Internet Explorer 10 Firefox Chrome Safari Opera 12


Step 1 Create a .htaccess file with the following content and place it in the root directory AddType text/cache-manifest .manifest 16

Step 2 Create the manifest file that will list the resources that should be cached. Name it mycache.manifest. Then add all of the resources to the file. 17

Example manifest 18


CACHE This section lists all the resources that should be downloaded and stored locally. As soon as the page is loaded, the browser will start downloading these resources in the background. However, if some of the resources are already in the cache, then those won’t be re downloaded. 20

NETWORK This section lists the urls that should never be cached. For example, your page may include a call to a script that loads stock quotes dynamically. So, this type of resource will not be cached and made offline. Instead the data will be retrieved from the original source provided you have internet connection. 21

FALLBACK FALLBACK is a clever way of specifying the page to display in case any resource is not found in the app cache. *The ‘/’ has a special meaning in FALLBACK section. It means if any page is not found in app cache instead of showing an error the offline-message.html will be displayed. 22

SETTINGS This includes settings for app cache behavior. Presently Cache Mode is the only available setting. It can be set to prefer-online which indicates that the cached data should be disregarded if an active internet connection is present. 23

Example manifest 24

Step 3 Add attribute manifest to the <html> element of index.html. The value of the attribute should be myfilename.manifest. 25

Example index.html <html manifest="myfilename.manifest"> <head> <title>Offline Page</title> </head> Content Here </html> 26

Tips 27

CACHE UPDATE TIP If you've just touched the manifest file, the browser won't bother to re-check the assets — the contents of the manifest file must change somehow. Modifying a comment is good enough, which is why we recommend having a # version line 28

Asset Download Tip To Ensure all your assets are downloaded and cached you can do a meta refresh: <META http-equiv="refresh" content="5; URL=/dailymind/indexxx.cfm"> I’d advise adding a loading spinner or animated graphic to the page it redirects to. 29

CRITICAL TO REMEMBER If any of the files mentioned in the CACHE section can't be retrieved, the entire cache will be disregarded. All resources must successfully return. If any do not — returning a 404 or 500, for example — the entire cache will be ignored. The next time the browser returns to your page, it will try to use the manifest again as if it was the first time it encountered it. 30

CRITICAL TO REMEMBER You can only use wildcards for NETWORK/OFFLINE section. CACHE requires you to point specifically to the file you want to cache. 31

STORAGE LIMIT 5MB Standard Limit *Some browsers allow more.   Chrome (most request) BlackBerry Browser (no explicit limit). 32

Questions? Jarvis Brown @iamJarvisBrown

Remote/Server Side Code Use of Existing Web Apps Config.xml Your Assets BlackBerry Applications

Remote & Local Code Config.xml Your Assets BlackBerry Applications Existing Web App Assets Use Server Side Technology Use Cloud Databases Speed of Local Assets

How to get there? Config.xml Your Assets WebWorks Tools BlackBerry Applications

Tools 2. Download & Install Ripple Emulator

BlackBerry 10 and Ripple Chrome extension Separate Beta download Multi-platform support  BlackBerry 10, Tablet OS and BlackBerry OS Build and sign BlackBerry apps

Localized Code BlackBerry Applications Your Assets

Things to Remember Default File Location for Ripple  PC Default IIS Location  Mac Default Sites Folder 40

Remote & Local Code Config.xml Your Assets BlackBerry Applications Existing Web App Assets Use Server Side Technology Use Cloud Databases Speed of Local Assets

Add a comment

Related pages

The Power of HTML5 Offline: Mobile and More! - FITC

Overview. Wanting to use your existing HTML5 skills and have a mobile application or website that works offline when your user isn’t connected to the ...
Read more

HTML5 in mobile devices - Wikipedia, the free encyclopedia

HTML5 in mobile devices ... Enyo has been updated to version 2.2 for support for many more mobile operating ... offline authentication, combined HTML5 ...
Read more

Offline - HTML5 Rocks

Working with quota on mobile browsers; ... HTML5 Demos: Offline events Stickies demo with app cache and web SQL database In the Wild Mobile ...
Read more

Anleitungen - HTML5 Rocks

Anleitungen HTML5 Rocks. ... and more. mobile ... 2011 Working Off the Grid with HTML5 Offline This article covers practical techniques and ...
Read more

Mobile Web – The Power of HTML5, maddesigns (Sven ...

Mobile Web. The Power of HTML5 . Mobile Forum ... legt fest welche Dateien der Browser offline verfügbar ... 02/using-webapis-to-make-the-web-layer-more ...
Read more

The Power of HTML5 | Hambo Digital

The Power of HTML5. ... but HTML5 is more than just the window ... Using HTML5, you can create offline versions of a website to view when you are out ...
Read more

Mobile App vs. HTML5 - Advantages and Disadvantages of ...

Learn the advantages & disadvantages of native mobile applications ... in their sheer power. Unlike HTML5, ... mobile apps is more time ...
Read more

HTML5 Demo: Offline Application: using manifest

Offline Application: using manifest. A good working example is to load this demo up, ... HTML5 demos/@rem built this/view source ...
Read more