Support Chrome Desktop PWA as native window

[peteruithoven]

Steps to reproduce

1. Enable experimental Desktop PWAs in Chrome / Chromium (source)
   1. Go to chrome://flags,
   2. Search for "Desktop PWAs"
   3. Change "Desktop PWAs" from "Default" to "Enabled".
2. Go to Nextcloud instance
3. Click on Chrome / Chromium menu > "Add to Desktop..."
4. In the prompt, click Add
5. Open added shortcut

Expected behaviour

A "chromeless" window opens, without url bar or tabs. See Pokedex.org for example:

Actual behaviour

A regular Chrome / Chromium window opens:

More info

The manifest file is found

{
  "name": "Nextcloud",
  "start_url": "https://nextcloud.peteruithoven.nl",
  "icons": [
    {
      "src": "/index.php/apps/theming/icon?v=0",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/index.php/apps/theming/favicon?v=0",
      "type": "image/svg+xml",
      "sizes": "16x16"
    }
  ],
  "display": "standalone"
}

From: index.php/apps/theming/manifest?v=0

Server configuration

Operating system:
Ubuntu 16.04.3 LTS

Web server:
Caddy 0.10.10

Nextcloud version: (see Nextcloud admin page)
Nextcloud 13.0.0

Updated from an older Nextcloud/ownCloud or fresh install:
Updated from an older Nextcloud/ownCloud

Signing status:

Signing status

No errors have been found.

List of activated apps:

App list

Enabled: - activity: 2.6.1 - bruteforcesettings: 1.0.3 - calendar: 1.6.0 - comments: 1.3.0 - contacts: 2.1.0 - dav: 1.4.6 - federatedfilesharing: 1.3.1 - federation: 1.3.0 - files: 1.8.0 - files_pdfviewer: 1.2.0 - files_sharing: 1.5.0 - files_texteditor: 2.5.1 - files_trashbin: 1.3.0 - files_versions: 1.6.0 - files_videoplayer: 1.2.0 - firstrunwizard: 2.2.1 - gallery: 18.0.0 - logreader: 2.0.0 - lookup_server_connector: 1.1.0 - nextcloud_announcements: 1.2.0 - notifications: 2.1.2 - oauth2: 1.1.0 - password_policy: 1.3.0 - provisioning_api: 1.3.0 - serverinfo: 1.3.0 - sharebymail: 1.3.0 - survey_client: 1.1.0 - systemtags: 1.3.0 - theming: 1.4.1 - twofactor_backupcodes: 1.2.3 - updatenotification: 1.3.0 - workflowengine: 1.3.0 Disabled: - admin_audit - documents - drawio - encryption - files_external - keeweb - news - spreed - user_external - user_ldap

Nextcloud configuration:

Config report

``` { "system": { "instanceid": "***REMOVED SENSITIVE VALUE***", "passwordsalt": "***REMOVED SENSITIVE VALUE***", "secret": "***REMOVED SENSITIVE VALUE***", "trusted_domains": [ "nextcloud.peteruithoven.nl" ], "datadirectory": "***REMOVED SENSITIVE VALUE***", "overwrite.cli.url": "https:\/\/nextcloud.peteruithoven.nl", "dbtype": "mysql", "version": "13.0.0.14", "dbname": "***REMOVED SENSITIVE VALUE***", "dbhost": "***REMOVED SENSITIVE VALUE***", "dbport": "", "dbtableprefix": "oc_", "dbuser": "***REMOVED SENSITIVE VALUE***", "dbpassword": "***REMOVED SENSITIVE VALUE***", "logtimezone": "UTC", "installed": true, "theme": "", "loglevel": 2, "maintenance": false, "trashbin_retention_obligation": "auto, auto" } } ```

Client configuration

Browser:
Version 64.0.3282.167 (Official Build) Built on Ubuntu , running on elementary 0.4.1 (64-bit)

Operating system:
Elementary OS Loki 0.4.1 (Build on Ubuntu 16.04 LTS)

[MorrisJobke]

Correct we didn't looked into the Chrome PWA. On mobile it should work already a lot better.

[sushipenguin]

Google provide some useful docs regarding manifest.json here with an example that looks like this:

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

Current results I got when testing 13.0.5 for PWA using lighthouse (3.0.0-beta.0) in Chrome dev tools:

If you compare it with the current manifest.json shipped with nextcloud (13.0.5) there are some additional properties that can be specified:

• "background_color" - hex color code should probably be fetched from users theme settings
• "theme_color" - could probably use the same value as "background_color"
• "short_name" - could probably use the same value as "name" (e.g. "Nextcloud")
• "scope" - think this is probably fine to exclude

"If you don't include a scope in your manifest, then the default implied scope is the directory that your web app manifest is served from."

• "icons" 16px and 128px are currently shipped. Lighthouse however suggests 192px and 512px in png

"include a 192x192 pixel icon and a 512x512 pixel icon. Chrome will automatically scale the icon for the device. If you'd prefer to scale your own icons and adjust them for pixel-perfection, provide icons in increments of 48dp."

[szaimen]

Any update on this?

[utybo]

This would be a great addition, allowing the NextCloud web app to appear like a native app with pretty much no effort needed

[nhirokinet]

Do you have any update of this?

If not, I tried to check what is at least required and wrote this in #23521 .

Changes are:

• Manifest to include 512x512 image, with actual 512x512 image.
  • For this to work, manifest to report correct favicon size #23520 should also be merged, and favicon must return 512x512.
  • For favicon to return 512x512 with 20.0.0, either of these steps is required:
    • Install php-imagick with SVG extention properly
    • Manually upload 512x512 favicon
• Service worker must be installed
  • This pull request writes the minimal service worker, but actually does nothing. So the pull request does not make PWA functional offline.
• Add some values to manifest
• Adjust manifest start_url to comply with scope

[nhirokinet]

Default install with Nextcloud 20.0.0, with lack of php-imagick or imagemagick SVG extention, the favicon-touch which is 512x512 on proper installation will fall back to 128x128 default image. It seems the lack of php-imagick is just a warning and not a fatal error, so default png image might have to be updated to 512x512 for this to work.