Yes, there are obviously some challenges here ...
Just out of curiosity, why exactly do you need a PWA version? You can of course also add "Shortcut" links on iPhone, that simply opens the link in browser, problems solved.
Just for reference, you should use the condition
to only add the web sharing API button when it's supported. It's mainly supported in mobile browsers, Edge, Safari, Chrome (Windows only). Besides, I would only enable it for mobile, because the functionality is kinda useless on desktops.
https://caniuse.com/web-share
pooh The [item] does not have [item.url_path] defined, probably because the images are proxied?
Correct. There simply is no url_path
(direct link) for your files, and that's why they need to get proxied by PHP.
pooh For now I've solved that using ["index.php?download=" + encodeURIComponent(item.path)"], if there is another way please let me know.
No, that would be the (only) way, same as we proxy files natively. There are two options ?download=
and ?file=
, the only difference being ?download
will attempt to always force download, even if the file can be viewed in browser (for example jpg). The ?file
option will attempt to load the file into browser (for example jpg), and would only download files if they are not supported in browser. If used with Web Share API, it might not matter, but I would try ?file=
, because this would be the most correct way to proxy a file.
pooh On the iPhone however there is no contextual menu, only a download icon. Even when I use the [condition] you specify above.
Yes, unfortunately the POPUP is hardcoded to use the basic "Download" button in mobile (touch) mode, because the context menu dropdown doesn't work properly in the gesture-based popup interface on touch devices.
pooh As far as I can make out, this download icon is hard coded into files.js (on line 2880 when shown in Safari's inspector). Is there any way to change the behaviour/look of this button without modifying files.js?
Yes, that's correct, and unfortunately there are no API options to customize the popup topbar.
pooh Maybe if you could give it an unique ID= tag in a new release I could try to overrule and change its behaviour in JavaScript using getElementById.
You can grab the button from class name pswp__button--download
, but now you are entering very dodgy territory if you intend to hi-jack and manipulate the button via javascript.
let download_button = document.querySelector('.pswp__button--download');
pooh Edit: using local assets and assigning an id to the <a> tag of the download button, for some reason getElementById can not find it. Using a script called from footer.js. Still experimenting...
You don't need to assign an ID (see above), but you may need to run your script in setTimeout(...)
, because not all elements are immediately rendered on page. Files.js is the last script to load on page, so you would definitely need to run it after all javascript is loaded, and perhaps even use a timeout delay before capturing the element.
You might get a little stuck on the download element. Instead of trying to replace the behavior of the download button, I would instead inject your own button with unique ID AFTER the download button insertAdjacentHTML(), so you can work on it independently. Then, if required, you could just hide the download_button with CSS.