"Add to Homescreen"
Closed this issue · 23 comments
Hey Bora
It would be awesome if this allowed for the app to be installed on desktops and mobiles.
This is now easy to do with golang, however it requires a Service worker i believe.
Spec:
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
https://go-app.dev/ is a golang WASM based framework that does it.
https://github.com/maxence-charriere/go-app
Example of the functionality
Desktop:
Now the Desktop App Icon exists:
**Mobile also works and creates a standard app icon **
You can also use flutter to do it, but i think maybe golag is best since you are already using golang for your frent end.
If you need help i am available to help.
Hi,
Thank you for the issue. I'll research about it.
I guess adding manifest and a icon would be enough to trigger installation.
It is only available for chrome on desktop, right?
Hi @gedw99
I've added PWA support.
Could you test it?
Hi,
Thank you for the issue. I'll research about it.
I guess adding manifest and a icon would be enough to trigger installation.It is only available for chrome on desktop, right?
NO. "Add to home Screen" works on all Desktop and Mobile operating systems. And all browsers that run on those Os's.
For Users, it is not always apparent that they can "add it to their home screen", cause the browser does not Prompt to do it.
I have seen some devs add a specialised prompt that, based on detecting the user agent, shows a little popup with an image to show them.. I think that can be looked at next iteration, based on feedback though.
Hi @gedw99
I've added PWA support.
Could you test it?
I wish i had time. But on holiday. If i get time will test it.
Might be best to just release it using a subdomain for the version ? "https:v.0.1.1//quik.do/"
then you can easily get feedback from people via Issues and Reddit.
Adding versions as subdomain is a good idea. I'll consider about that. But, I'll migrate this app to GCP soon. Gcloud Run this feature natively. For now, I can create staging.quik.do for testing. Thanks for advice.
I tested with Chrome/Macbook, Firefox/Android, Chrome/Android. They works great.
I'll research about tricky way to handle Safari/iOS.
perfect. i also use cloudrun. It makes things easy...
"dev.quik.do" might be better, cause you want the git tag and subdomain to match :)
Cause its cloud run and it costs ZERO to have many not running, you can also use git sha as the subdomain also in the future also.
also there is a way to use make files with github actions. so then the github actions just call the make files.
It will mean you can use gcloud tools and also even ko for cloud run, both locally and in CI with same code.
you dont need any of the other github actions from google or anyone then !!
it make things DRY. you can essentially run everything from your laptop and it will all just work in github actions servers too.
examples of this DRY approach:
https://github.com/amplify-edge/main/blob/master/.github/workflows/ci.yml#L80
calls
https://github.com/amplify-edge/main/blob/master/Makefile#L47
https://github.com/amplify-edge/booty/blob/master/.github/workflows/ci.yml#L17
https://github.com/amplify-edge/booty/blob/master/.github/workflows/ci.yml#L50
calls
https://github.com/amplify-edge/booty/blob/master/makefile#L8
Using make commands in Actions is quite logical. We use this approach at the work.
Currently, I'm deploying manually for quik.do, I'll set up ci/cd when I start using Cloud Run.
great :)
i just tried the "Add to home" on my mac.
works fully with camera etc.
Screenshot from Chrome for Mac
on ios ( safari and chrome), Add to home works, but camera does not.
Screenshot on IOS, after Add to Homescreen has been done:
This unfortunately expected due to the Apple restrictions, from my experience.
The only way will be to make it work is to make it a real app.
Using URL Schemes properly set, users when they open the web link, are then send to the app ( or if not installed ) to the App store to install the app, and then the link opens and the camera will work.
I have done this with flutter apps, but not with golang apps.
With a golang app, you normally revert to use a webview and that won't work either as far as i know, because its using a webview and apple just wont allow it.
Restrictions of iOS are so annoying. Thank you for the testing.
Did you try in native Safari instead of webview app(home screen)?
Yep Safari on IOS "Add to HomeScreen" is a non starter. Apple you suck...
Safari ( Safari Technology Preview ) on Mac Testing Follows:
- Camera working fine.
- But "Add to Home Screen" does NOT exist on Safari for Mac. I had no idea it did not exist... So, just to be sure that its is not your code, I also tried this PWA demo ( https://love2dev.com/pwa/add-to-homescreen-library/ ), and the "Add to Homescreen" works on Chrome for Mac, but not on Safari for Mac.
so in summary regarding Apple....
Safari for Mac:
- camera works
- Add to Home screen not existing.
Safari for IOS:
- camera does not work
- Add to home screen is working
based on the PITA factor with apple safari, you might get a laugh out of this: https://news.ycombinator.com/item?id=27600631
Because the only way to make it work on apple devices is to install it, it might be worth giving gio a shot.
Gio works well for simple apps on web, desktop and mobile. On web is compiles to a simpel wasm file. No PWA support but thats easy.
There is an issue for it here: pion/mediadevices#195
Worth at least looking into. But yeah i know its a departure from the simple way things work now in quik.
Thank you.
I'll consider creating a native app for iOS but it will kill simplicity.
Yeah i know it sucks.
Options:
Use a webview: https://github.com/Inkeliz/gowebview
- this works with gio also.
Use gio ( https://github.com/gioui ) , which works is pure golang and targets web ( as wasm), desktop, mobile, and also appletv ( amazingly )
I have been using gio and its really turned into an amazingly productive system now and is getting better quite quickly.
this example is pretty close to what you would use: https://github.com/gioui/gio-example/tree/main/x/component
Gio seems promising. I'll try to make a sketch in my spare time.
Btw, thank you for letting me know about PWA. I added pwa support to my other application too (lirik.app).
this is a decent article about how to use pion media device to capture the multi media stream on desktop.
https://gabrieltanner.org/blog/broadcasting-ion-sfu
then the tricky part is displaying the stream . Gio does not yet have a videos player. It was started but not finished. I can find the link if you want .
gio is pretty awesome. Was pretty rough before.
Pion media devices will do the camera and audio capture. https://github.com/pion/mediadevices
But for playback have to get audio and video playing in gio.
audio example: https://github.com/vsariola/sointu works.
- go run sointu/cmd/sointu-track
video example: https://github.com/dejadejade/giox does not work. - go run giox/player/cmd
Hi, I've just tried quik.do with an iPhone. It's not showing camera media on the site.
But, good news, it's sending the camera data. It is buggy but seems it's possible to access camera from browser.
Well done !!
The fact that it does not show visually but is sending it under the hood is quite weird .
But really happy it works.
if you want me to test from my iPhone or Mac just tell