silviolleite / laravel-pwa

Looks like an app, feels like an app, but IS NOT an app.
MIT License
971 stars 156 forks source link

Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed #51

Open jishcem opened 3 years ago

jishcem commented 3 years ago

In the console, I see this error : Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

In the serviceworker.js, I have var filesToCache = [ '/offline', '/css/app.css', '/js/app.js', '/images/icons/icon-72x72.png', '/images/icons/icon-96x96.png', '/images/icons/icon-128x128.png', '/images/icons/icon-144x144.png', '/images/icons/icon-152x152.png', '/images/icons/icon-192x192.png', '/images/icons/icon-384x384.png', '/images/icons/icon-512x512.png', ];

However, if I remove '/offline', I dont see this error.

I have added this route Route::get('offline', function () { return view('vendor/laravelpwa/offline'); });

in the routes file.

Can someone guide me why this error is happening ?

gtamborero commented 3 years ago

hi @jishcem ! Be sure you have created all the resources (png) because maybe the problem is that they dont exist so they can't be cached. On my case, I had to delete all the shortcuts from the laravelPWA.php file in order to run correctly the PWA on google chrome. Use the Chrome console (f12) -> Application -> Manifest / Service worker to see that all is working fine.

You don't need to create the route offline because it's created in the /resources/views/vendor/laravelpwa/offline.blade.php and linked dinamically from the /public/serviceworker.js file.

Hope to help a bit. I have also used an icons / splashscreen generator for android / IOS devices: npm install --global pwa-asset-generator

By the way it has been a little bad experience my installation but... it works now my PWA!

jishcem commented 3 years ago

Thanks for the info @gtamborero

EkoGit-777 commented 3 years ago

@jishcem have you found the source of the problem? I found this error too. and the only time the error disappear was when I comment the '/offline' on filesToCache. and I made sure to have all icons and splash images.

jishcem commented 3 years ago

@EkoGit-777 Yes, I too commented out /offline and then it worked out for me.

adityastic commented 3 years ago

You can solve it by fixing the views in routes

Route::get('/offline', function () {
    return view('vendor.laravelpwa.offline');
});

This should let you avoid commenting out /offline from serviceworker

mnonga commented 3 years ago

Make sure there is no url that will get the response 404 Not found from the server

giviofg commented 3 years ago

Was facing this problem and found it worked by deleting any URLs (in var filesToCache at serviceworker.js) that I don't have in my project. Thank you.

rastclick commented 2 years ago

I had a similar problem

The problem was solved by adding the following files:

./public/css/app.css ./public/js/app.js

cdanielzt commented 2 years ago
Route::get('/offline', function () {
    return view('vendor.laravelpwa.offline');
});

Thanks my /offline route wasn't working just fixed it and everything works

tuckbloor commented 2 years ago

for me Route::get('/offline', function () { return view('offline'); });

and remove the resources/views/vendor/laravelpwa/offline.blade.php to resources/views/offline.blade.php

Screenshot 2022-07-09 at 23 08 30 Screenshot 2022-07-09 at 23 08 24
Nat-Crankd-Media commented 2 years ago

The route was not the issue for me,

My issue was the offline layout was throwing an error. Navigate to {url}/offline and check for errors.

It was trying to extend a layout that didn't exist.

simsar78 commented 4 months ago

Hello, in Chrome i have this error: Screenshot 2024-07-16 alle 00 55 53

I have all image icon and splash.

abedcodes commented 3 months ago

Make sure there is no url that will get the response 404 Not found from the server

Thanks @mnonga, this was the real issue, as the console error says, caching faces a problem. all routes(paths) in filesToCache in serviceworker.js should return something. except the first one(/offline) others are static files, my problem was css & js files, line 2 & 3 in this array. using npm run build these two files were being built in public/assets not in css & js directories. (i guess this is because of vitejs & package is not updated to fit newer versions of laravel.) so i changed these two lines to /build/assets/app-something.css & /build/assets/app-something.js "something" is random string generated by vite, this should be read from manifest.json as it maps css & js files, but doesn't!

also check /offline path and make sure it doesn't return 404 because of layout false path as said by @Nat-Crankd-Media