Category Archives: web

Make your website or web-app offline available

Category : Android web

Android developers vs. web

One great advantage of native apps over web apps is that they don’t depend on an online connection to start. Therefore the startup is fast and you can use them in no-network conditions. Just, web apps can also have this advantage when done right.

If you look at a website like Google Docs, you notice that it appears even when you are offline (given that you have visited the same page before). It is even possible to edit files while offline. You can achieve the same with an HTML5 feature called the Offline Application Cache.

Use the Offline Application Cache

While keeping a state locally and syncing requires more effort, making your web(site/app) offline available is easy. You just have to use the Offline Application Cache. This is a single file with information about everything the client should keep in its local cache.

At first you create a file called cache.manifest with the following content:

# Cache version #1


Change the resources below CACHE: to the required files of your project. Keep in mind that these resources are not requested again, even if they changed. If you want them to be re-downloaded, you need to change the cache manifest itself. This is the reason for the version counter. Increase it by one to make the clients refresh all resources.

The next step is to add it to your site html tag:

<html manifest="cache.manifest" type="text/cache-manifest">

Save, refresh the website on your client and you now have an offline available app. You can test the Offline Application Cache by switching off your server or internet connection and refreshing again. It will reload despite having no connection.

Network and Fallback

In case you have more dynamic content there are two sections you can use in the Offline Application Cache file called NETWORK and FALLBACK:

# Download default_state.xml to local cache

# Resources that have to be downloaded from a server

# default_state.xml is used when current_state.xml is not available
/current_state.xml /default_state.xml

In this case, current_state.xml requires an online connection and can not be cached. default_state.xml will be added to the cache and used as a fallback when current_state.xml could not be downloaded.

For example, instead of your state data you can put a “state could not be retrieved” message into the default_state.

Wrap up

It is simple to make your web app offline capable. Most of the hybrid- or web-apps I see on the market fail to work without an online connection. It is a pity, because there is so little work necessary to greatly enhance the user experience.

Dynamic state is a different thing, though. Keeping and syncing state is a hard topic, whether native or on the web. While not simple, it is possible with HTML5 Local Storage.

Still, showing your own website with a message is much better than the default browser error. If you have web parts in your application that come from a remote server, be sure to use the Offline Application Cache, at least for the front page and your resources.

A Beginner’s Guide to Using the Application Cache

HTML Standard Application caches

This website switched to HTTPS

Category : web

My webhoster 1blu has finally added the possibility to get a free LetsEncrypt SSL certificate for this website. So is now available via HTTPS.

Let’s Encrypt

With LetsEncrypt getting an SSL certificate is free. There are many reasons for using HTTPS but hardly one against it. This is especially true whenever you enter credentials for logging into your website. In case of this blog and profile page it didn’t matter too much, because the only person with a login is myself. All the content was and is available publicly, so there is no need for a high security level. However, HTTPS is also one of many ranking signals for search engines. And it is just good practice to use encryption wherever it doesn’t hurt.

Simple but not that simple

Moving your website over to HTTPS is very easy. Usually, you just tell your webhoster to get and install a certificate. Or, in case you are hosting yourself, you have to do these steps on your own.

However, keep in mind that this doesn’t magically fix all the problems. After you got your installed certificate and HTTPS running, there is more to check:

  • Links on your website should not point to HTTP urls. Make sure any internal link does not start with “http://”. The best way to fix it is not to change http to https, but instead leave out the complete protocol & domain part. This way links will still work, even if you would move back to http or change your domain. You can use for checking the links on your site.
  • Change the url of your Page in WordPress to https://
  • When another blog linked to your page, this link will continue to point to the HTTP version. For search engines, your HTTP website is different from the HTTPS site. To prevent losing a good ranking, make sure to redirect from your HTTP to the HTTPS version. This also ensures your visitors will use the secure protocol from now on.

There can be much more, depending on your setup. Read through this detailed guide to see what else might apply in your case. WordPress and a professional web hosting simplifies much of that work. However, most of the time it also limits how far you can go. For my page, I had to wait multiple years until Let’s Encrypt became available. Features like HTTP2 support are still not available.

Now I need to go ahead an fix the links on this site. If you see anything else that is breaking encryption on my site, please tell me in the comments.

Recent Posts