This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

Offline Mode Implementation

If you haven't already, please read the offline mode overview.

The  AppPresser 2+ Phonegap project files come with a file called offline.html which is where we will start.

Switching to Offline Mode

When the app goes offline, the user is shown a message that asks if they would like to switch to offline mode. 

If they choose to switch, they will be redirected to offline.html. It is just a webpage, so it can contain anything that does not require an internet connection, including text, images that are on the device, links to other offline pages, etc.

Building Offline Functionality

Open offline.html in your favorite text editor.

Scroll down to the main page content:

<h1>Offline</h1>
<p>Add offline content here.</p>

Change this text and the content below it to an offline message, or add your custom content.

Adding Images

To add offline images, they need to be located in this folder before you build and submit your app.

Add a folder called "images" and put your images there. You can reference them in your offline.html file like this:

<img src="images/myimage.jpg" class="whatever" />

Adding Custom CSS and JavaScript

To add custom CSS and JavaScript files, you need to include them in your folder and reference them from your offline html files.

For example, create a folder called "css" and a folder called "js". Put your stylesheet in the css folder along with your custom styles, same with the js. You will need to reference these in the <head> section of any offline html files like so:

 <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
 <script type="text/javascript" src="js/scripts.js"></script>

Adding More Offline Pages

Adding more pages is as simple as creating them and linking to them.

Duplicate offline.html into a new file, you can call it offline-2.html. Change the main text content of that file so it says "Welcome to offline-2.html!".

Delete references to init.js and connection.js on all pages except offline.html. You can do that by changing this:

<script type="text/javascript" src="../init.js"></script>
<script type="text/javascript" src="../connection.js"></script>
<link rel="stylesheet" type="text/css" href="css/offline.css">
	</head>

	<body onload="onLoad()">

To this:

<link rel="stylesheet" type="text/css" href="css/offline.css">
	</head>

	<body>

Next, add a link back to offline.html like this:

<a href="offline.html">Back to offline.html</a>

Load up that page in a browser and click the link, and you will be directed to offline.html. You can add a link from offline.html to offline-2.html, and now you have 2 pages with navigation.

You can use the same process to create more pages.

Bring your whole WordPress site offline

It's possible to put your whole WordPress site into your app to make the static content available offline.

You can go to your site homepage, right-click and choose "save as", and get a folder with your whole site and all asset files. If you drop that into your app, it will allow you to navigate your whole site offline.

You will need to go through and edit these files manually to fix any issues, and make sure to include any HTML/CSS/JS files in your offline folders.