Embed Size (px)
DESCRIPTION
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.
Citation preview
Building Offline Web Apps
Jarvis Brown
Consultant/Tech Entrepreneur
BlackBerry Developer Evangelist
@iamJarvisBrown
IamJarvisBrown.com/fitc/
Resources, Files & More
Offline Web Applications
Mobile Device
Offline Applications
Your WebServer
Live Web Site/ App
Demo
4
Demo Application
mm.theceomind.com/dailymind
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
GETTING STARTEDSTEP 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
Example manifest
18
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.
22
*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.
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
Your Assets
BlackBerry Applications
Config.xml
Use of Existing Web Apps
Remote & Local Code
Your Assets
BlackBerry Applications
Config.xml Existing Web App AssetsUse Server Side TechnologyUse Cloud DatabasesSpeed of Local Assets
How to get there?
Your AssetsWebWorks Tools BlackBerry Applications
Config.xml
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
BlackBerry Applications
Things to Remember
Default File Location for Ripple PC
Default IIS Location Mac
Default Sites Folder
40
Remote & Local Code
Your Assets
BlackBerry Applications
Config.xml Existing Web App AssetsUse Server Side TechnologyUse Cloud DatabasesSpeed of Local Assets
