Your SlideShare is downloading. ×
0
Building Offline Web Apps

Jarvis Brown

Consultant/Tech Entrepreneur
BlackBerry Developer Evangelist

jarbrown@blackberry...
Resources, Files & More
IamJarvisBrown.com/fitc/
Offline Web Applications
Live Web Site/ App

Offline Applications

Your WebServer
Mobile Device
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 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 ...
Step 2
Create the manifest file that will list the resources that
should be cached. Name it mycache.manifest. Then add all...
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, th...
NETWORK
This section lists the urls that should never be cached. For
example, your page may include a call to a script tha...
FALLBACK
FALLBACK is a clever way of specifying the page to display
in case any resource is not found in the app cache.

*...
SETTINGS
This includes settings for app cache behavior. Presently
Cache Mode is the only available setting. It can be set ...
Example manifest

24
Step 3
Add attribute manifest to the <html> element of index.html.
The value of the attribute should be myfilename.manifes...
Example index.html
<html manifest="myfilename.manifest">
<head>
<title>Offline Page</title>
</head>
Content Here
</html>

...
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 ...
Asset Download Tip
To Ensure all your assets are downloaded and cached you
can do a meta refresh:
<META http-equiv="refres...
CRITICAL TO REMEMBER
If any of the files mentioned in the CACHE section can't be
retrieved, the entire cache will be disre...
CRITICAL TO REMEMBER
You can only use wildcards for NETWORK/OFFLINE
section. CACHE requires you to point specifically to t...
STORAGE LIMIT
5MB Standard Limit
*Some browsers allow more.



Chrome (most request)
BlackBerry Browser (no explicit lim...
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

BlackBerry Applications

Existing Web App Assets
Use Server Side Technology
U...
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
B...
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
U...
Upcoming SlideShare
Loading in...5
×

The Power of HTML5 Offline: Mobile and More!

1,168

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,168
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • One of the first things new developers to BlackBerry notice that’s different than other mobile platforms is that BlackBerry doesn’t limit you to a single language or runtime for building your apps. Developers have some choices to make up front.This presentation will deep dive into the two most popular developer platforms: our Web/HTML5 platform and our Native/Cascades platform.
  • If you’re on a Mac, here is how to initialize the web server. If you have a different web server installed, it will work too./Library/WebServer
  • Demo: build sample app using Ripple &amp; WebWorks BB10
  • Before we dive into our two platforms, I’m going to quickly survey all the developer options we provide and take a look at the resources available for getting started. We’ll then look at our Web platform, our Native platform and, if we’ve got time left answer any remaining questions.
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • In this section, we’ll explore the Web Platform and the relationship between the industry standard called “HTML5”, and BlackBerry WebWorks. As this slide suggests, WebWorks is the extension mechanism… But let’s start at the beginning…
  • Demo: build sample app using Ripple &amp; WebWorks BB10
  • Talking points: Ripple was recently released again as a Chrome extension. It was originally a Chrome extension, then became a standalone tool and is now back to being an extension. This structure allows the Chrome web engine to evolve on its own, and RIM to easily make over-the-air (OTA) improvements to Ripple for all developers (less upgrades needed!). Ripple extension for chrome supports building apps using the WebWorks SDK.
  • Demo: build sample app using Ripple &amp; WebWorks BB10
  • Step through each line to describe what it does.Next, we’re going to start building our application.
  • Transcript of "The Power of HTML5 Offline: Mobile and More!"

    1. 1. Building Offline Web Apps Jarvis Brown Consultant/Tech Entrepreneur BlackBerry Developer Evangelist jarbrown@blackberry.com @iamJarvisBrown
    2. 2. Resources, Files & More IamJarvisBrown.com/fitc/
    3. 3. Offline Web Applications Live Web Site/ App Offline Applications Your WebServer Mobile Device
    4. 4. Demo 4
    5. 5. Demo Application mm.theceomind.com/dailymind 5
    6. 6. Agenda Simple Offline Applications Why? How? Getting Started Tips & Tricks
    7. 7. AppCache & HTML5 7
    8. 8. What is AppCache? 8
    9. 9. What is AppCache? Appcache was intended to let your web app run offline, no Internet connection required. 9
    10. 10. Where Can I Use It? Desktop Tablets Mobile 10
    11. 11. Supported Mobile Platforms Android BlackBerry iOS Tizen Windows Phone 11
    12. 12. Supported Browsers Internet Explorer 10 Firefox Chrome Safari Opera 12
    13. 13. GETTING STARTED STEP BY STEP 13
    14. 14. Step 1 Create a .htaccess file with the following content and place it in the root directory AddType text/cache-manifest .manifest 16
    15. 15. 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
    16. 16. Example manifest 18
    17. 17. What goes in Manifest? CACHE NETWORK FALLBACK SETTINGS 19
    18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. Example manifest 24
    23. 23. Step 3 Add attribute manifest to the <html> element of index.html. The value of the attribute should be myfilename.manifest. 25
    24. 24. Example index.html <html manifest="myfilename.manifest"> <head> <title>Offline Page</title> </head> Content Here </html> 26
    25. 25. Tips 27
    26. 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
    27. 27. 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
    28. 28. 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
    29. 29. 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
    30. 30. STORAGE LIMIT 5MB Standard Limit *Some browsers allow more.   Chrome (most request) BlackBerry Browser (no explicit limit). 32
    31. 31. Questions? Jarvis Brown jarbrown@blackberry.com @iamJarvisBrown
    32. 32. Remote/Server Side Code Use of Existing Web Apps Config.xml Your Assets BlackBerry Applications
    33. 33. Remote & Local Code Config.xml Your Assets BlackBerry Applications Existing Web App Assets Use Server Side Technology Use Cloud Databases Speed of Local Assets
    34. 34. How to get there? Config.xml Your Assets WebWorks Tools BlackBerry Applications
    35. 35. Tools 2. Download & Install Ripple Emulator
    36. 36. BlackBerry 10 and Ripple Chrome extension Separate Beta download Multi-platform support  BlackBerry 10, Tablet OS and BlackBerry OS Build and sign BlackBerry apps
    37. 37. Localized Code BlackBerry Applications Your Assets
    38. 38. Things to Remember Default File Location for Ripple  PC Default IIS Location  Mac Default Sites Folder 40
    39. 39. Remote & Local Code Config.xml Your Assets BlackBerry Applications Existing Web App Assets Use Server Side Technology Use Cloud Databases Speed of Local Assets
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×