I just discovered that Youtube allows you to install it as an App in chromium-based browsers (nothing new though). I know how to create a service worker for react js based SPAs, with registering service workers, activation, caching, etc., But I also noticed that after installing the YouTube site on my windows 11, I am getting additional menu options upon right-clicking it (My subscriptions, Trending, Etc), with respective icons for each option. Any idea how we can build something like this for a SPA using service workers? I have no idea what the terminology for this feature is. Attaching a screenshot just for reference.
Related
We all use Zoom or Webex to attend the meetings, then there is a popup that allows you to open the desktop app or you can continue on the web app. I want to implement a similar kind of user experience in my web application. But unable to understand how did they(zoom and Webex) did it.
I am not looking for a foolproof solution I just need to know the best approach to achieve it.
Update:
I am not doing it exactly like Zoom or Webex does. I have a button in my application so I am doing it onClick event.
In order to do this, you must register a protocol on your OS (ie. you can use protocol lib to register a specific one in an Electron app), this would allow your app to be called with simple URIs like myappprotocol://myappaction?myappparams
They make you install a client, that has caused many controversies since this is a gate for eventual security breaches
https://medium.com/bugbountywriteup/zoom-zero-day-4-million-webcams-maybe-an-rce-just-get-them-to-visit-your-website-ac75c83f4ef5
Service workers are not supported by all browsers; caniuse estimates that they would work for approximately 85% of users.
If i built a PWA, does it need to use service workers?
This will depend on the browser, but if you want your PWA to be installable, most browsers require that there is a service worker which has a fetch handler.
https://web.dev/install-criteria/#criteria
Referring to Chrome:
Registers a service worker with a fetch handler
It also says:
Other browsers have similar criteria for installation, though there may be minor differences.
In my experience service workers aren't mandatory to deliver a PWA with offline functionality.
As long as your PWA pages are properly marked as cacheable you can run your PWA completely offline and it won't need a connection to your server if the lifetime of the page is in the browsers cache lifetime.
The "Create Shortcut" functionality of Chrome is driven by the webmanifest and not by the fact that it uses a service worker. You can create a desktop shortcut for a page if it has a manifest.
You can furthermore do an AJAX call to a URL which is definitively not cached to figure out if you are running off-line or online and update your page if the 'update' URL tells you to do so by using location.reload()
I noticed some news sites such as Washington Post are able to pop up Web Notifications even though I don't have the site open in a tab. I don't recall this being possible before. How is it even possible for a website to execute the JS necessary if the site isn't open? How does one accomplish this using Web Notifications, is there a particular setting to accomplish this?
I believe they are using Push Notifications via Service Workers.
You can check the current support status to see if it's fit for you. It's well supported in modern browsers (although perhaps not the full specification).
A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need
a web page or user interaction. Today, they already include features
like push notifications and background sync.
and
A service worker has a lifecycle that is completely separate from your
web page.
Application cache as a means of creating offline browser apps has been deprecated. The current way to make an offline web app is to use service workers.
Service workers allow you to bootstrap all network requests and provide content for them. Since service worker can run even when user closes the tab, it can provide cached content when internet temporarily doesn't work.
However when I got interested in offline web applications, it was because I hoped to use even when I have permanently no access to internet. I created simple offline app, but it does not work when I close and open the browser — I get message that page cannot be loaded.
Is there a way to make service worker offline app work even after browser is closed and re-opened? If not, are there any planned standards for this? It would be very valuable to mobile users.
Can an offline JavaScript app using service workers work after browser restart?
Yes, it can, provided it's cached all of its resource previously. This example goes through the steps of ensuring that.
The reason it can is that when you navigate to the URL that the service worker is registered for, the cached copy of the service worker is activated and it's given the opportunity to satisfy network requests for the app. So if you've cached everything, and you satisfy all of the requests by handling the fetch event, your app can be entirely offline.
There is a great deal of development in the area of service workers. Chrome is taking the lead, but Firefox follows closely. IE support is negligible however.
You can see the W3C working draft. For browser support, check e.g. here.
I also suggest taking a look at Nolan Lawson's pokedex.org application, it is an offline-capable web app based on service workers.
I want to build and application through which an user can input some settings and the application will start a background service to perform some tasks based on those settings.
I want to run the application and the background service only in the Simulator (I know that it requires "certified" mode for running a background service, but I am not thinking right now for posting the app on Firefox Marketplace).
Can someone provide me with some links or tutorials on how to build and run a background service on FIrefox OS platform? Can anyone also explain how to communicate between the background service and the application? (I have search the MDN and on google, but no luck).
Also, is there some way for application (regular app or background service) to listen for notifications from a server?(I am looking for a method in which the application does not pool, but is notified by the server).
Thanks,
Tamash
Can someone provide me with some links or tutorials on how to build
and run a background service on FIrefox OS platform?
This is planned of a future version of Firefox OS. See "Background services" at https://wiki.mozilla.org/Webapi
Also, is there some way for application (regular app or background
service) to listen for notifications from a server?(I am looking for a
method in which the application does not pool, but is notified by the
server).
This doesn't seem to be implemented yet. See https://wiki.mozilla.org/Webapi and https://wiki.mozilla.org/WebAPI/SimplePush
The wiki page above is out of date - though it hints at what's coming.
Currently the RequestSync API has landed - it allows scheduled wake-ups for synchronization purposes. This is not an always-on background service. It's planned to ship in the 2.2 release of Firefox OS.
RequestSync is not yet documented on MDN but the implementation bug is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1018320
RequestSync is a partial solution until we have full background synchronization through Service Workers.
Service Workers are in the implementation stage now: https://bugzilla.mozilla.org/show_bug.cgi?id=903441
Draft documentation on MDN is here:
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API