Is there a true method of saving HTML5 games to be played offline?

[ammarhsn]

Is there a true method of saving HTML5 games to be played offline? how?

[mattstyles]

Try looking in to app cache and progressive web apps.

App cache, in theory (and when it works), stores all assets offline. It obviously only works on the one browser at a time.

You could also look at Electron or Node-Webkit for a way to bundle all your JS into a native wrapper to give you more offline support.

[ammarhsn]

here's the link:

http://www.teachers-direct.co.uk/resources/quiz-busters/quiz-busters-game.aspx?game_id=148264

 

can we save it for offline use??? please check! if is works, tell me how. I really need it

[mattstyles]

I'm on the train so internet is very sketchy, it won't load the game link at the moment.

MDN have a few good articles on using app cache to store assets, it works by flagging which assets the browser should cache and tells it to use those cached assets if they are found or in the event of non-connectivity. It can be a pain to work with as its very aggressive caching and its implementation is sketchy or non-existent across all platforms you might want to support but conceptually its very simple, its just a list of assets that should be cached, once the user has visited your site and downloaded those assets initially they'll be able to used the cached local versions on subsequent visits.

Many years ago when Financial Times piled a load of cash in to the web they worked on offline support for assets and use various combinations of local storage and more advanced browser db storage, they got it working but its not for the faint-of-heart, it involved all sorts of trickier involving what gets stored where and compressing those assets to fit within browser limits for offline storage. You might find some good articles detailing their approach with the good news that most of these apis are now more advanced and stable in browsers.

edit: MDN finally loaded on my poor connection, appCache is officially deprecated (not that it was ever properly supported anyway), so check out Service Workers instead.

[ammarhsn]

I am a beginner; I didn't understand much of what you have just written.

please, check the link, see if you can save and make it work offline.

 

[b10b]

I had a hunch @ammarhsn just wanted to save the game offline.

To save a website offline try this https://www.httrack.com/

But consider that a H5 game may use dynamically constructed resource requests so there is no guarantee that all assets are knowable upfront, or via a crawler.  So another option is to hit F12 on Chrome, play the game throughout and note all the assets that appear in the the "Sources" tab.  Save each.  Also consider permissions - check whether you have the right to store an offline version of such files.

However, the game link provided is a SWF, that loads another SWF and a quiz data set - which often fails.  So better off asking the original author.

Don't worry @mattstyles I found your notes on AppCache failings and the Service Workers useful!

[ammarhsn]

didn't work!

[b10b]

21 hours ago, ammarhsn said:

didn't work!

You're welcome - what didn't work for you?

Was it that:

1) The question and subsequent advice on "saving HTML5 games to be played offline" wasn't appropriate to the *Flash game* you wanted to play offline?

2) The Flash game includes hard-wired urls to its required assets, so we'd need to get into hacky territory of decompiling or adding local IP routes to achieve your ask?

3) You don't have permission to do any of this anyhow?

As it's just a quiz, all you really need do is play the game once and write down the questions and answers to play offline.  In this case the data XML is stored at: http://www.teachers-direct.co.uk/resources/quiz-busters/quiz-busters-game.aspx?game_id=148264.  But I doubt that'll work due to session management, plus see point 3.

 

[ammarhsn]

I wanted only to know if it is possible to make it work offline or save it !

[b10b]

53 minutes ago, ammarhsn said:

I wanted only to know if it is possible to make it work offline or save it !

It is possible.  Being a Flash game it is downloaded from the internet, usually saved locally to cache, then run in the local Flash player.  This particular example is more complex because of the run-time loading of subsequent assets, their hard-coded urls and the session management of the host.  Possible yes, worthwhile no.

[ammarhsn]

can you download it for me or tell me how; I am a beginner!

[eXilz]

I guess you can take a look at service workers that make progressive web app work offline. It should be able to work with an HTML5 game I guess.