[Wasm] PWA service-worker.js : SyntaxError: Unexpected token 'export'

[igiona]

Current behavior

A freshly PWA WASM application created using VS22 template, creates the necessary PWA files, but while executing I get the following error on the browser (chrome 108.0.5359.125 (Official Build) (64-bit) (cohort: Stable)):

Uncaught (in promise) SyntaxError: Unexpected token 'export'
    at service-worker.js:11:26

As result, the under "installability" the browser reports an error.

Expected behavior

The service-worker is loaded successfully, and the browser can install the application.

How to reproduce it (as minimally and precisely as possible)

Create a fresh Uno WASM with the PWA option enabled.
Load the published output to a web server and check the Chrome dev-tools.

An example can be found here: https://www.immo-electronics.ch/scewo/figma/

Uno Platform Check v1.10.0.0

Workaround

The issue seems to come from the "export { config }" line in uno-config.js, which can't be "eval" at runtime within the service-worker.js .

I tried to C&P the "offline_files" list directly into the service-work.js, but I got the following error:
Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Request failed

The same error can be also seen in this Uno based website: https://nuget.info/packages which appears not to have the "export" statement into the uno-config.js.

Works on UWP/WinUI

None

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

    <PackageReference Include="Microsoft.Extensions.Logging" Version="6.0.0" />
    <PackageReference Include="Microsoft.Windows.Compatibility" Version="6.0.0" />
    <PackageReference Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.4.0" />
    <PackageReference Include="Uno.Toolkit.WinUI.Material" Version="2.4.2" />
    <PackageReference Include="Uno.WinUI.WebAssembly" Version="4.6.39" />
    <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.6.39" Condition="'$(Configuration)'=='Debug'" />
    <PackageReference Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.6.39" />
    <PackageReference Include="Uno.Wasm.Bootstrap" Version="7.0.3" />
    <PackageReference Include="Uno.Wasm.Bootstrap.DevServer" Version="7.0.3" />
    <PackageReference Include="Uno.WinUI.Lottie" Version="4.6.39" />

Affected platforms

WebAssembly

IDE

Visual Studio 2022

IDE version

17.4.3

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

Thanks for the report. Can you try updating to the latest uno.wasm.boostrap package and let us know? This was fixed recently.

[igiona]

Thanks for your prompt reply.
I did as you mentioned, and I updated the nuget package to the latest version: 7.0.11.

The error in the service-worker.js that occurred while fetching the uno-config.js is solved. Thanks for the hint!
On the other hand the issue with the installability still remains due to the following error:
Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Request failed

Updating the package to the (currently) latest dev version (8.0.0-dev.65) did not solve the issue either.
Chrome still reports the "no matching service worker detected" in the devtools-application tab.

[jeromelaban]

Thanks for the update. This looks similar to unoplatform/uno#10929, where some files specified in the offline list cannot be loaded causing the worker to fail to register.

GitHub

[WASM + PWA + .NET 7] PWA is not working after deploying to Azure Static Web App, IIS, and GitHub Pages · Discussion #10929 · unoplatform/uno

Hello @jeromelaban , I am trying to enable PWA for this repo: https://github.com/asadullahrifat89/honk-hero-uno-platform This only has a WASM head and I have set these in the .csproj file: <Wasm...

[asadullahrifat89]

Should I try not using the VS22 template and try adding the manifest manually which proved to work when there was no VS22 template for PWAs?

[jeromelaban]

@asadullahrifat89 you won't be able to fix this using a custom configuration. This is related to files not being able to be downloaded properly and causing the worker to not be installed properly.

[asadullahrifat89]

@asadullahrifat89 you won't be able to fix this using a custom configuration. This is related to files not being able to be downloaded properly and causing the worker to not be installed properly.

Alright, do you have any fixes planned that might be around anytime soon?

[igiona]

@jeromelaban thanks for the fix, I tried on my end and indeed the caching issue is now gone and the console looks clean.
On the other hand, the issue still persists:
see https://www.immo-electronics.ch/scewo/figma/

[jeromelaban]

Thanks for trying it out. Indeed, the installation issue is not the same. I wonder if this is related to the "scope" field in your manifest. Could you set it to ./ or /scewo/figma/ to see if it helps?

[igiona]

I tried to change the scope as you mentioned but it didn't help
I also tried to re-generate the whole distribution package, re-apply your patch, and I now see that I get an interesting output:
[ServiceWorker] Failed to fetch ./package_9f45c810898ac5da43db5c15897fb12483116170/service-worker.js
=> https://www.immo-electronics.ch/scewo/figma/

I guess in my previous playground I did copied the service-worker in the "package" in one of the many trials to fix the issue_

I then moved the deployment straight to the website root:
=> https://www.immo-electronics.ch/
and it worked! But the
[ServiceWorker] Failed to fetch ./package_9f45c810898ac5da43db5c15897fb12483116170/service-worker.js
is still there

Any idea why the service worker fails if is placed in a sub directory?

[jeromelaban]

Thanks for the update. The service-worker.js change is part of #660, using the boostrapper 8.0.0-dev.77 or later should make this particular error go away.

Now with regards to the sub path, this means that you may also need to change this, so that the service worker gets registered at the right location. Still, there may be additional issues there, so let us know if this helps.

[igiona]

Hi @jeromelaban, I tried dev-77 and after manually removing the "invalid file" I'm in the same situation:

compiled without <WasmShellWebAppBasePath>/scewo/figma/</WasmShellWebAppBasePath>
works on chrome: https://www.immo-electronics.ch/

compiled with /scewo/figma/
does not work (same installation error): https://www.immo-electronics.ch/scewo/figma/

compiled with ./scewo/figma2/
does not (app doesn't even load due to 404 on basically all JS) : I also tried https://www.immo-electronics.ch/scewo/figma2/

Interestingly, on Firefox none of the above works

[DierkDroth]

@jeromelaban I saw some console errors - which I believe they are related - as I'm trying to make my app a PWA:

A bad HTTP response code (404) was received when fetching the script.
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('XXX/app/wasm/Latest/') with script ('XXX/app/wasm/Latest/service-worker.js'): ServiceWorker cannot be started

('XXX' as a place holder for the real domiain)

Next I updated to latest Bootstrap 8.0.0-dev.77 (full config in screenshot below) but now am getting the error as per 1st screenshot below right on startup: the app doesn't event start.

Not sure if relevant by I also have this in my project file
<WasmShellWebAppBasePath>/app/wasm/Latest/</WasmShellWebAppBasePath>

What am I doing wrong?

[jeromelaban]

@igiona @DierkDroth thanks for the update. These are not related to the original issue here, so let's track it in #662.