I just want to write a small script that does Foo() whenever I receive a push notification from my browser(chrome). I tried to find some stuff out there but all I found was how to send said notifications, but I only want to receive them. Anybody can lead me in the right direction?
I do not own the backend that sends the notifications
There is no frontend, its notification from the browser
I am currently trying with a browser extension, but cant access the notification. I do not know if browser extension is the way to go, that should be clear from my initial post.
If the question is about intercepting notifications that are generated on the web page with the Notification API, this answer explains how: Intercept HTML5 Web Notifications in a browser environment
To sum it up, it consists in the creation of a Proxy as a wrapper of the native Notification in order to hook into its constructor and execute arbitrary code.
If the question is about intercepting Push Notifications then it is impossible because they are based on the Service worker. You can't hook into the service worker, and you can't register your own service worker without overriding the existing one (which will break the web page), as stated in the documentation:
If there is an existing service worker available, the new version is
installed in the background, but not yet activated — at this point it
is called the worker in waiting. It is only activated when there are
no longer any pages loaded that are still using the old service
worker. As soon as there are no more pages to be loaded, the new
service worker activates (becoming the active worker).
Related
Been looking into Service Workers and something that stuck out was the install life cycle. Since a service work is not available till after the web page is fist visited and the refreshed it means it would not be possible to use a service worker to serve client side only assets. Is this true?
I'm looking for a solution where A Web Application was able to collect user input as file contents and then have a service worker serve those assets to an IFrame. The use case being a browser based code editor like JSFiddle or Code Pen where multiple files could be created (JS, CSS, etc.) and the IFrame's requests are intercepted and provided for by the what was entered. That way things like ES6 modules could be split across multiple files all without having to save them to a back end server.
Is this even possible? And if so what is a good way to help the user through that first time refresh cycle as in the first visit such assets would be missing as the service worker hasn't been activated yet?
It is possible to use Service Workers to serve client-side only assets, but you'll need to handle the first load yourself, as the Service Worker won't be active until the page is reloaded.
high-level approach for handling the first load:
Store the user's input in IndexedDB, a client-side database that can be accessed from the Service Worker.
On the first page load, check if the user has any saved content in IndexedDB. If there's saved content, display it in the IFrame directly.
If there's no saved content, display a default placeholder and register the Service Worker.
Once the Service Worker is registered, it can intercept requests made by the IFrame and serve the content stored in IndexedDB.
When the user makes changes to their content, store the updates in IndexedDB, so they persist even if the user closes their browser.
This should ensures that the user can use your app even if the Service Worker isn't available, and the Service Worker can take over once it's been registered.
on MDN Web Docs you fill information on using Service Workers and IndexedDB together in the Service Workers API documentation
I want to give the user a speed feel when he accesses my website. If I cache the initial page in service worker, then I can achieve it. But I am having the following doubts.
Is there any way to update that cache even user does not have any tabs with my website?
Is there any memory limitation?
1) Not in a simple way - your Service Worker is suspended until something wakes it up, for example the user opening your app. Or the push message. So you might run your cache update flow in a push message handler and send the push to all subscribed users whenever the update should happen. But you have to be aware that there are limitations of how many pushes can the app receive and/or how long the handler can run.
"Normally" this is done when the new Service Worker version is installing and requires reload (or manual handling) to take effect.
2) Yes, the general storage limit applies. It is OS-specific and you can query for the estimate with Quota Estimation API (Chrome only by now).
I have recently been facing a problem regarding a web-push notification system via service worker.
After upgrading our service worker's javascript to use the payload sent along with the push data in the event, all the users that registered to our push notification service prior to the service worker modification do not receive the notifications anymore.
I was able to observe that there seems to be an encryption problem at sending the push notification to the google API to then be forwarded to the user's chrome device.
What confuses me is that, while updating a service worker (i.e. in the install event) the subscription (returned by self.registration.pushManager.getSubscription()) object doesn't change, so I don't really undersand why would there be a problem to send the notification if the user information provided by the chrome api remains the same.
Could it also be because of a chrome upgrade that somehow changed the way to encrypt push data?
Have you guys faced the same problem ? Do you have any leads on where could the problem come from ?
Thanks in advance :)
I will be under the assumption here that
upgrading our service worker's javascript
means that there is a substantial change in your SW code and how it handles caching and stuff. My guess there is how you wrote the SW code and Check out this answer. I haven't tried it our yet. But it sounds like a viable solution.
I'd like to implement service workers instant load for my website with the simplest implementation possible.
My idea is this - user opens webpage, gets cached version (app shell) and after the server return original content, it will be rerendered. Is that even possible? I couldn't find any example of that.
When the fetch event is called for the request then respond with the app-shell from the cache. and then wait Untill your server respond with the result then use postMessage to send the data to the browser. In your website's javascript add a message event listener and fills the data you receive, in the app-shell using javascript html. your app-shell must have some empty component that can be filled later.
For code reference refer to this link.
https://serviceworke.rs/strategy-cache-update-and-refresh.html
I've been looking at the Web Notification API or Desktop Notification API. I understand how it's constructed and the number of attributes and events that it supports. The notifications are meant to be separated from the browser sot that even if the browser is minimized for example the notification can still be displayed.
My question is, is there a way to link the notification with actions on the web page? In particular, I want to close all notification dialogues upon refreshing the page. How can I make that happen?
Thanks in advance.
You don't mention a service worker but I'm going to assume you have one since you need it for the Push and Notifications APIs.
When the page loads, you could send a message to your service worker instructing it to close all notifications. You can then do that within the worker like this:
self.getNotifications().then(function(notifications){
notifications.forEach(function(notification){
notification.close()
})
})
However you can skip the message to the service worker and just do this from the page via the service worker registration as follows:
navigator.serviceWorker.getRegistration().then(function(registration){
registration.getNotifications().then(function(notifications){
notifications.forEach(function(notification){
notification.close()
})
})
})
However, note that getNotifications() is only available from Chrome 44. Before Chrome 44, or in other browsers, I don't believe there's a way to do what you want.