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

igiona · 2023-01-10T21:35:29Z

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

The text was updated successfully, but these errors were encountered:

jeromelaban · 2023-01-10T21:44:39Z

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

igiona · 2023-01-11T06:16:09Z

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 · 2023-01-11T21:57:27Z

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 · 2023-01-12T08:03:16Z

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 · 2023-01-12T12:59:40Z

@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 · 2023-01-12T14:38:51Z

@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 · 2023-01-12T20:15:25Z

@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 · 2023-01-12T20:36:52Z

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 · 2023-01-12T21:30:00Z

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 · 2023-01-12T21:36:27Z

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 · 2023-01-13T07:41:57Z

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 · 2023-01-13T10:24:03Z

@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 · 2023-01-13T14:16:07Z

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

igiona added difficulty/tbd kind/bug triage/untriaged labels Jan 10, 2023

jeromelaban changed the title ~~PWA service-worker.js : SyntaxError: Unexpected token 'export'~~ [Wasm] PWA service-worker.js : SyntaxError: Unexpected token 'export' Jan 11, 2023

jeromelaban added project/core-tools Categorizes an issue or PR as relevant to core and tools and removed triage/untriaged difficulty/tbd labels Jan 11, 2023

jeromelaban transferred this issue from unoplatform/uno Jan 12, 2023

jeromelaban mentioned this issue Jan 12, 2023

Adjust service worker installation #660

Merged

jeromelaban self-assigned this Jan 12, 2023

jeromelaban closed this as completed in #660 Jan 12, 2023

jeromelaban reopened this Jan 12, 2023

jeromelaban mentioned this issue Jan 13, 2023

ServiceWorker is not available when the app is not at the root #662

Open

jeromelaban closed this as completed Jan 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

igiona commented Jan 10, 2023

jeromelaban commented Jan 10, 2023

igiona commented Jan 11, 2023 •

edited

Loading

jeromelaban commented Jan 11, 2023 •

edited by unfurl-links bot

Loading

asadullahrifat89 commented Jan 12, 2023

jeromelaban commented Jan 12, 2023

asadullahrifat89 commented Jan 12, 2023 •

edited

Loading

igiona commented Jan 12, 2023 •

edited by unfurl-links bot

Loading

jeromelaban commented Jan 12, 2023

igiona commented Jan 12, 2023 •

edited by unfurl-links bot

Loading

jeromelaban commented Jan 12, 2023

igiona commented Jan 13, 2023 •

edited by unfurl-links bot

Loading

DierkDroth commented Jan 13, 2023 •

edited

Loading

jeromelaban commented Jan 13, 2023

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

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

Comments

igiona commented Jan 10, 2023

Current behavior

Expected behavior

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

Workaround

Works on UWP/WinUI

Environment

NuGet package version(s)

Affected platforms

IDE

IDE version

Relevant plugins

Anything else we need to know?

jeromelaban commented Jan 10, 2023

igiona commented Jan 11, 2023 • edited Loading

jeromelaban commented Jan 11, 2023 • edited by unfurl-links bot Loading

asadullahrifat89 commented Jan 12, 2023

jeromelaban commented Jan 12, 2023

asadullahrifat89 commented Jan 12, 2023 • edited Loading

igiona commented Jan 12, 2023 • edited by unfurl-links bot Loading

jeromelaban commented Jan 12, 2023

igiona commented Jan 12, 2023 • edited by unfurl-links bot Loading

jeromelaban commented Jan 12, 2023

igiona commented Jan 13, 2023 • edited by unfurl-links bot Loading

DierkDroth commented Jan 13, 2023 • edited Loading

jeromelaban commented Jan 13, 2023

igiona commented Jan 11, 2023 •

edited

Loading

jeromelaban commented Jan 11, 2023 •

edited by unfurl-links bot

Loading

asadullahrifat89 commented Jan 12, 2023 •

edited

Loading

igiona commented Jan 12, 2023 •

edited by unfurl-links bot

Loading

igiona commented Jan 12, 2023 •

edited by unfurl-links bot

Loading

igiona commented Jan 13, 2023 •

edited by unfurl-links bot

Loading

DierkDroth commented Jan 13, 2023 •

edited

Loading