Add PWA Functionality #708
Conversation
|
Hi @cgjgh, Recently I wanted to create a shortcut to my flowforge dashboard D2 on my Android smartphone, but there was no "Add to home screen" menu option available in Chrome. After some searching the reason seemed to be that dashboard D2 was not a PWA... Very useful PR! |
|
I believe the Add to Homescreen capability was added a few weeks ago. It certainly now works for me. |
|
Add to Home Screen option was available on iOS at least, but seemed to only make a web shortcut which ran in a full screen browser. No caching or background worker which could now be used to receive push notifications for instance. Also I’ve frequently gotten blank white screens on launch which lasted until Safari browser cache was cleared. This pull request fixes issue. Also Dashboard logo did not appear on installed app icon, now present in iOS, Windows and Android. |
@cgjgh |
To clarify, notifications from a PWA will show up as native device push notifications, originating from and linking to PWA app, which will have its own icon and window instead of browser’s.
As I understand service workers are not exclusive to PWAs, but rather PWAs build on top of them. PWA can also work offline, not relevant in the case of Node Red, but can help with caching to improve launch speed, providing a more native app feel. As such, they support various native functionality such as push notifications, badges on PWA icon, geolocation, biometric authentication, etc, features that are more heavily restricted on iOS requiring web app to be installed as a PWA. Example PWA - test notifications ReferencesNotifications and Push API Example Example Notification on lock screen
Badges on home screen icon
PWA notification settings in iOS settings
|
|
Thanks!! |
There was a problem hiding this comment.
Firstly, thanks for the PR! Really appreciate the contribution, and keen to get this merged asap.
Feedback:
- We seem to be missing a
package-lock.jsonfrom your dependency updates, which is preventing the automated build through our GH actions? - I've installed locally, and run our tests and there are many failures, but will need to investigate in more detail in order to understand the causes. With your local deployment, please do run
npm run cy:runin order to run our E2E tests and ensure no regressions/problems are introduced.
|
I will look into the above errors later today, think some updated files were not added to commit. |
cgjgh
force-pushed
the
main
branch
2 times, most recently
from
eccf331
to
7333265
Compare
Add PWA functionality using Vite-PWA, -Includes service worker -Cross platform installable: Windows, iOS, Android -Implements caching with automatic updates and outdated cache cleanup -Auto light and dark mode switching of status bar
|
The E2E Tests are now failing here in line with how they failed when I run locally. Cypress required an on |
|
is there a plan when this will be released? looking forward for this functionality. |
One the E2E tests pass - waiting on @cgjgh to take a look. The service worker introduced is preventing the |
Disabled service worker in cypress tests by intercepting request and returning empty service worker file
|
Load event not firing seems to be an ongoing issue with service workers and Cypress as can be seen here: cypress-io/cypress#27501. For now the only solution seems to be to disable service worker while testing in Cypress, which I've done by intercepting request for sw.js and returning empty object preventing it from registering:
Let me know whether you approve of this fix . |
|
Thanks @cgjgh - re running the tests action now, I'm away on vacation until Tuesday 16th, so can do a full and proper review then. Unless @Steve-Mcl or @sherbastian can take a look in the mean time - but no pressure to, as I'd still need to cut a release to make this available for all anyway |
|
Trying to run locally, but missing Need to add |
|
@joepavitt Fixed, please try again. |
|
@bartbutenaers it might be possible to add the pages as shortcuts in the manifest. Here is a good article: https://medium.com/going-fullstack/adding-shortcuts-to-progressive-web-apps-53e249b06aaf |
For me the biggest problem is that it appears not to be possible in Android to rename the shortcut on the home page. The result is, I presume, that I will not be able tell which shortcut is for which system. Perhaps the app name could be provided via settings. js. It might be good to be able to change the icon too. |
Android 14 on a Pixel 6. It seems much more solid than the 'web shortcut', the data is up to date as soon as it's opened, and it is framed very nicely to fit the screen. Don't know if the 'Server disconnected' popup is part of PWA, but it's a really useful addition, and gives me greater confidence to view my data. Don't know it it's possible, but the NR icon does not look good (especially on a dark theme), can we use our own icons?
|
|
Which version of Android are you on @colinl ? And which browser? When I click "Add to Home Screen" I get presented with the option to name the shortcut
|
Separate addition that we put into For the icon, it's not configurable at the moment, but that's partly my fault as I asked @cgjgh to change it to white background as per other icons used, we can change the default |
Joe that looks as though you are creating a web shortcut & not installing the app??
|
Android version 14. Brave and Chrome browsers. You should not be getting the Add to Home Screen any more, as @Paul-Reed says. However, there seems to be something odd going on. I removed all my shortcuts and the installed web app and restarted the phone. Now, when I try to open the dashboard in either browser it just appears to hang with a blank screen. I do get the Install App option on the dropdown menu though. |
Unfortunately the app doesn't seem to work, I just get the blank screen! So for the moment I have no access at all. |
|
Hmm, not sure what is going on here. I think it may be to do with the fact that I am using Cloudflare ZeroTrust with Google Oauth access control. I think the reason that I was getting the blank page was that it was waiting for the authorisation. I have managed to get it working again, it will be interesting to see what happens the next time the auth times out and I need to login again with google acct. |
|
Still working ok here. I add the app by selecting 'add to home screen' from the context menu, that then presents the 'install app' (like the screenshot above), and then get a confirmation pop-up that the app was successfully installed. |
On the home screen do you see the icon with the white surround, I was getting that, but now I am not, and although it says it is installing the app I am not conviced it is, it looks just like a shortcut. If you hold down on the icon what options do you see? The first time I installed it I had different options, but having cleared everything and starting again I just get the App Info and Remove options like a regular shortcut. |
Yes
|
You're right, I am on |
I believe it needs to be HTTPS. If you try from a FF instance, you should see "install app" for v1.8.0 and the add shortcut is no longer offered. That's why I suggested we could/should serve dynamic manifest with the pages offered as shortcuts. See previous comment. As well as shortcuts, the app name should be set by the base name or some other property in the users flows. That is because if you "install" more than one dashboard site as an app, all of your application names installed on your device will all be exactly the same. |
|
@Paul-Reed Does Site Settings let you edit the name and icon? |
Unfortunately no, there is no option for either the name or icon. |
I asked because, at some point, I did see such an option, but I have since removed the app and now can't get it to install again. It asks if I want to install it and I say yes, but then it just comes up with the Add to Home screen options. I guess that the install is failing for some reason and it is dropping back to Add to Home Screen. I am using https. |
|
Have you cleared your browser cache?
…On Sun, 28 Apr 2024, 13:45 Colin Law, ***@***.***> wrote:
Unfortunately no, there is no option for either the name or icon.
I asked because, at some point, I did see such an option, but I have since
removed the app and now can't get it to install again. It asks if I want to
install it and I say yes, but then it just comes up with the Add to Home
screen options. I guess that the install is failing for some reason and it
is dropping back to Add to Home Screen. I am using https.
—
Reply to this email directly, view it on GitHub
<#708 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHNWDGHZFUAIPC72ZH7DTDY7TVM7AVCNFSM6AAAAABFGGTG7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBRGQ3TGMRXGA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Yes, it didn't seem to help. I will have to steal one of the family's phones to see if it will install there. |
|
Not sure if this will help, but I had some strange behaviors with version Also, I tried installing Dashboard on two different Android device emulators, Android 14 and 15 using both Chrome and Brave. All scenarios installed and didn't get any blank screens or anything, although I did notice that Install App option was not always immediately (about 30 second delay) available and showed instead Add to home screen which would just add a web shortcut. Also, I noticed that it had the Chrome icon as well on app icon which is inconsistent with PWA app icon behavior. Chrome and Android versions: As for setting PWA app for which webpage to open, that's predetermined in the generated manifest file with The option @Steve-Mcl mentioned could be a workaround for now, but if PWA functionality is to be retained, I'd suggest solving this in the future by changing the root paths in ui-base config of Dashboard 2.0, which is currently still in development I understand. This would create different root paths for the individual dashboards allowing them to be installed separately. |
|
I think I have worked out what is going on with the blank screen I have been getting sometimes. To recover the situation I have to browse to the node-red root url (not the dashboard) and then I get the login screen before the editor opens. Then if I go back to the dashboard application it opens ok. |
|
It sounds like the client code needs to have something that picks up a 401 response code from a client request and triggers a standard redirect to an endpoint defined in the D2 config. |
|
I have added issue #817 to track this problem |
|
Is there a logic to which dashboard page is initially opened, when the 'app' is opened? |
|
Does it open the same one as if you open it in a PC browser window? It does for me. There is an issue #728 (not PWA related) saying that it does not necessarily open the one at the top of the list, but I have not confirmed that myself. |
Yes, maybe just a coincidence, but the page that it always opens by default is the first page that I created after installing DB2. |
I think that is what the issue i linked to says. |
Description
Integrate PWA functionality with Vite-PWA, which includes a service worker, is installable across platforms such as Windows, iOS, and Android, implements caching with automatic updates, cleans up outdated caches, and features automatic switching of the status bar between light and dark modes.
Necessary service worker, workbox and web manifest files are generated in build folder at build time.
Related Issue(s)
Closes #88
Checklist
flowforge.yml?FlowFuse/helmto update ConfigMap TemplateFlowFuse/CloudProjectto update values for Staging/ProductionLabels
backportlabelarea:migrationlabel