search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.79k stars 287 forks source link

Error generating web package #1074

Closed julianborghuis closed 4 years ago

julianborghuis commented 4 years ago

I received the following error when generating a package for my app

Error building package. error.manifest_required

i have put my manifest into it but it doesnt see it image

(kwebbelweb.nl)

ghost commented 4 years ago

Hello julianborghuis, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

julianborghuis commented 4 years ago

EDIT:

I can not use background sync service worker, this are my dev errors:

manifest.json:1 Manifest: property 'scope' ignored. Start url should be within scope of scope URL.
pwabuilder-sw.js:2 Uncaught ReferenceError: importScripts is not defined
    at pwabuilder-sw.js:2
(anonymous) @ pwabuilder-sw.js:2
VM2681:2 Uncaught SyntaxError: Invalid left-hand side in assignment
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
t.activateScript @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
u @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
t.runOnLoad @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
VM2685:17 Uncaught SyntaxError: Invalid left-hand side in assignment
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
t.activateScript @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
u @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
t.runOnLoad @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
VM2687:1 Uncaught SyntaxError: Invalid left-hand side in assignment
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
t.activateScript @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
u @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
t.runOnLoad @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
rocket-loader.min.js:1 A preload for 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
t.activateScript @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
P @ rocket-loader.min.js:1
callback @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
u @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
t.run @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
load (async)
t.runOnLoad @ rocket-loader.min.js:1
x @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
(anonymous) @ rocket-loader.min.js:1
favicon.ico:1 GET https://kwebbelweb.nl/favicon.ico 404
DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@pwabuilder/pwa-update.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
pwabuilder-sw.js:14 Uncaught TypeError: workbox.backgroundSync.Plugin is not a constructor
    at pwabuilder-sw.js:14
(anonymous) @ pwabuilder-sw.js:14
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/pwabuilder-sw.js'): ServiceWorker script evaluation failed
async function (async)
firstUpdated @ pwaupdate:176
performUpdate @ pwaupdate:138
_enqueueUpdate @ pwaupdate:138
async function (async)
_enqueueUpdate @ pwaupdate:138
_requestUpdate @ pwaupdate:138
initialize @ pwaupdate:138
initialize @ pwaupdate:176
D @ pwaupdate:138
tt @ pwaupdate:176
st @ pwaupdate:176
(anonymous) @ pwaupdate:176
(anonymous) @ pwaupdate:176
et @ pwaupdate:176
(anonymous) @ pwaupdate:176
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/pwabuilder-sw.js'): ServiceWorker script evaluation failed
async function (async)
firstUpdated @ pwaupdate:176
performUpdate @ pwaupdate:138
_enqueueUpdate @ pwaupdate:138
async function (async)
_enqueueUpdate @ pwaupdate:138
_requestUpdate @ pwaupdate:138
initialize @ pwaupdate:138
initialize @ pwaupdate:176
D @ pwaupdate:138
tt @ pwaupdate:176
st @ pwaupdate:176
(anonymous) @ VM2674:1
(anonymous) @ (index):5
DevTools failed to load SourceMap: Could not load content for https://kwebbelweb.nl/includes/assets/js/plugins/jquery.form/jquery.form.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://kwebbelweb.nl/includes/assets/js/plugins/moment/moment-with-locales.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
A bad HTTP response code (404) was received when fetching the script.
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.
pwabuilder-sw.js:14 Uncaught TypeError: workbox.backgroundSync.Plugin is not a constructor
    at pwabuilder-sw.js:14
(anonymous) @ pwabuilder-sw.js:14
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/pwabuilder-sw.js'): ServiceWorker script evaluation failed
async function (async)
firstUpdated @ pwaupdate:176
performUpdate @ pwaupdate:138
_enqueueUpdate @ pwaupdate:138
async function (async)
_enqueueUpdate @ pwaupdate:138
_requestUpdate @ pwaupdate:138
initialize @ pwaupdate:138
initialize @ pwaupdate:176
D @ pwaupdate:138
tt @ pwaupdate:176
st @ pwaupdate:176
(anonymous) @ VM2674:1
(anonymous) @ (index):4
(index):1 The resource https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

For now i am going to use simple offline page only because i want pwa but i want also background sync for onesignal...

lee-leonardo commented 4 years ago

@julianborghuis could we get the url for your app? We can't triage the issue without seeing what our system is analyzing.

julianborghuis commented 4 years ago

@julianborghuis could we get the url for your app? We can't triage the issue without seeing what our system is analyzing.

kwebbelweb.nl

JudahGabriel commented 4 years ago

I'm able to repro. @lee-leonardo and @jgw96 looks like we're getting 422 Unprocessable Entity for kwebbelweb.nl.

@julianborghuis we'll investigate this and get back to you.

julianborghuis commented 4 years ago

how long does this takes,

Also the background service worker dont work, i am geting error in f12:

pwabuilder-sw.js:2 Uncaught ReferenceError: importScripts is not defined at pwabuilder-sw.js:2

JudahGabriel commented 4 years ago

Also the background service worker dont work, i am geting error in f12:

pwabuilder-sw.js:2 Uncaught ReferenceError: importScripts is not defined at pwabuilder-sw.js:2

Looking at kwebbelweb.nl, you have a broken script tag: image

Your code should simply look like this:

import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);

That code snippet will load pwa-update, which will load pwabuilder-sw.js. It's the only code you need to add. Remove the <script type="module" src="pwabuilder-sw.js"></script> from your page.

JudahGabriel commented 4 years ago

how long does this takes,

No promises, but I hope to have this fixed for you this week.

julianborghuis commented 4 years ago 
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);

that should be fixed now, can you check

JudahGabriel commented 4 years ago

If I bring up kwebbelweb.nl in Edge Dev Tools, I see "Cannot use import statement outside a module":

image

The reason for that is, you need that code inside a <script type="module">. Here's what that code should look like:


<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>
JudahGabriel commented 4 years ago

Just to clarify, we have a bug in manifest detection for https://kwebbelweb.nl.

You should still fix your service worker registration as described above, though.

julianborghuis commented 4 years ago

If I bring up kwebbelweb.nl in Edge Dev Tools, I see "Cannot use import statement outside a module":

image

The reason for that is, you need that code inside a <script type="module">. Here's what that code should look like:

<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

Fixed, can you check

julianborghuis commented 4 years ago 
DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@pwabuilder/pwa-update.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://kwebbelweb.nl/includes/assets/js/plugins/moment/moment-with-locales.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
pwabuilder-sw.js:12 Uncaught TypeError: workbox.backgroundSync.Plugin is not a constructor
    at pwabuilder-sw.js:12
(anonymous) @ pwabuilder-sw.js:12
DevTools failed to load SourceMap: Could not load content for https://kwebbelweb.nl/includes/assets/js/plugins/jquery.form/jquery.form.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/pwabuilder-sw.js'): ServiceWorker script evaluation failed
async function (async)
firstUpdated @ pwaupdate:176
performUpdate @ pwaupdate:138
_enqueueUpdate @ pwaupdate:138
async function (async)
_enqueueUpdate @ pwaupdate:138
_requestUpdate @ pwaupdate:138
initialize @ pwaupdate:138
initialize @ pwaupdate:176
D @ pwaupdate:138
tt @ pwaupdate:176
st @ pwaupdate:176
(anonymous) @ VM172:1
(anonymous) @ (index):9
A bad HTTP response code (404) was received when fetching the script.
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.
pwabuilder-sw.js:12 Uncaught TypeError: workbox.backgroundSync.Plugin is not a constructor
    at pwabuilder-sw.js:12
(anonymous) @ pwabuilder-sw.js:12
pwaupdate:176 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://kwebbelweb.nl/') with script ('https://kwebbelweb.nl/pwabuilder-sw.js'): ServiceWorker script evaluation failed
async function (async)
firstUpdated @ pwaupdate:176
performUpdate @ pwaupdate:138
_enqueueUpdate @ pwaupdate:138
async function (async)
_enqueueUpdate @ pwaupdate:138
_requestUpdate @ pwaupdate:138
initialize @ pwaupdate:138
initialize @ pwaupdate:176
D @ pwaupdate:138
tt @ pwaupdate:176
st @ pwaupdate:176
(anonymous) @ VM172:1
(anonymous) @ (index):68

I get that error in devtools if i use Background Sync service worker, why!?

I let it now on my server so you can also see the errors

If you have seen enough i put the normal service worker back, so we can use a little of our pwa

JudahGabriel commented 4 years ago

You have a double service worker registration. This code appears twice on your page:

<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

Remove the duplicate.

Finally, with regards to HTTPS, your HTTPS is misconfigured on your server. Put your website into this SSL checker: https://www.ionos.com/tools/ssl-checker

You'll see your SSL is misconfigured. In particular, your server reports that it doesn't support TLS 1.2, but only supports TLS 1.3. However, trying to negotiate a TLS 1.3 connection fails. You should fix your TLS issue, perhaps by simply supporting TLS 1.2. Once you do that, HTTPS detection and manifest detection will work.

julianborghuis commented 4 years ago

I use cloudflare,

Is there a problem, can you help me?

julianborghuis commented 4 years ago

Also looks like https://www.pwabuilder.com/ the domain field doesnt work now, when you click start

JudahGabriel commented 4 years ago

Also looks like https://www.pwabuilder.com/ the domain field doesnt work now, when you click start

That works fine here, just tested.

julianborghuis commented 4 years ago

YEET fixed manifest

JudahGabriel commented 4 years ago

I use cloudflare. Is there a problem, can you help me?

Login to Cloudflare, click your domain, click SSL/TLS. What option is selected: Off, Flexible, Full, or Full Strict?

Then click Edge Certificates and scroll down to Minimum TLS Version. What is it set to?

JudahGabriel commented 4 years ago

YEET fixed manifest

Cool, I see both the manifest and the HTTPS detection working now.

julianborghuis commented 4 years ago

I use cloudflare. Is there a problem, can you help me?

Login to Cloudflare, click your domain, click SSL/TLS. What option is selected: Off, Flexible, Full, or Full Strict?

Then click Edge Certificates and scroll down to Minimum TLS Version. What is it set to?

full,

and minimum was 1.3 now 1.0 and its fixed

but i cant get a background serviceworker fixed see f12 in kwebbelweb.nl

JudahGabriel commented 4 years ago

Last thing you need to get working is your service worker. Remove the duplicate service worker registration as I described here.

julianborghuis commented 4 years ago

Last thing you need to get working is your service worker. Remove the duplicate service worker registration as I described here.

already done

julianborghuis commented 4 years ago

if you want , you can get my ftp, but you need to start a chat on kwebbelweb.nl so i can share the details safe

JudahGabriel commented 4 years ago

Next up: your site is trying to register multiple service workers. You've got this code correct:

<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

That will end up registering a service worker on your behalf.

However, you also have this code inside core.js:

if ("serviceWorker" in navigator) {
    // register service worker
    navigator.serviceWorker.register("service-worker.js");
  }

Remove this code; you already have a service worker registration via the first snippet.

julianborghuis commented 4 years ago 
serviceWorker

done, but still no progress

JudahGabriel commented 4 years ago

Now I'm seeing an error in the service worker:

workbox.backgroundSync.Plugin is not a constructor image

@jgw96 have you seen this before? I'm wondering if workbox broke the backgroundSync plugin or API. Somehow, the background sync service worker from PWABuilder isn't working any longer.

@julianborghuis This may be a bug or regression in one of our service workers. We'll investigate. In the meantime, can you try a different service worker?

julianborghuis commented 4 years ago

offline page works fine, with that,

Do i need to show it to you so you can see?

JudahGabriel commented 4 years ago

OK cool. If the offline page service worker is acceptable for your web app, go ahead and use that. Update your code and we should be all set.

julianborghuis commented 4 years ago

no i have notifications so i wait for the bugg fix

JudahGabriel commented 4 years ago

"I have notifications so I will wait for the bug fix

I don't understand. Can you clarify? Are you saying you need to support push notifications?

julianborghuis commented 4 years ago

I wait for the bug fix,

julianborghuis commented 4 years ago

When do you think background sync works?

julianborghuis commented 4 years ago

"I have notifications so I will wait for the bug fix

I don't understand. Can you clarify? Are you saying you need to support push notifications?

yes and background sync does that ??

JudahGabriel commented 4 years ago

No, background sync is something else. (In particular, background sync allows users to save data when they're offline, then push their saves to the server when online.)

Since you don't need that, I recommend you just use a different service worker, which should fix your problem. Can you try that?

julianborghuis commented 4 years ago

But can there be an onesignal notification service worker get maked?

JudahGabriel commented 4 years ago

You can easily add push notification support to any service worker:

self.addEventListener('push', function (event) {
    event.waitUntil(
        self.registration.showNotification("here's a push notification", {
            body: "body goes here!",
            icon: "/someicon.png",
            image: "/somebigimage.png"
        })
    );
});
JudahGabriel commented 4 years ago

Closing this, as your original issue about manifests is fixed. If you're still having trouble with your service worker, please open a separate issue for that.