Offline games in Construct 3

Tags

Add to Favourites

1 Favourites
Construct 3
Construct 3

Buy Construct 3

Develop games in your browser. Powerful, performant & highly capable.

Buy Now Construct 3 users don't see these ads

Tutorial Stats

? 103 sessions
? 2 sessions per day
? 112 page views
? 2 page views per day

Report Tutorial

Report this tutorial for spam or for being inappropriate.

Published 3 Oct, 2017
965 words
~4-6 minutes

Construct 3 games work offline. So long as the game has been downloaded once while online, the user can play the game again after going offline. This is especially good for "Add to home screen" apps, since you get an icon on your device to launch the game and you don't need to be online to play - just like a native app! This tutorial describes how the offline support works and how you can enhance it with features like auto-update.

The Service Worker

Construct 3 games use a browser technology called service workers to allow games to work offline. This is essentially some JavaScript that can run even without an Internet connection, and can also read locally saved files, so it can continue to read files used by the game even while offline.

After exporting your project, you should notice two files in the exported folder named sw.js and offline.js. Together these enable offline support. sw.js is the Service Worker, which is the JavaScript that allows the game to load offline. offline.js is basically just a list of every file in the project, so they can all be saved for use offline.

Upon loading your game on the web (and assuming your server is using HTTPS), the browser will save your entire game to disk after loading it for the first time. After that, if you load the game again, it loads from disk. Nothing is downloaded at all! Usually that means the game loads very quickly as well. This means even if you're offline, you can still load the game and play. Your imported project files are cached for offline use, too.

Updating your game

You might wonder: if the game is always loaded from disk, how do you update your game?

If you're online and you load the game, the browser loads from disk instantly as before. However, as the game is running, it checks for an update in the background. If you've uploaded a new version, the browser downloads it and saves it to disk. Then, next time you load the game (this includes refreshing the page), the browser loads the new version. Until then, the user keeps playing the old version.

The Browser object has two conditions to detect this happening: On update found and On update ready. On update found triggers as soon as the browser detects a new version in the background. It is not ready to use yet, though - it's just started downloading the update. On update ready triggers when the download has finished and the new version is ready to be loaded. If this triggers on the game's title screen, you might want to prompt the user to reload the page (using the Browser's Reload action) so they're playing the latest and greatest version. However, you probably don't want to interrupt them mid-game!

This allows you to easily make a simple auto-updater for your game. You could show a text object saying "Downloading an update..." to notify the user an update is being downloaded after On update found triggers. When On update ready triggers, you might want to show a message saying an update is ready, and display a button which reloads the page when clicked.

Remember to re-upload offline.js

If you're updating even just one file of your game, you must also re-upload the exported offline.js file - every time! Otherwise the browser will assume nothing has changed and won't bother downloading the update. (The offline.js file must have changed for the browser to check for an update, and Construct adds a timestamp to the top of the offline.appcache file to ensure it always changes.)

The simplest way to remember to do this is to simply always re-upload all files after exporting.

Other useful features

The Browser object also has an On offline ready trigger. This runs the first time the game is loaded after it has finished being saved to disk. From that point on the game can work offline. Before then if the user goes offline, it hasn't finished saving yet so will not work offline.

The Browser object has three other useful conditions: is online, on went online and on went offline. With these, you can tell if the user is currently online, and detect if they come online and go offline during the running of the game. This might be useful to enable and disable any online features like the AJAX object.

Finally if you want to check the status of the Service Worker's saving or updating of your game, you can check the browser console. This will log status messages as the Service Worker identifies whether it is up-to-date or if an update is available, as it starts downloading a new version, when it's ready to use, and so on.

Conclusion

Construct uses Service Workers to allow your games to work offline. Be sure to update offline.js whenever you update your game. Drop in the Browser object to your game and use the update checking events. Now you have a game that works offline and auto-updates whenever the user is online. This is very simple to set up, but very useful! Be sure to add support to your games!

Share this Tutorial

Make games in your browser

You may use this tutorial for any purpose (even commercial) if you properly attribute it. Click here for more information.

Beta Mode: You may find bugs/missing content. Read more & Report Bugs