offline, cross-tab communication (javascript-only) - javascript

Is it possible to find foreign instances of certain website? Ofc theese are independently opened tabs (not by window.open). I need to prevent user from opening 2 tabs, and send message to previously opened tab to inform that it's impossible to open 2 tabs. 2 Intependent tabs may break page offline storage and webSQL structure, so that I can't allow people to use 2 tabs. It's also semi-offline app so it needs to be client-side solution.

You can communicate across tabs using localStorage. Every time you write a value, a "storage" event is fired on the window object on every tab (except the current one).
http://diveintohtml5.info/storage.html
Scroll down to "Tracking changes in the html5 storage area"
The event will include event.key, event.newValue, event.oldValue.
This only works in modern browsers.

In 2021, you can use service worker:
https://github.com/gyteng/service-worker-event
notice: service worker only works in https protocol

localStorage can be used to track windows. You should take into account a situation when window crashes - it will leave the garbage in localStorage.
Accessing a common resource from several windows simultaneously may be done by mutex based on localStorage.
I've recently published the interwindow communication library (all features are described in readme). It provides thread-safe data sharing, cross-window locks and event broadcasting. It also solves some IE issues.

Broadcast Channel is design for this
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
but the native api only support modern browsers.
there is a npm package support all old browsers as well
https://www.npmjs.com/package/broadcast-channel

You don't have control over that. The user can do basically whatever he/she wants on the computer.

Related

Are service workers ever removed automatically by the browser?

I've been trying to make PWAs that reliably work offline on and off for the past year, but every time I write a new service worker, it works as expected for a week or two and then just breaks (until reconnecting). I thought it was due to the site's data getting evicted, but the local storage is often intact when I reconnect to the internet so it can load. Recently I also had one of the service workers remain active, but its cache storage was deleted, as well as the other service workers (I've got multiple different sites on the same origin, some of which have service workers. It's my GitHub Pages).
According to the spec, it sounds like service workers should always remain registered unless the data for the whole origin is evicted. I also don't think my service workers are accidentally deleting their caches or unregistering themselves as the issue only happens after not using them for a while, in which case they aren't running. Clearing Chrome for Android's cache also doesn't break the PWAs when offline, so I don't think I'm manually doing anything that's breaking them. Clearing an individual PWA's storage and cache also doesn't break it.
The relevant sentence in the spec:
"A user agent must persistently keep a list of registered service worker registrations unless otherwise they are explicitly unregistered."
(the unregistered service workers also don't show up in chrome://serviceworker-internals/ )
Any ideas? Do you think this is a bug? I've mostly seen this in Chrome for Android, but I think I'll try some other browsers as well to check. Unfortunately I can't test any of this very well as it's quite unpredictable and takes weeks.
These are the 2 main sites to try, as I use the same template for a few, although I don't think it'll be that helpful:
https://hedgehog125.github.io/Bagel-PWA/
https://hedgehog125.github.io/Bagel-V2/ see https://github.com/hedgehog125/SvelteKit-Plugin-Versioned-Worker/blob/main/src/worker.js for the proper service worker template
Thanks for any input
Edit: I thought it would be worth a try to see if that first site still works in Firefox while offline. It does, despite not visiting it in Firefox for maybe 6 months. I guess this is a Chrome bug/feature then?
Edit: Updated the title

Web Notification API - website doesn't need to be open?

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.

How should I create "screen sharing" with SignalR

I know this is not a specific question, but I just want to get design ideas about a screen sharing web site with SignalR.
We want to add a link on our website which is called "Share My Screen" and then our support team be able to see the content of the browser (not whole desktop) and even they be able to click or type on customer browser.
I was thinking to do it as
Taking screen shot from browser by js (by http://html2canvas.hertzen.com for example)
send taken screen shot to server constantly (I don't know how yet)
Server sends the received screen shot to our support team browser
Capturing mouse move and key press on support team browser
Sending this captured data to customer browser
Since each part of this needs a lot of work I just want to gather all possible ideas to find a tested solution
First of all, I do not think your idea of capturing screen is really doable with javascript technology. Security would be a huge issue, you would need to process a high amount of data, and syncing events would be a nightmare no matter how you approach it. Capturing and sharing tab content and events is a much more manageable goal.
If you are aiming to use this for people who can not manage to install a remote control app, then we can count newer technologies such as WebRTC out due to browser compatibility issues.
There is a good blog post discussing this issue here - (Screensharing a browser tab in HTML5?).
I especially like the first method, using Mutation Observer (browser support) and Web Sockets (browser support). It basically syncs two html documents through the use of mutation observer and uses web sockets for communication. You could use SignalR instead of standard web socket API for communication if you prefer.

Is IndexedDb dependent on cookie?

I am working on a prototype where we need to support offline data modification of web application, the application is expected to sync back the data when an internet connection is restored. I have taken a look at various HTML5 in-browser storage option and indexeddb looked like the one I wanted. But I am not sure if the data will be persisted between browser close. Is that possible? One more question if I delete the cookie of the browser, will data in indexedDb will be wiped out? My initial tests shows data gets deleted on cookie clear of browser.
If indexeddb is not a viable option, are there any other alternatives to it which can persist data when internet connection is not available?
As per specification database created with indexedDB should be persistent acrross navigation and browser session.
But current implementation is like persistent cookies. So removal of cookies might remove your database too.
As per google chrome indexedDB is a type of temporary storage.
Chrome: https://developer.chrome.com/apps/offline_storage
For microsoft & firefox it is persitent :
Microsoft: https://msdn.microsoft.com/en-in/hh563494.aspx
Firefox: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
Check supported browsers before use.
http://caniuse.com/#search=indexeddb
It isn't dependent on a cookie, though if you need to know who the user is (likely) you'll probably end up using a cookie of some variety...
As for offline sychronization... I thought about this a lot previously and created a project... The documentation for it is detailed and explains why and how... It may help, or at least give you things to think about. It has very recently been updated to support IndexedDB!
http://forbesmyester.github.io/SyncIt/index.html
In this space there is also RemoteStorage ( they were/are looking at using SyncIt + other bits in the project going forward ), Hood.ie and the commercial FireBase in this field.

Shared IndexedDB store between different web browsers

Using Dart lang, I've generated an application that stores several list of objects. I'm very happy with the result, congrats to Dart Team, but I have a question:
If I store several data using Chrome, is there any way to read this info from other web browser, i.e. Firefox.
That's why the user works with several web browsers in the same machine, he/she doesn't care which browser is open at that time, he/she wants to use the application in the current opened web browser.
Browsers can't access each other's data directly, but, given your diagram, it looks like IndexedDB is on the shared server and not in the particular browser so I can't see the problem.
If you have your database running on local server and it is accessible only with Dartium and for some reason you don't want or can't compile the browser part to JS(with dart2js) or do something else to make it accessible from the browsers without DartVM. then I can think of 3 ways how to perform browser to browser data transfer without the server(on which application is hosted):
With HTML5 Drag and Drop between browser windows.
Creating WebRTC client\server and transferring the data this way.
Using remote server and simple authentication with Gmail,Facebook etc. [the reasonable way]

Categories

Resources