File Save Mode on WebGL

Discussion and help for Easy Save 3
Post Reply
TheNightglow
Posts: 2
Joined: Tue Aug 30, 2022 12:00 pm

File Save Mode on WebGL

Post by TheNightglow »

Hi,

just wanted to point out an easy way to persistently save files to the browsers IndexedDB using ES3.
I needed this for my work since save files went over the PlayerPref limit and I am not sure why but it seems to be unsupported by default?
see
"However, on WebGL data will automatically be stored in PlayerPrefs regardless of what the location is set to as File IO is not allowed for security reasons."
- https://docs.moodkie.com/easy-save-3/es ... -location/
-------------------------------------------------------------------------------------------------------
All you need to do to allow File Saves on WebGL using ES3 is:
1.) comment out the line of code that defaults to Player Prefs:
ES3Settings.cs line 88 and following:

Code: Select all

public ES3.Location location
	{
		get
		{
			//if(_location == ES3.Location.File && (Application.platform == RuntimePlatform.WebGLPlayer || Application.platform == RuntimePlatform.tvOS))
			//return ES3.Location.PlayerPrefs;
			return _location;
		}
		set{ _location = value; }
	}
2.) make sure you save to the IndexedDB:
ES3 does this by default, so you dont need to change anything here, unless you use a custom save path.
If you use a custom path, make sure it starts with "idbfs/"

3.) force flush changes made to the IndexedDB:
Unity does not persistenly save changes done to the IndexedDB path by itself, you need to flush the changes ES3 does here.
Look here for a great answer by JJJohan that saved me a lot of time:
https://forum.unity.com/threads/how-doe ... gl.390385/
The FS.syncfs method in jslib environment is a life saver, just define a function in a .jslib file under Assets/Plugins that calls
FS.syncfs(false,function (err) {}), then import that function in c# and execute it after saving through ES3

With this, ES3 will persistently save your files into the users Browser (IndexedDB), and be able to load from it even after the Application is closed and restarted
(Note, the webgl persistent path (Application.persistentDataPath) changes after every Build, it persistently saves seperately for every version of your app!
If you want to persistently save files even through version updates of your application, make sure you save to an own custom path that starts with "idbfs/", like for instance "idbfs/yourcompany/yourapplication")
----------------------------------------------------
Summary:
To persistently save files on the users computer in a WebGL App that uses ES3:
  1. Remove the 2 lines at the ES3Settings.cs location getter, where WebGL is excluded from File saving
  2. Make sure you are saving to the IndexedDB (Application.persistentDataPath, or the ES3 default, or any path that starts with "idbfs/")
  3. Add a force flush for the IndexedDB after your save function
Tried this and it works perfectly fine :)
even all generic System.IO writing functions can persistenly save data for WebGL apps on the users computer following point 2) and 3)
User avatar
Joel
Moodkie Staff
Posts: 4826
Joined: Wed Nov 07, 2012 10:32 pm

Re: File Save Mode on WebGL

Post by Joel »

Hi there, and thanks for the detailed information, really appreciate it.

According to Unity this is what their PlayerPrefs API is doing underneath (see the PlayerPrefs guide), and any storage restrictions are imposed by IndexedDB. However, by the sounds of it the storage restriction is actually an artificial one imposed at their end.

Can you confirm that you’re saving more data than you were able to with PlayerPrefs?

All the best,
Joel
Joel @ Moodkie Interactive
Purchase Easy Save | Contact | Guides | Docs | Getting started
TheNightglow
Posts: 2
Joined: Tue Aug 30, 2022 12:00 pm

Re: File Save Mode on WebGL

Post by TheNightglow »

Hi,

yea, since I tried other forms of persistent saving before finding this solution, I had also made a download function that opens a file explorer dialog to get the save-file ES3 produces (similar to how you can download a save file in games like cookie clicker).
Thus, even though I see no way to tell how big a file within the IndexedDB is (you can find the File in the "F12" inspection menu, but not its size), I can see how big the file would be if downloaded to an actuall file explorer directory.

The size currently is ~1.8MB with compression (the JSON versin is ~10MB and PlayerPref limit is 1MB), and the same File can not be saved to the PlayerPrefs (I assume because of the size, but tbh I didnt pay full attention to the error log when I tried)

Also, about the size limit of IndexedDB vs PlayerPrefs:
IndexedDB has no standardized size limit, depending on the computer and browser you are using, the size limit IndexedDB supports will differ wildely... it seems it has also changed vastly over time, since the information I find on the internet about this is all over the place.

I assume the PlayerPrefs max size was chosen to be supported on any old mobile device using any old browser, and was never updated with time increasing capabilities

here is a link to a forum where multiple ppl discuss the storage limit
https://stackoverflow.com/questions/569 ... -indexeddb
User avatar
Joel
Moodkie Staff
Posts: 4826
Joined: Wed Nov 07, 2012 10:32 pm

Re: File Save Mode on WebGL

Post by Joel »

Thanks for the info. We’ll get in touch with Unity just to confirm this can be used without any critical errors and see about incorporating it into a future update if so.

All the best,
Joel
Joel @ Moodkie Interactive
Purchase Easy Save | Contact | Guides | Docs | Getting started
Post Reply