Dear All,
I am trying to run application on offline mode using windows chrome browser. I am getting CORS error.
Is there any best option to run locally on chrome browser.
Thanks in advance.
Not really unless you host a local server.
How big is the build? If it’s small (eg <50MB), you could potentially embed all the data in the HTML file using https://github.com/playcanvas/playcanvas-rest-api-tools#converting-a-project-into-a-single-html-file
There is also an option in Chrome to prevent that CORs issue too if that’s a possibility? https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file
You could also wrap the PlayCanvas app in an Electron app too.
Hello @yaustar,
Thank you for these tips which are very useful.
In my case, for security reasons I can’t compile my code to create an .exe, neither launch a server locally and my project can be more than 500mo.
The solution embedded in an html is a very good compromise, but is it possible to exceed the limit of 50mo. If yes how ?
If you have other suggestions I would be happy to learn more.
Thanks !
Hi @enzo_rdr and welcome,
Not sure about that, but another option is to convert your PlayCanvas build to a PWA (progressive web app).
As soon as the app fetches the resources (first open), you can set rules that resources will fetched from the local storage / local DB and then it can fully work offline.
You may be able to find several tutorials online on how to get started with.
2 Likes
There is an option now to have the data in external files: https://github.com/playcanvas/playcanvas-rest-api-tools#extern-files
There are still limitations on using WASM files/modules though so bear that in mind.
2 Likes
Thanks, it works well !
However, the project takes 2mins to launch for 450mo, there is no progress loader and the page launches a JS alert to close it.
Do you have any other idea to bypass these problems or is it just not possible?
What’s the JS alert? It shouldn’t have that unless it’s saying that the page is busy and asks for you to wait.
Those two issues aren’t possible to bypass easily. You would effectively need to find some way to add the Base64 data asset by asset instead of single file. It might be possible to modify the engine loading logic to read text files that have asset Base64 data instead.
This would need a patch/change to the engine and the tool.
1 Like
yes it is exactly that :
Ok, thank you very much for your answer!
Hi @Leonidas ,
Yaustar’s proposal is a good compromise but I wanted to understand what you suggested.
I’m coming back to you because I’m having trouble understanding how to integrate the Playcanvas export with PWA as you suggest.
I first looked in general how the PWA works and I don’t really see how to integrate it with my playcanvas export.
Then I found your site where you show how to use Ionic: Using Ionic in PlayCanvas | Playing in Canvas
Is this what you suggested by PWA ?
And will it allow me to launch the project 100% offline?
Thank you !
Hi @enzo_rdr,
So a PWA is a broad concept and basically means allowing a web based application to be installed on a mobile OS and have some of the features that native apps enjoy.
It’s super easy to convert any existing website (not only PlayCanvas builds) to a minimum PWA by adding a special manifest.json file on your downloaded build. Check this article:
Of course this won’t solve the problem on its own, it will basically allow your PlayCanvas application to be “installed” as a shortcut to a mobile or desktop devices (windows support PWAs).
From there you can add a second file, a service worker javascript script, where you can add network rules on how the application will fetch files, how it will store them on cache and when it will prefer to serve a cached file instead of re-downloading. This way you may be able to achieve a fully offline experience.
It’s an advanced topic but there are several resources online that may help you approach it (it’s not PlayCanvas specific).
2 Likes