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: GitHub - playcanvas/playcanvas-rest-api-tools: A set of tools to use with the PlayCanvas REST API for common jobs such as downloading a build and archiving a project
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: http://pirron.one/playingincanvas/using-ionic-playcanvas
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).
3 Likes
Iâm investigating this path mentioned here, but just wondering - would this require the app to be hosted somewhere else or can it be tried/tested while using the playcanv.as-hosting? Would you know?
Eventually you will have to host it in your own server, mainly to be able to add/edit your own manifest.json and service worker .js file. Those are the entry points that make a PWA site.
I see, that is the plan I was just wondering if I had to self-host while testing to even confirm things are working as intended. I see when downloading an app there is allready a manifest.json with some data generated for any playcanvas app, is that right?
Yes, thatâs correct. I think it contains the minimum required schema to qualify as a PWA. So potentially you can open the browser settings and select install.
To further edit it and change its behavior you will need to self host. Especially if you plan to use other features like notifications or install prompt.
I tried creating a blank project, then ran it 1. hosted at playcanv.as and 2. downloaded for local hosting. Neither of them produced that little âInstall appâ icon in chrome on windows
The manifest.json file included by default looks like this, but perhaps thatâs not enough to render the install button.
"short_name": "Blank project",
"name": "Blank project",
"start_url": "",
"display": "fullscreen",
"icons": [
{
"src": "thumbs/180.jpg",
"sizes": "180x180",
"type": "image/jpeg"
},
{
"src": "thumbs/360.jpg",
"sizes": "360x360",
"type": "image/jpeg"
},
{
"src": "thumbs/540.jpg",
"sizes": "540x540",
"type": "image/jpeg"
},
{
"src": "thumbs/720.jpg",
"sizes": "720x720",
"type": "image/jpeg"
}
]
}
I used the lighthouse audit tab in the Dev tools to report PWA compliance and found it requires a 512px png icon listed in the manifest, so after adjusting that my install icon appeared!
This is all running it locally though. I would love to have this working while hosted on playcanv.as for a testing period however. Is it possible to even edit or control whatâs in the manifest.json files and index.html for a copy hosted on playcanvas?
Changing index.html or manifest.json is not supported when using playcanv.as. You would need to self-host then.
I see. I tried another approach with dynamically inject the DOM with the manifest needed and the service worker, but eventually ran into the same problem as described by @Mark_Lundin in this thread: [SOLVED] PlayCanvas to PWA
Here is my exception:
ServiceWorker registration failed: DOMException: Failed to register a ServiceWorker: The origin of the provided scriptURL (âhttps://s3-eu-west-1.amazonaws.comâ) does not match the current origin (âhttps://playcanv.asâ).
Guess thatâs a dead end in this case then.