[SOLVED] PlayCanvas to PWA

Help & Support
1

Hi, I am trying to transform a PlayCanvas project into a PWA following this tutor ial:

How to build a PWA from scratch with HTML, CSS, and JavaScript (ibrahima-ndaw.com)

But it is not working yet, the test project link is PWA Test | Editor (playcanvas.com) and the build version link is PWA Test - PLAYCANVAS

I can’t debug after installing it as an app, either in a desktop or a mobile, somebody can help?

2

Hey @Nelson_Alves, what browsers/devices are you installing this on?

3

I tried in a Edge/Win desktop and in a Chrome/Android mobile.
The instalation is fine the issue is when I try to run offline after running once online.

4

So there’s a few things happening in your example.

  1. The service worker doesn’t get registered because the window load event has already fired. You should probably check if the load event has already occurred if you need it.

  2. The service worker path is incorrect /files/assets/172238071/1/service-worker.js. It also changes when you download the app, so it’s recommended to use asset.getFileUrl() instead which will return the correct url in both launcher and download. Also, make sure you don’t concatenate the scripts when you download.

  3. The scope of the service worker has not been set. This means it can’t intercept any assets outside of it’s own folder, You’ll likely to set the scope to the root ‘/’ and you’l need to allow this path using the Service-Worker-Allowed HTTP header

Hope that helps!

1 Like
5

Thanks @Mark_Lundin

I will try to do the changes that you pointed!

1 Like
6

@Mark_Lundin

I made changes in my test project PlayCanvas | HTML5 Game Engine and built PlayCanvas | HTML5 Game Engine in accordance to what you pointed out and I think the first and second points are fine now. But the third, related to Service-Worker-Allowed HTTP header is not, because I am receiving this error message

Registration failed with SecurityError: 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’).

do you know how I can do it directly in PlayCanvas editor?

7

Yes unfortunately the assets in a published Playcanvas project are served via a different origin. As you’ve encountered, this won’t work with the required same-origin policy when registering service workers. In your scenario, you’d need to self host so that you have control over the origin.

1 Like
8

Thanks @Mark_Lundin !

1 Like