Make the Browser App a fully usable PWA

[arthuro555]

The web IDE is usable, but lacks a few key features to be fully usable. I think those are those most important ones:

Offline usage.

This is necessary for a PWA, but GDevelop currently cannot work offline for 2 reasons:

Previews are dependent on the network.

As currently, all previews on this version are basically web exports, they rely on the statically hosted gdjs. Events code also relies on being uploaded to an s3. This could be changed for example by downloading the whole runtime on for example indexed db, making exporters that also export to indexed db and making a service worker that intercepts fetch events and returns files from indexed db for an url like editor.gdevelop-app.com/preview, "emulating" a local http server for that url. That way, we can have the runtime files we want locally to be able to run games locally and have events code exported locally without requiring internet and an external service.

Projects can only be loaded from google drive

Google drive, obviously, requires internet. An option would be using the browser storage or the filesystem api to store project files and resources. Another one would be to allow opening downloaded zips of the project.

No ability to use own resources

The biggest complaint I see is from chromebooks users that want to use their own images and other resources for their games. This is tricky as the resource files cannot be stored directly inside the JSON. We could either store the resources as data url in the file (not very good), or do like construct, make 2 types of project files: Project folders that need to be opened with the file system api to get access to all files in the folder including the resources or use a single file which is then basically a zip with the project folder inside it.

[4ian]

This is indeed two missing features for now.

If I have to prioritize things, the ability to import resources from an external place is the most important (this would unlock much more usage, like on Chromebooks/tablets).
As for the technical solution, there are indeed multiple ways to do it:

1. Store resources as data in the project file. 99% sure we want to avoid this because:

• this will be terrible when it comes to performance
• This is actually not simpler than other approaches.

2. Support a "zip file" approach to projects. This would be an intermediate or third solution compared to "multiple files projects" that are only supported on the desktop app. We would store the project JSON files and some or all resources as files in a zip file.

• This needs a fair amount of rework to handle the load, save and access to resources.
• Advantage is that this works offline, and potentially both on the web-app and the desktop app.

3. "Just" rework the interface to allow to select images from a public URL that can comes from Dropbox/Google Drive/etc...

• The advantage is that it already works (resources from URLs are consumed as is by the web-app, or downloaded on demand, and are downloaded when loading the project by the desktop app).
• Disadvantage is that it does not work offline. Also just an URL might not be sufficient for some storage, where there is no public URL available.

This is also linked to the support for projects between the web-app and the desktop app. For now there is a limited transfer possible from the web-app to the desktop app (the desktop app is able to download the resources that are URLs, but then your project is local and can't be opened again in the web-app).
Might be worth investigating something that allows to work either locally or on the web-app without much changes.

[arthuro555]

Or 4. Use the FileSystem Access API in the web-ide to get access to the whole project folder 👀

[4ian]

That's also an idea :) Though support is fairly limited for now. I've not looked at the primitive to see how it works, I wonder how previews would be handled with this.

[arthuro555]

Ah indeed support seems more limited than I thought, pretty much only chrome.

[Bouh]

The big problem for me here is the impossibility to import a resource from a local PC to the web app.

Because the file FileSystem Access API support is limited to Chrome I think it's welcome to use the old way, a file selector, and upload the file in memory.

A PWA is only welcome when this acts like a native application, the offline have an importance, using a cloud drive is not viable.
The use of URLs is welcome, but not user-friendly.
Asking to upload their resources in a cloud drive like GDrive isn't a solution, this should stay an option.

The prioritization for a PWA should be:
Local offline first -> local online -> cloud online (gd service?)

The choice of a zip file is very practical especially to send a whole project to a friend. And send from the local PC to the web app the whole project, offline!

This way when the user wants to download/save as on local their project a file container mycoolproject.gd5 is downloaded.

In a way let's also keep in mind that the organization of resources needs ... organization. Folders for sounds, music, fonts, and images, and videos.

The management of the resources is one of the pain points, whether in the management of the files and their organization and their import and update in the application.

[arthuro555]

If we go for a zip, which seems to me to be the best option as of now, I think JSZip is a pretty good library. I think it uses pako behind the scenes so it should be quick, and allows to load a zip, read and manipulate files and directories, and generate a new ZIP.

[blurymind]

One idea that is potentially feasible is adding integration with github. It has an easy to use rest api and tons of libraries wrapping it, its free and popular. It let's you do version control unlike gdrive.

Your game is always backed up and you can have it on a private tracker for free.

[arthuro555]

While Git and GitHub integration is in my opinion a very good and interesting thing indeed, the main problem here is finding a good storage solution that works offline I think.

[4ian]

This is interesting but a very "developer centric" view - remember most of our users never used GitHub and just want to save their game to wherever it's the more convenient (dropbox/gdrive/onedrive/their local disk/github, ideally all of that please! :)).

[blurymind]

You could get around the 5mb localstorage limit by instead using a virtual drive storage (its tmp with benefits). You could also do a combination of the two with json files being cached in localstorage, images and bigger files on a virtual drive and all of that can be backed up and saved to github. Its what yarn editor can do now, although it doesn't do the tmp part and uses gist instead of git. I can edit offline and close the app without saving even. Then when reopened it just loads all my work from cache and at all times when online I can save to gists

…

On Thu, 15 Jul 2021, 00:07 Arthur Pacaud, ***@***.***> wrote: While Git and GitHub integration is in my opinion a very good and interesting thing indeed, the main problem here is finding a good storage solution that works offline I think. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2799 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVPDXWAVUHETDP4JKP3TXYKENANCNFSM5AFWOLYQ> .

[blurymind]

The nice thing of github is that you can override files and all you have to do is add a token for gdevelop to it. This file access api may not be ready in another 5 years. Does Firefox support it? Seems far off to me and I've been waiting for it for the last year or so :(

…

On Thu, 15 Jul 2021, 00:12 Todor Imreorov, ***@***.***> wrote: You could get around the 5mb localstorage limit by instead using a virtual drive storage (its tmp with benefits). You could also do a combination of the two with json files being cached in localstorage, images and bigger files on a virtual drive and all of that can be backed up and saved to github. Its what yarn editor can do now, although it doesn't do the tmp part and uses gist instead of git. I can edit offline and close the app without saving even. Then when reopened it just loads all my work from cache and at all times I can save to gists On Thu, 15 Jul 2021, 00:07 Arthur Pacaud, ***@***.***> wrote: > While Git and GitHub integration is in my opinion a very good and > interesting thing indeed, the main problem here is finding a good storage > solution that works offline I think. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#2799 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ABRRWVPDXWAVUHETDP4JKP3TXYKENANCNFSM5AFWOLYQ> > . >

[4ian]

@blurymind, please use the "Write a reply" below the messages you're answering to ;)

[blurymind]

For people new to gamedev yes you are right they don't know. For anyone making it in a team at a gamejam or working in a team, our existing options are not so great. Anyone serious making a game with gdevelop probably does use some sort of version control