bookmarks
bookmarks copied to clipboard
nextcloud
Implement installing as webAPK?
With v3.2.0 released you can now install the nextcloud bookmarks web app as a progressive web app on your android or iOS phone.
Thank you very much for implementing this feature. It is working great!
Would it be possible to feature the installment as "WebAPK"? This would allow the PWA to become much more independent from the Browser and some other advantages.
Here are the docs: https://developers.google.com/web/fundamentals/integration/webapks
Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
Originally posted by @szaimen in https://github.com/nextcloud/bookmarks/issues/1051#issuecomment-643833023
Hello @szaimen
I didn't know about WebAPKs. According to the article you linked this should be done automatically when installing the PWA in chrome.
Hi @marcelklehr unfortunately installing as WebAPK currently doesn't work automatically.
I've inspected the bookmarks app with "Google Chrome Lighthouse" and found those issues. I think the one that prevents installing is "Does not register a service worker that controls page and start_url"
Here is the corresponding "Learn more" link: https://web.dev/service-worker/?utm_source=lighthouse&utm_medium=devtools
@marcelklehr I am not sure but it could be problematic that there isn't a scope attribute defined inside the manifest; maybe this is the problem here. https://web.dev/add-manifest/#scope https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/service-worker.js
Here are some additional docs to compare the start_url and scope attributes. https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url https://developer.mozilla.org/en-US/docs/Web/Manifest/scope
I am not sure but adding the following line:
'scope' => $this->urlGenerator->linkToRouteAbsolute('bookmarks.web_view.index'),
to the manifest function:
https://github.com/nextcloud/bookmarks/blob/master/lib/Controller/WebViewController.php#L155
Might solve the problem.
Edit: I've tried adding that line to my productive instance and cleared the cache on android mobile chrome but it still doesn't work and still the same report by Lighthouse :/
BTW: I get those errors in the console:
and this message in the "installable" section:
Maybe it is related?
BTW: I get those errors in the console:
After testing a bit further, I think that this is the main reason why it doesnt show up as beeing installable. @marcelklehr Do you have an idea why it fails to install the service worker? Maybe it is because the script isn't actually existing?
@marcelklehr Does the service-worker work on your installation? (No issue while registering the serviceworker -> listed as installable on Google Chrome Lighthouse.)
Here, you can find a working service-worker: https://github.com/lindnerju/ePaeko/blob/master/service-worker.js
with the following webmanifest: https://github.com/lindnerju/ePaeko/blob/master/manifest.webmanifest
The service-worker is called by: https://github.com/lindnerju/ePaeko/blob/master/index.html#L38-L42
It might help you fix the service-worker. I am unfortunately not able to fix it myself since I am not a developer and have no dev setup for Nextcloud. The changes that I made to the productive instance seem to make no difference.
Mmmh, installation works with firefox but not with Chromium :/
Update: But that's only with my self-signed dev cert. On my prod server it works even in chrome.
Mmmh, installation works with firefox but not with Chromium :/
Do you have the same error message there?
TypeError: failed to register a service worker for scope ... with script ... A bad http response was received when fetching the script
Update: But that's only with my self-signed dev cert. On my prod server it works even in chrome.
Are you using a lets encrypt certificate on your prod server? If not, maybe it is a problem with lets encrypt certificates (which I am using).
Could you please have a look if you are seeing any Errors in the browser console when navigating to the bookmarks app on your prod server? This could help to debug the issue.
Do you have the same error message there?
Nope, on my dev setup i get two different errors. One is about the TLS cert and the other about a CSP rule that forbids loading of the script.
On my prod server I'm using let's encrypt yep. In the console I get ServiceWorker registered so things look good there.
I notice you're using mod_rewrite, though. Maybe there's something going wrong there, causing it to 404. On my server the URL is index.php/apps/bookmarks/ while it looks for /apps/bookmarks/ on your server.
I'm closing this for now, as I cannot replicate your issue so far and there haven't been any updates. Feel free to give me a shout if this is still an issue.
Yes, its unfortunately still an issue and it seems like I cannot provide any sensible information on this to make it reproducible for you. The only thing I can mention is, that I am using the Nextcloud VM and activated TLS using the built-in script.
So it should be reproducible following:
- install VM-Player or VM-Fusion
- Download the image from here and import it into the program
- run the initial script and set up Lets encrypt by running the built-in Activate TLS script
- install the bookmarks app
- now open the bookmarks app and you should see in Chrome that it fails to load the service worker.
I still have this problem. Seems like because of some reasons https://myncdomain.com/index.php/apps/bookmarks/service-worker.js works fine but not https://myncdomain.com/apps/bookmarks/service-worker.js. (pretty urls are enabled on my instance so the second link should work nonetheless)
So maybe always add index.php to the service worker url here?
https://github.com/nextcloud/bookmarks/blob/03c57b377e27cb3dfbab41f6736044d0d384bf89/src/main.js#L37
generateUrl already infers, whether it should use index.php. Can you post your htaccess/nginx config?
Ah okay... I don't use nginx but apache and the default nextcloud .htaccess config. You find the apache config here: https://github.com/nextcloud/vm/blob/219e21d3b303f27c3a08d48f605e391e5724b7e7/lets-encrypt/activate-tls.sh#L131-L206
Does it work on your production instance if you enable pretty urls?
Yes.
Maybe it's a nextcloud version thing? I've been successfully using this with nc 20 and 21
Okay, I think I may have understood the problem now. As far as I know are all js files never routed through the index.php when pretty urls are activated via .htaccess. So In order to make this work, you need to add index.php manually also for these instances. generateUrl doesn't work here because it modifies the url to https://domain.com/apps/bookmarks/service-worker.js. however the file is not lying in that generated directory but only generrated on the fly. So here is one place where index.php needs to be consistantly added even when pretty urls are activated... Not sure how to work around this though. Any idea @marcelklehr?