[web] Open in web or app banner

[exalate-issue-sync[bot]]

Description

User Stories

• As a mobile user who receives an ocis link ex. via messenger, I want to decide if the link should get opened in my mobile app or browser so that I have control over my tooling.

Value

Acceptance Criteria

• If the user opens an ocis link on an ios/ipadOS or android device, the user should see in the mobile browser

  • Button: [Open in App]
  • option to dismiss the banner "X"
  • banner gets shown every time the user clicks on a shared ocis link [~tbaader]add scribbles

• new config option in theme.json mobile App scheme (owncloud://...) default: "owncloud"

• Click on [Open in App] opens the file in the App

• Note: If the user has no access to the corresponding resource, a errormessage is shown by the corresponding client

Implementation Note:

• ipadOS user agent gets announced as "MacOS"
• mabye use library to detect ipads as they get annonced as "MacOS" (ex. lib "Mobile Detect")

Definition of ready

[ ] everybody needs to understand the value written in the user story [ ] acceptance criteria has to be defined [ ] all dependencies of the user story need to be identified [ ] feature should be seen from an end user perspective [ ] user story has to be estimated [ ] story points need to be less then 20

Definition of done

• Functional requirements [ ] functionality described in the user story works [ ] acceptance criteria are fulfilled
• Quality [ ] code review happened [ ] CI is green [ ] critical code received unit tests by the developer [ ] automated tests passed (if automated tests are not available, this test needs to be created and passed
• Non-functional requirements [ ] no sonar cloud issues

[michaelstingl]

Related:

• https://github.com/owncloud/ocis/issues/59
• https://github.com/owncloud/ocis/issues/1037

[michaelstingl]

Android Examples from other Services

Google Meet	GoTo Meeting	GoTo Meeting (installed)	Microsoft Teams	Zoom

Elements / features used

1. Download link
2. Link to open Android app
3. Fake "Smart App Banner" (no reliable native Android feature, but tools like smartbanner.js could help)
4. Redirect to open in App right away

Google Meet link redirects to Play Store 🤔

[michaelstingl]

• Fake "Smart App Banner" (no reliable native Android feature, but tools like smartbanner.js could help)

More information:

• https://medium.com/umamitech-blog/smart-app-banners-for-ios-and-android-a-handmade-solution-7785d6bca205
• https://www.branch.io/resources/blog/how-to-setup-an-ios-and-android-smart-app-banner-with-deep-linking-and-download-tracking/

[michaelstingl]

• Link to open Android app

More information:

• https://developer.android.com/training/app-links

[michaelstingl]

iOS Examples from other Services

Google Meet	GoTo Meeting	GoTo Meeting (installed)	Microsoft Teams (installed)	Zoom (installed)

Elements / features used

1. Download link
2. Link to open iOS app
3. iOS Safari native Smart App Banner
4. "Universal Links banner" (if you have enabled Universal Links for your domain and the app is already installed on the device, Safari will automatically show a smaller version of the app banner.)
5. Copies link to clipboard feature/hack, so the iOS apps can retrieve it from there

[michaelstingl]

Users will receive a link like this on their mobile device (mail, messenger etc):

• https://ocis.ocis-traefik.daily.owncloud.works/s/xbRJjSSUUrlmait

Link opens Web in mobile browser, and performs a request against the unauthenticated tokeninfo endpoint:

• /ocs/v1.php/apps/files_sharing/api/v1/tokeninfo/unprotected/xbRJjSSUUrlmait

% curl -s https://ocis.ocis-traefik.daily.owncloud.works/ocs/v1.php/apps/files_sharing/api/v1/tokeninfo/unprotected/xbRJjSSUUrlmait | xmllint --format -
<?xml version="1.0" encoding="UTF-8"?>
<ocs>
  <meta>
    <status>ok</status>
    <statuscode>100</statuscode>
    <message>OK</message>
  </meta>
  <data>
    <token>xbRJjSSUUrlmait</token>
    <link_url>/s/xbRJjSSUUrlmait</link_url>
    <password_protected>false</password_protected>
    <alias_link>false</alias_link>
    <id>0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!d485c939-0141-456b-8a97-5bfa9497ddff</id>
    <storage_id>0f1c87f7-92e5-4549-8197-c7ece53e2e87</storage_id>
    <space_id>4c510ada-c86b-4815-8820-42cdf82c3d51</space_id>
    <opaque_id>d485c939-0141-456b-8a97-5bfa9497ddff</opaque_id>
    <path/>
    <space_path/>
    <space_alias/>
    <space_url/>
    <space_type/>
  </data>
</ocs>

From the <id>0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!d485c939-0141-456b-8a97-5bfa9497ddff</id>, web can generate a link, that gets displayed as the [Open in App] button:

• owncloud://ocis.ocis-traefik.daily.owncloud.works/f/0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!d485c939-0141-456b-8a97-5bfa9497ddff

This link will then open the mobile app.

[michaelstingl]

Link opens Web in mobile browser, and performs a request against the unauthenticated tokeninfo endpoint:

• /ocs/v1.php/apps/files_sharing/api/v1/tokeninfo/unprotected/xbRJjSSUUrlmait

@micbar @tbsbdr @kulmann seems this doesn't work with password protected links:

% curl -s https://ocis.ocis-traefik.daily.owncloud.works/ocs/v1.php/apps/files_sharing/api/v1/tokeninfo/unprotected/qVroPUsyqNgsKAi  | xmllint --format -
<?xml version="1.0" encoding="UTF-8"?>
<ocs>
  <meta>
    <status>ok</status>
    <statuscode>100</statuscode>
    <message>OK</message>
  </meta>
  <data>
    <token>qVroPUsyqNgsKAi</token>
    <link_url>/s/qVroPUsyqNgsKAi</link_url>
    <password_protected>true</password_protected>
    <alias_link>false</alias_link>
    <id/>
    <storage_id/>
    <space_id/>
    <opaque_id/>
    <path/>
    <space_path/>
    <space_alias/>
    <space_url/>
    <space_type/>
  </data>
</ocs>

There it only works when you PROPFIND with basic-auth (link password):

% curl -s 'https://ocis.ocis-traefik.daily.owncloud.works/remote.php/dav/public-files/qVroPUsyqNgsKAi' \
-X 'PROPFIND' \
-H 'Authorization: Basic cHVibGljOjEyMzQ1Ng==' \
--data-binary $'<?xml version="1.0"?>
<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
  <d:prop>
    <oc:id />
    <oc:privatelink />
  </d:prop>
  </d:propfind>' | xmllint --format -
<?xml version="1.0"?>
<d:multistatus xmlns:s="http://sabredav.org/ns" xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
  <d:response>
    <d:href>/remote.php/dav/public-files/qVroPUsyqNgsKAi/</d:href>
    <d:propstat>
      <d:prop>
        <oc:id/>
        <oc:privatelink/>
      </d:prop>
      <d:status>HTTP/1.1 404 Not Found</d:status>
    </d:propstat>
  </d:response>
  <d:response>
    <d:href>/remote.php/dav/public-files/qVroPUsyqNgsKAi/Photos-001.zip</d:href>
    <d:propstat>
      <d:prop>
        <oc:id>0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!d485c939-0141-456b-8a97-5bfa9497ddff</oc:id>
        <oc:privatelink>https://ocis.ocis-traefik.daily.owncloud.works/f/0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51%21d485c939-0141-456b-8a97-5bfa9497ddff</oc:privatelink>
      </d:prop>
      <d:status>HTTP/1.1 200 OK</d:status>
    </d:propstat>
  </d:response>
</d:multistatus>

It doesn't work with the credentials from the owner of the resource:

% curl -s 'https://ocis.ocis-traefik.daily.owncloud.works/remote.php/dav/public-files/qVroPUsyqNgsKAi' \
-X 'PROPFIND' \
-H 'Authorization: Bearer REDACTED' \
--data-binary $'<?xml version="1.0"?>
<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
  <d:prop>
    <oc:id />
    <oc:privatelink />
  </d:prop>
  </d:propfind>' | xmllint --format -
<?xml version="1.0" encoding="UTF-8"?>
<d:error xmlns:d="DAV" xmlns:s="http://sabredav.org/ns">
  <s:exception>Sabre\DAV\Exception\NotAuthenticated</s:exception>
  <s:message>No 'Authorization: Basic' header found</s:message>
</d:error>

[michaelstingl]

The owner of a resource could query /ocs/v1.php/apps/files_sharing/api/v1/shares and filter the result for the token>qVroPUsyqNgsKAi</token>:

% curl -s 'https://ocis.ocis-traefik.daily.owncloud.works/ocs/v1.php/apps/files_sharing/api/v1/shares?include_tags=false&share_types=3' \
-H 'Authorization: Bearer REDACTED' | xmllint --format - | grep -E 'token|space_id|item_source'
      <token>qVroPUsyqNgsKAi</token>
      <space_id>0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!4c510ada-c86b-4815-8820-42cdf82c3d51</space_id>
      <item_source>0f1c87f7-92e5-4549-8197-c7ece53e2e87$4c510ada-c86b-4815-8820-42cdf82c3d51!d485c939-0141-456b-8a97-5bfa9497ddff</item_source>

Then construct the link with <space_id> and <item_source>…

[michaelstingl]

Implementation Note:

• ipadOS user agent gets announced as "MacOS"
• mabye use library to detect ipads as they get annonced as "MacOS" (ex. lib "Mobile Detect")

Doesn't work reliable:

[Log]  ownCloud Web UI 8.0.0-alpha.4  (index.html-3c2aed60.mjs, line 1)
[Log]  Infinite Scale 4.0.0+337dca17e Community  (index.html-3c2aed60.mjs, line 1)

[michaelstingl]

Elements / features used

1. Download link

How can I go to the install page, im case the app isn't installed yet?

[Log]  ownCloud Web UI 8.0.0-alpha.4  (index.html-3c2aed60.mjs, line 1)
[Log]  Infinite Scale 4.0.0+337dca17e Community  (index.html-3c2aed60.mjs, line 1)

[michaelstingl]

Config docs:

• https://github.com/owncloud/web/issues/9836
• https://github.com/owncloud/web/pull/9872
• https://owncloud.dev/clients/web/theming/#app-banner

[michaelstingl]

FR for config option to disable:

• https://github.com/owncloud/web/issues/10015