The Power of HTML5 Offline: Mobile and More!

Building Offline Web Apps

Jarvis Brown

Consultant/Tech Entrepreneur
BlackBerry Developer Evangelist

jarbrown@blackberry.com
@iamJarvisBrown

Resources, Files & More
IamJarvisBrown.com/fitc/

Offline Web Applications
Live Web Site/ App

Offline Applications

Your WebServer
Mobile Device

Demo Application
mm.theceomind.com/dailymind

5

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

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

GETTING STARTED
STEP BY STEP

13

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

What goes in Manifest?
CACHE
NETWORK
FALLBACK
SETTINGS

19

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

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

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
jarbrown@blackberry.com

@iamJarvisBrown

Remote/Server Side Code
Use of Existing Web Apps

Config.xml

Your Assets

BlackBerry Applications

Remote & Local Code
Config.xml

Your Assets


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


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

Your Assets

Things to Remember
Default File Location for Ripple
 PC
Default IIS Location


Mac
Default Sites Folder

40

The Power of HTML5 Offline: Mobile and More!

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a The Power of HTML5 Offline: Mobile and More!

Semelhante a The Power of HTML5 Offline: Mobile and More! (20)

Mais de FITC

Mais de FITC (20)

Último

Último (20)

The Power of HTML5 Offline: Mobile and More!

Notas do Editor