Communicating single-spa container app to angular child app - single-spa-angular

I need a help to communicate from my container single-spa to loaded angular app ( child ). when user click on parent app ( spa-container ) option, that should communicated to child application to change the mode.
it will not happen very frequently. But not able to find a way to communicate from container to loaded angular application.
there is a detail given by spa itself : spa-communication detail but not clear and there is no detailed steps. any one help me?

I'm one of the maintainers of single-spa.
We tend to be light on our opinions in the documentation about how to implement communication between modules because there are a lot of ways to implement it and each comes with pros/cons. In the situation you described it sounds like you might want to explore option #3 from the link you posted.
Custom Browser events
In the parent you fire custom events on the window. API on MDN.
Quick example
// in the parent (usually called the single-spa config or root-config in the documentation)
const event = new CustomEvent("myEvent", {favoriteMovie: 'StarWars'})
window.dispatchEvent(event)
// in the child (or registeredApplication)
window.addEventListener("myEvent", myEventHandlingFunction)
function myEventHandlingFunction(e) {...}
That should at least get you started, there are other options for communication as well and this particular approach isn't going to be the best solution in every situation.
It's also worth noting that customEvents don't work in IE11 unless you include a polyfill.

Related

Alternative to custom protocols (URI schemes)

I have been extensively using a custom protocol on all our internal apps to open any type of document (CAD, CAM, PDF, etc.), to open File Explorer and select a specific file, and to run other applications.
Years ago I defined one myprotocol protocol that executes C:\Windows\System32\wscript.exe passing the name of my VBScript and whatever argument each request has. The first argument passed to the script describe the type of action (OpenDocument, ShowFileInFileExplorer, ExportBOM, etc.), the following arguments are passed to the action.
Everything worked well until last year, when wscript.exe stopped working (see here for details). I fixed that problem by copying it to wscript2.exe. Creating a copy is now a step in the standard configuration of all our computers and using wscript2.exe is now the official configuration of our custom protocol. (Our anti-virus customer support couldn't find anything that interacts with wscript.exe).
Today, after building a new computer, we found out that:
Firefox doesn't see wscript2.exe. If I click on a custom protocol link, then click on the browse button and open the folder, I only see a small subset of .exe files, which includes wscript.exe, but doesn't include wscript2.exe (I don't know how recent this problem is because I don't personally use FireFox).
Firefox sees wscript.exe, but it still doesn't work (same behavior as described in my previous post linked above)
Chrome works with wscript2.exe, but now it always asks for confirmation. According to this article this seems to be the new approach, and things could change again soon. Clicking on a confirmation box every time is a big no-no with my users. This would slow down many workflows that require quickly clicking hundreds of links on a page and, for example, look at a CAD application zooming to one geometry in a large drawing.
I already fixed one problem last year, I am dealing with another one now, and reading that article scares me and makes me think that more problems will arise soon.
So here is the question: is there an alternative to using custom protocols?
I am not working on a web app for public consumption. My custom protocol requires the VBScript file, the applications that the script uses and tons of network shared folders. They are only used in our internal network and the computers that use them are manually configured.
First of all, that's super risky even if it's on internal network only. Unless computers/users/browsers are locked out of internet, it is possible that someone guesses or finds out your protocol's name, sends link to someone in your company and causes a lot of trouble (possibly loss too).
Anyway...
Since you are controlling software on all of the computers, you could add a mini-server on every machine, listening to localhost only, that simply calls your script. Then define host like secret.myprotocol to point to that server, e.g., localhost:1234.
Just to lessen potential problems a bit, local server would use HTTPS only, with proper certificate, HSTS and HPKP set to a very long time (since you control software, you can refresh those when needed). The last two, just in case someone tries to setup the same domain and, for whatever reason, host override doesn't work and user ends up calling a hostile server.
So, links would have to change from myprotocol://whatever to https://secret.myprotocol/whatever.
It does introduce new attack surface ("mini-server"), but should be easy enough to implement, to minimize size of that surface :). "Mini-server" does not even have to be real www server, a simple script that can listen on socket and call wscript.exe would do (unless you need to pass more info to it).
Real server has more code that can have bugs in it, but also allows to add more things, for example a "pass through" page, that shows info "Opening document X in 3 seconds..." and a "cancel" button.
It could also require session login of some kind (just to be sure it's user who requests action, and not something else).
The title of this blog post says it all: Browser Architecture: Web-to-App Communication Overview.
It describes a list of Web-to-App Communication techniques and links to dedicated posts for some of them.
The first in the list is Application Protocols, which I have been using for years already, and it started to crumble in the last year or so (hence my question).
The fifth is Local Web Server, which is the one described by ahwayakchih.
UPDATE (this update follows the update on the blog post above mentioned)
Apparently I wasn't the only one thinking that this change in behavior was a regression, so a workaround has been issued: the old behavior (showing a checkbox that allows to remember the answer) can be restored by adding these keys to the registry:
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge]
"ExternalProtocolDialogShowAlwaysOpenCheckbox"=dword:00000001
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]
"ExternalProtocolDialogShowAlwaysOpenCheckbox"=dword:00000001
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Chromium]
"ExternalProtocolDialogShowAlwaysOpenCheckbox"=dword:00000001

Customise #angular/service-worker

How to customize #angular/service-worker? I know it is not an appropriate way to modify inside the npm_modules folder. I've come across a tutorial, where the author creating an additional of 2 js files. One of the files contains service worker code whereas the other contains 'importScripts()' to import both the ngsw-worker.js file and the custom service worker file. It works fine, the custom service worker listening for the install event but when it comes to fetch event, it is not passing through this fetch event listener. Am not getting the console inside this function. I don't know why it happens in that way. Anyone know the reason or any other solution to achieve this?
Here is the link of the tutorial which I've follow,
Tutorial
This answer can be a bit late but maybe it still be useful.
Instead of modifying the Service Worker (SW) that is generated by angular, you can leave it to handle everything related to caching and offline support (which is present out of the box) and create a new service worker to handle the other tasks you need. Here you have a very good example where a second service worked is created to handle Push Notifications: Push Notifications using firestore.
You can use this example and create your own SW.
Hope it helps ;)

Save dismissible state

How do I save the state of a dismissible? When the item is dismissed it stays dismissed upon closing and opening the app?
I'm relatively new to flutter and checked out saved preferences plugin but couldn't get it to work.
You need some way to persist and restore the state of the application between launches. A common solution in Flutter is to use Redux, which is a unidirectional data flow architecture for managing state. This blog post from Xavi Rigau is quite a good introduction.
There is an example app in the GitHub repository that extends the default counter example app to use redux.
In order to persist the state between app launches, you'll need to add the persistence layer. One option would be to use your own file storage middleware (see Xavi's post and the examples in the flutter_redux repository). Another approach would be to use the Flutter redux_persist library (I haven't used this one yet).
Note: Given the complexities and details involved, I haven't included code examples here, but there is plenty in the listed references.

Disable multi-tab browsing for single session/user

[Disclaimer: I'm not sure if this kind of question is accepted here as it is about a piece of software deployed already. Rest assured I didn't drop any confidential information. Also do tell me if I violated any rules in SO by posting this so I can take it down immediately]
I have a working Learning Management System web application and I recently received a bug report about a button not showing. After investigating, I have proved that the user was not using the web app as intended. When taking an exam, he was opening multiple tabs to exploit the feature that informs him whether the answer was correct or not. He then will use this information to eliminate the wrong answers and submit all the right answers in another tab/window.
I'm using Rails 4.2. Is there a way to prevent multi-tab browsing? I'm thinking like if a user is signed in and he attempted to open a new tab of the webapp, he should see something like "Please use one tab" and all the features/hyperlinks/buttons are disabled.
Here's a screenshot of how I proved he was using multiple tabs. Notice that there are multiple logs of the same attempt # because the current implementation allows saving a study session and resuming later (this is the part that's exploited). The opening of multiple tabs searches for the most recent attempt session and continues from there. This is also the reason why most of the sessions don't have a duration value -- the user only finishes a study session for one tab (by clicking a button that ends the study session). The system cannot compute for the duration because the other sessions don't have an end timestamp.
-
This is what a single-tab user looks like:
This is more of an application misuse issue more than a bug.
You should add protection not only from multi tab, but for multi browsers aw well, so it can't be purely FrontEnd check.
One of the solutions could be using ActionCable to check if a user has an active connection already and then act accordingly.
Another, for example, generate a GUID in JS and pass it with every answer. If its different from previous answer, it means user opened a new window.
But of course the solution would depend on your current architecture, without knowing how do you currently organise client-server communication it's hard to give exact and optimal solution.
I found an answer here. I just placed this js in the application view to prevent any extra instance of the website.
Thanks for everyone who pitched in.

How to Change/update grails view (gsp) from service class

I have a Grails Application, which has a self implemented chat system. Now I am trying to refresh the sit ( or the box containing the messages in particular), as soon as a new Message arrived. So far I figured out three methods:
Poll from DB every second (every incoming message is saved to DB), which would be the easiest, but create a lot of unneccessary DB usage
Update the view from within the Messagelistener. I dunno how to do this though, what I am looking for is kind of the remoteFunction-tag as a function to call from within a service.
Update the view from domain class via beforeInsert-event. This is my least favourite option, plus I don't know how to do it for the same reasons as option 2.
If someone has a better option or a way to realize one of mine I would be very thankful :)
try http://vertx.io/ out. It's easy to setup and should do just fine for asynch-messaging

Resources