search

captainbrosset / file-handling-demo

A demo app showing all of the ways files can be opened or saved on the web
https://cranky-shaw-fe95e8.netlify.app/
12 stars 3 forks source link

Browser support table for the different file inport/export features #3

Open simevidas opened 2 years ago

simevidas commented 2 years ago

I thought I’d test your demo app across the major browsers and platforms. I’ve run into a few issues (marked with ❓), and I’m not sure if in these cases the problem is my device, a testing mistake, the browser, or your app. If it’s the browser, I’d love to link from this table to the relevant browser bug. If anything in the table is incorrect, please let me know.

(I’ve subsequently updated the table based on feedback.)

🖥 = limited to desktop platforms 📦 = requires installation 🚧 = experimentally supported ✅/⛔️ without label = applies to all platforms (iOS only counts for Safari)

Chrome Edge Safari Firefox
<input type=file> ✅ ✅ ✅ ✅
🖥 Drag and drop file ✅ ✅ ✅ ✅
Paste file ✅ Windows
✅ macOS
⛔️ Android*		 ✅ Windows
✅ macOS
⛔️ Android*		 ✅ ⛔️ (bug)
📦 Web Share Target ⛔️ Windows†
⛔️ macOS
✅ Android†		 ✅ Windows†
⛔️ macOS
⛔️ Android†		 ⛔️ ⛔️
📦 File Handling (?) 🚧 Windows‡
⛔️ macOS
⛔️ Android		 ❓ Windows‡
⛔️ macOS
⛔️ Android		 ⛔️ ⛔️
File System Access ✅ Windows
✅ macOS
⛔️ Android		 ✅ Windows
✅ macOS
⛔️ Android		 ❓§ ⛔️
<a download> ✅ ✅ ✅ ✅
Share file
(navigator.share)		 ✅ Windows
⛔️ macOS (bug)
✅ Android		 ✅ ✅ ⛔️ (bug)

*On Android, it is not possible to paste files to the web because the clipboard can’t contain files. †On Windows, only PWAs installed through Edge appear in the system’s share dialog. On Android, only PWAs installed through Chrome appear in the system’s share dialog. ‡File Handling is experimentally supported in Edge on Windows, but when choosing to open a text file in the demo app (“Open with…”), the app opens in its default state without the file’s contents; see #5. §File System Access is experimentally supported in Safari, but it doesn’t (yet) work in the demo app.

captainbrosset commented 2 years ago

Thank you @simevidas for the very detailed report! Would you be interested in making a PR to add the table to the README.md file? It seems very useful to have this information on the repo, so that we can engage with others in trying to address some of the limitations.

A few notes:

  1. Tapping the file input opens the dialog, but it won’t let me choose text files.

Great find! Turns out the syntax I used in the accept attribute was incorrect. Fixed in https://github.com/captainbrosset/file-handling-demo/commit/2998e45a826482501e7d75c1fa5460ddfbcf3619

  1. Pasting local files to the web does not seem to be possible on Android. I asked on Twitter.

Thanks for asking. Seems like it's indeed not supported on Android. I tested on iOS, and as you noted it works great!

  1. Installed PWA appears in the system’s share dialog in Edge but not in Chrome.

It's worth clarifying here: there are 2 browser instances involved here: the one used to install the PWA, and the one where the share request originates from. If I install the PWA using Edge, then it appears in the system's share dialog no matter which other browser (or app) I used to share something with the app.

But, if I install the PWA using Chrome, it does indeed seem like it does not get registered on Windows as a share target.

  1. Installed PWA opens, but the file does not open in it.

This seems like a regression as it used to work. Either I broke something or the API changed (which could very well be possible since it's experimental). I'll investigate in #5.

  1. The API is experimentally supported, but it doesn’t work in the demo app.

I didn't get a chance to test this yet myself. The only Mac I have is too old to install the latest technology preview channel. What I know is that Safari only supports the File System Access API in an "origin private" mode which means you can't just open any file from disk, but instead are constrained to a separate location just for your origin. I think the API differs too, so I'm not surprised the demo doesn't work on Safari.

  1. The API is supported, but it doesn’t work in the demo app. This could be https://github.com/mozilla-mobile/fenix/issues/24120.

I see from the comment on this issue that it's due to the iframe codepen uses. So this must be something else.

The other thing is you've marked webshare as not working on Firefox at all on Windows and MacOS which seemed odd to me because it definitely used to work when I implemented that part of the code (or at least that's what I remember). But I can see now that it doesn't work. The navigator.canShare function returns false. So it could be the way that the file is created that it doesn't like. I'll investigate in #6.

simevidas commented 2 years ago

I’ve updated the table. I’ll make a PR soon, but first I’d like to investigate what exactly is going on in Firefox with paste on desktop and web share on Android.