I am developing Progressive Web Apps with Laravel. I have referred PWA with Laravel for developing. In that first I generated service worker, then updated laravel mix after that set manifest file. In the layout I checked for service worker and push notification support. After registering service worker, install and activate are successfully triggered but fetch event is never triggered even when the browser set to offline as in the image browser offline. Also referred this video PWA LARAVEL. Code for package.json file is as shown in the image: package.json code for webpack.config.js file is: webpack.config.js, section of code in the blade(view) for registering service worker is:service-worker registration. Service worker is generated in public folder of my laravel project. I am new to Laravel and PWA. Thank you.
I got the answer. Actually in my laravel project I had removed public from url. But service worker will receive fetch events for everything on its domain; that is if we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/). So I should change my url pattern to public. Thank you.
Related
My Codemagic pipeline is configured to fetch sources from my repository, build web and publish it to Firebase hosting.
The build is each time successful, but the changes from my last commit are not there, so I assume that the publishing part somehow not woking properly.
In the logs though everything looks great, my last commit is fetched, and firebase logs say that deploy is complete with the link to the site and all. (see below)
How could I "Debug" this case, any ideas on what is wrong?
you can try following steps to debug such type of issues:
open site in incognito mode to ensure issue not related to browser cache
check Cache-Control and Date response headers for main.dart.js file to ensure you have properly configured cache behaviour in Firebase Hosting
https://firebase.google.com/docs/hosting/manage-cache
https://firebase.google.com/docs/hosting/full-config#headers
I hope it will help
On the high level, I have a PWA with React frontend and .netcore backend. I use service worker for caching and offline ability, in conjunction with workbox plugins for some precaching feature.
The app uses Windows Authentication. Which works fine if it wasn't a PWA app. It also works fine the first time the PWA app launches, I get the username, password login popup.
However from the second time visiting the app, it wouldn't show the login popup, the app fails at pulling data from the backend because it is unauthenticated. One weird behavior is that, if I open Chrome Dev Tools(by F12), then the login popup immediately shows up.
I thought it's caching related and somehow the service worker interfered with the server side authentication workflow. Maybe because the index page is cached by the workbox precache plugins, and it did not cache with the fetch header of 'credentials': 'include'? I tried adding the fetch option to other api routes, which are cached by workbox plugin RegisterRoute. However I didn't find a way to add it to the precacheAndRoute(self.__WB__MANIFEST). Wondering if that's the problem. But I'm also not sure why having Dev Tools open would trigger the popup to display.
Any input is appreciated.
I am new to web push notification area. I want to send firebase web notifications from web to web. I tried doing that and ended up with this error
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration)
I dont know where am I went wrong. Thanks in Advance
You need to add the service worker file firebase-messaging-sw.js to the location where your files are served. This is the service worker firebase looks for.
Also, you need to share code with examples of what you are doing. No one is going to write your code from scratch.
Finally got the answer.
We need to copy firebase-messaging-sw.js file and save it in the root of the folder.
Since I used xampp, I ve push my push folder inside htdocs folder (/xampp/htdocs/push/), but you need to make sure that the firebase-messaging-sw.js should be in the root of the localhost(/xampp/htdocs/). i.e, when you search localhost/firebase-messaging-sw.js in browser, you shouldn't get a 404 error.
I am currently using Auth0 with Loc7 in Angular and an ASP .Net Web API v2.
The project works fine locally. The user can log in using the widget and the API sees the User as authorised with no issue.
When the app is published the API returns 401 unauthorised when a call is made.
There is no issue with Angular app no matter where on the web space it is placed so I do not believe it is an issue with the Allowed Callback URLs in the Auth0 dashboard.
The config works fine locally and there are no major changes when being published except the database connection string.
The database is an exact copy of the local database.
The API MVC Template works fine but does not do anything aside from load and show routes. I have not changed the template since it was generated.
There are no errors on the server.
The API is in a newly created app directory on the server.
Auth0 Dash reports the login from the Angular code successful. The profile is returned with a valid token viewed through the dev console.
Has anyone else had a similar issue? Could this be an issue with how the hosting is set up?
Happy to post more info, I am not really sure what to post it is a fair amount of code.
I am deploying a PWA to firebase using the tutorial from the polymer project website. I have no issues deploying to firebase, but if I deploy a second time the new page does not load. It will load the old page until I clear the cookies. I see understand that the way a PWA site works is like an application where it stores parts in memory for faster load times. Is there a setting I need to change to make it load most recently deployed webpage? I appreciate all the help, thanks in advance!
You might be seeing an effect of your service worker. Try deleting the currently registered service worker from your browser so that the new one can take over.
In Chrome 51/52, open DevTools while on your site, and go to the Resources tab, and then Service Workers on the left panel. Click Delete to remove the service worker. You could also check the box for Update on reload, which allows you to update the service worker simply by refreshing the page.