4 ms·

New Patterns for Apps

101 points by tomayac 4y ago

skybrian 4y ago
Under "how to save a file" [1] it tries to use window.showSaveFilePicker (which has poor browser support) and falls back on creating an invisible link and clicking on it. It seems a bit much, versus just having a download link, possibly styling it as a button. What do you get for that? [1] https://web.dev/patterns/files/ https://web.dev/patterns/files/
- tomayac 4y ago
  The advantage of using the `showSaveFilePicker()` method is that you can get a `FileSystemFileHandle`, with which you can then implement a true "edit, save, edit, save,…" flow; always saving over the current file, instead of downloading copies on each "save".
  - modeless 4y ago
    In the future you may even be able to save the handle and retain permission to the file or directory between page reloads or even browser restart. I've been experimenting with this in Chromium. There's a preliminary implementation behind a flag (--enable-features=kFileSystemAccessPersistentPermissions). The preliminary implementation is still buggy, but it's an extremely useful feature. You could use it to e.g. make a web version of VSCode that only ever has to request your permission once, and can then edit any file in your workspace directory without spamming you with more permission requests, just like the Electron version of VSCode. (The persistent file access permission is displayed in the address bar and can be revoked at any time).
    - tomayac 4y ago
      And getting the default permission period right for this feature once unflagged is something we're very actively discussing. Watch our publications web.dev and developer.chrome.com for updates on this.
  - jeroenhd 4y ago
    As a user, I think that's a very unexpected feature. When a file crosses the border from browser to file system, I expect it to remain untouched. This approach feels very unnatural to me.
    - meragrin_ 4y ago
      As a user, I think that it is a very expected feature. When use a browser as an editor, I expect it to change the file when I save it. This approach feels very natural to me.
      - svnpenn 4y ago
        > When use a browser as an editor thats the problem. You should never be doing that. You should be using an editor, as an editor. The confusion is understandable though, as in general editors [1] aren't [2] widely [3] available [4] for [5] people to use. 1. https://github.com/vim/vim https://github.com/vim/vim 2. https://github.com/emacs-mirror/emacs https://github.com/emacs-mirror/emacs 3. https://github.com/xi-editor/xi-editor https://github.com/xi-editor/xi-editor 4. https://github.com/notepad-plus-plus/notepad-plus-plus https://github.com/notepad-plus-plus/notepad-plus-plus 5. https://github.com/helix-editor/helix https://github.com/helix-editor/helix
        frou_dh 4y ago
        Yeah, there's some really dumb practices out there. Some people even exclusively run their editor inside an EMULATOR of one of these devices: https://i.imgur.com/SBUxWMg.jpg https://i.imgur.com/SBUxWMg.jpg - rather than using their actual operating system.
        kweingar 4y ago
        There are more kinds of editors than text editors, and some of them are suited to web browsers.
        gl-prod 4y ago
        I use https://www.photopea.com https://www.photopea.com as a Photo editor. When working on projects, hitting CTRL+S saves the file as I expect it to do.
- easrng 4y ago
  They're assuming you generated the file in the browser and you don't have a link from a server.
  - skybrian 4y ago
    It's possible to create a temporary URL (with data from an ArrayBuffer) entirely client side: URL.createObjectURL(new Blob(...)); It creates a blob: URL that you can use as a link.
    - gernb 4y ago
      or from a string https://jsfiddle.net/ne0z6a7p/ https://jsfiddle.net/ne0z6a7p/
    - easrng 4y ago
      That's what they suggested as a fallback, isn't it?
      - skybrian 4y ago
        More or less. You don’t necessarily have to simulate a click, though.
        tomayac 4y ago
        Right, there's now a dedicated method: `HTMLInputElement.showPicker()`.
jeroenhd 4y ago
Not very surprising, but almost none of these work on Firefox on my phone. I know it's Google, but adding a compatibility matrix before each feature would've been the least they could do. I wonder how the web contacts thing is going to work on desktop browsers. I don't know anyone who still uses their address book on the desktop. I guess Chrome/Edge/Safari may implement an Gmail/Outlook/iCloud contacts picker?
- gumby 4y ago
  > I don't know anyone who still uses their address book on the desktop. Raises hand. But I don't use gmail, chrome or Edge. The mac desktop contact manager is integrated into calendar, messaging, mail etc and all that is true on ios. I use a third party calendar and used to use a third party desktop address book and integration is perfect. Clearly these are internet apps but not web apps. I can't see how web would add any value, just friction.
- azangru 4y ago
  > adding a compatibility matrix before each feature would've been the least they could do. That would mean updating the blog post every time any of the browsers starts supporting any of the discussed features. Probably better to defer to MDN or Caniuse, which are already good for that purpose.
  - tomayac 4y ago
    Just noting that the browser support matrix is right here: https://web.dev/patterns/advanced-apps/contacts/#:~:text=contacts.select().-,Browser%20support%3A,-102 https://web.dev/patterns/advanced-apps/contacts/#:~:text=con... It's an Eleventy widget powered by MDN's browser-compat-data: https://github.com/mdn/browser-compat-data https://github.com/mdn/browser-compat-data.
butz 4y ago
Neat. Having file access allows me to build simple music player PWA and ditch all native apps. I'm trying to replace as much of native apps with PWAs as possible. But where is the alarms API? I would like to build a simple reminders PWA using web technologies, that does not require packaging it as a hybrid app (native app with webview) to show notifications at specific times. Of course, it has a lot of malicious uses, but just lock it under permission, that is off by default.

101 points by tomayac 4y ago

Under "how to save a file" [1] it tries to use window.showSaveFilePicker (which has poor browser support) and falls back on creating an invisible link and clicking on it. It seems a bit much, versus just having a download link, possibly styling it as a button. What do you get for that? [1] https://web.dev/patterns/files/ https://web.dev/patterns/files/

tomayac 4y ago
The advantage of using the `showSaveFilePicker()` method is that you can get a `FileSystemFileHandle`, with which you can then implement a true "edit, save, edit, save,…" flow; always saving over the current file, instead of downloading copies on each "save".
- modeless 4y ago
  In the future you may even be able to save the handle and retain permission to the file or directory between page reloads or even browser restart. I've been experimenting with this in Chromium. There's a preliminary implementation behind a flag (--enable-features=kFileSystemAccessPersistentPermissions). The preliminary implementation is still buggy, but it's an extremely useful feature. You could use it to e.g. make a web version of VSCode that only ever has to request your permission once, and can then edit any file in your workspace directory without spamming you with more permission requests, just like the Electron version of VSCode. (The persistent file access permission is displayed in the address bar and can be revoked at any time).
  - tomayac 4y ago
    And getting the default permission period right for this feature once unflagged is something we're very actively discussing. Watch our publications web.dev and developer.chrome.com for updates on this.
- jeroenhd 4y ago
  As a user, I think that's a very unexpected feature. When a file crosses the border from browser to file system, I expect it to remain untouched. This approach feels very unnatural to me.
  - meragrin_ 4y ago
    As a user, I think that it is a very expected feature. When use a browser as an editor, I expect it to change the file when I save it. This approach feels very natural to me.
    - svnpenn 4y ago
      > When use a browser as an editor thats the problem. You should never be doing that. You should be using an editor, as an editor. The confusion is understandable though, as in general editors [1] aren't [2] widely [3] available [4] for [5] people to use. 1. https://github.com/vim/vim https://github.com/vim/vim 2. https://github.com/emacs-mirror/emacs https://github.com/emacs-mirror/emacs 3. https://github.com/xi-editor/xi-editor https://github.com/xi-editor/xi-editor 4. https://github.com/notepad-plus-plus/notepad-plus-plus https://github.com/notepad-plus-plus/notepad-plus-plus 5. https://github.com/helix-editor/helix https://github.com/helix-editor/helix
      - frou_dh 4y ago
        Yeah, there's some really dumb practices out there. Some people even exclusively run their editor inside an EMULATOR of one of these devices: https://i.imgur.com/SBUxWMg.jpg https://i.imgur.com/SBUxWMg.jpg - rather than using their actual operating system.
      - kweingar 4y ago
        There are more kinds of editors than text editors, and some of them are suited to web browsers.
      - gl-prod 4y ago
        I use https://www.photopea.com https://www.photopea.com as a Photo editor. When working on projects, hitting CTRL+S saves the file as I expect it to do.
easrng 4y ago
They're assuming you generated the file in the browser and you don't have a link from a server.
- skybrian 4y ago
  It's possible to create a temporary URL (with data from an ArrayBuffer) entirely client side: URL.createObjectURL(new Blob(...)); It creates a blob: URL that you can use as a link.
  - gernb 4y ago
    or from a string https://jsfiddle.net/ne0z6a7p/ https://jsfiddle.net/ne0z6a7p/
  - easrng 4y ago
    That's what they suggested as a fallback, isn't it?
    - skybrian 4y ago
      More or less. You don’t necessarily have to simulate a click, though.
      - tomayac 4y ago
        Right, there's now a dedicated method: `HTMLInputElement.showPicker()`.

jeroenhd 4y ago

Not very surprising, but almost none of these work on Firefox on my phone. I know it's Google, but adding a compatibility matrix before each feature would've been the least they could do. I wonder how the web contacts thing is going to work on desktop browsers. I don't know anyone who still uses their address book on the desktop. I guess Chrome/Edge/Safari may implement an Gmail/Outlook/iCloud contacts picker?

gumby 4y ago
> I don't know anyone who still uses their address book on the desktop. Raises hand. But I don't use gmail, chrome or Edge. The mac desktop contact manager is integrated into calendar, messaging, mail etc and all that is true on ios. I use a third party calendar and used to use a third party desktop address book and integration is perfect. Clearly these are internet apps but not web apps. I can't see how web would add any value, just friction.
azangru 4y ago
> adding a compatibility matrix before each feature would've been the least they could do. That would mean updating the blog post every time any of the browsers starts supporting any of the discussed features. Probably better to defer to MDN or Caniuse, which are already good for that purpose.
- tomayac 4y ago
  Just noting that the browser support matrix is right here: https://web.dev/patterns/advanced-apps/contacts/#:~:text=contacts.select().-,Browser%20support%3A,-102 https://web.dev/patterns/advanced-apps/contacts/#:~:text=con... It's an Eleventy widget powered by MDN's browser-compat-data: https://github.com/mdn/browser-compat-data https://github.com/mdn/browser-compat-data.

butz 4y ago

Neat. Having file access allows me to build simple music player PWA and ditch all native apps. I'm trying to replace as much of native apps with PWAs as possible. But where is the alarms API? I would like to build a simple reminders PWA using web technologies, that does not require packaging it as a hybrid app (native app with webview) to show notifications at specific times. Of course, it has a lot of malicious uses, but just lock it under permission, that is off by default.