Service worker send push notifications even not on the website - javascript

I'm have a personal website and I think it will be perfect if I add the push notifications feature.
I'm new to service worker, but already know about push notification. I need the service worker that send push notification even the user isn't on my website.
How do I do that? I won't use a pay service like pushcrew. I want learn how to create it.

First of all. You'll need to host your website on a secure i.e. HTTPS domain. You could use GitHub Pages for the same. It is free and easy to use.
Then you could go over this documentation. It is pretty straightforward.
Here is an awesome demo/sample.
To give you a head-start, service workers are separate js files that are registered with the user's browser. After the user is registered and subscribed a URL is generated which can be used to invoke the user's browser(serviceworker.js) (These will be invoked even if your website is not open). So you are supposed to communicate that URL back to your servers for all the users and invoke all those URLs if you are sending a push-notification to everyone. Cheers!

Related

How can I offer client side only assets via a service worker?

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

Getting feedback from a JavaScript application without a registering for a centralized service

I created a Chrome extension which is just HTML/CSS/JavaScript. When the user clicks on a button, I have it send a message to me. But the problem is I don't want to include any API keys or server information where the app can POST to as it can be used for abuse if someone was to extract this information from my Chrome app. Is there a method of getting a response from a web app with a public service where anyone can post to? I was thinking pastebin, but even that requires an API key.
You could ask the user to create their own key. For example, many GitHub extensions require an API key to make requests to the GitHub API, so what they do is they send you to a GitHub settings page where you can create a personal API key.

Sending messages to google cloud pubsub topic from browser without authentication

I want to write a simple javascript plugin that can send pubsub messages from the browser. But because these clients may not be (or may not want to) log in, I would like to have the plugin be able to send pubsub message unauthenticated. Is that possible? If not, what would be the best way to achieve this.
The specific use case here is: writing an web analytics plugin that can track something like page load and other events.
Sending pub/sub messages would require one to be authenticated against the project where the topic was created. Your client logging into a Google account would not be relevant unless you planned to give every user of the page access to your project.
What you probably want to do is have a service running that is authenticated to publish messages. Requests from the browser would be sent unauthenticated to this service and then you could publish a message (after some verification that it is a legitimate message, I expect) into Google Cloud Pub/Sub.

How can I send notifications to Chrome when the website tab is closed?

I'm trying to understand how to send notifications using the browser when my website is closed.
I see that Facebook does it but I can't get how.
Any help is welcome.
You are looking for the Push API:
The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
And the Notifications API:
The Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
You must use these in combination with a Service Worker. From the Push API documentation:
For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications using PushManager.subscribe().
You can use Roost. Roost is a push notification platform for websites. You can see its documentation to perform both client-side and server-side integrations, so that you can customize your Roost notifications as needed.

Facebook Login JS vs PHP SDK and how to keep track of users locally

A very simple question which I've seen kinda answers to.
Can you do a facebook login with PHP to authenticate a user and grab information?
Why then is there a JS version?
I just don't understand the difference between the two above options.
My web app will need to gleen the users email address as there will be a mailing list component to signing up for our service.
How do you manage this local information and uniquely identify the user each time they log in from facebook? Do you store their facebook ID?
Thanks
1- Yes - https://developers.facebook.com/docs/reference/php/
2- So you can do it on the client side.
You can get user's email address if you have appropriate permissions.
Yes you store their facebook id and associate users with it.
They both do the same thing, just on different sides: on the server or on the client.
If your authentication process relies heavily on server interaction and you have your server side code ready, use the PHP SDK. It provids you with methods to get the ID from the user. This will be unique so you can store them.
If you want to manage an application flow, say the user needs to give your website certain permissions in order to view something, it can be easy done with the Javascript SDK.

Categories

Resources