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