11

I have 2 Google accounts (personal/work). If I go to the Google Calendar site, on the work account, in Chrome, I can go to ... / More tools / Create shortcut..., which will create a Google Calendar.app file.

I can then add it to the dock - but, this goes to the wrong account :(

If I do Show Package Contents I can open the Info.plist file, and I see the url inside:

    <key>CrAppModeShortcutURL</key>
    <string>https://calendar.google.com/calendar/r</string>

Now if I change the url to https://calendar.google.com/calendar/b/1/r (which is the correct way to choose a specific Google account), I would expect it to work. But in fact that doesn't change anything.

But actually, even if I put any random website here, it will still go to Google Calendar so basically I think this has no effect at all, which is surprising.

Ideas?

0

2 Answers 2

19

I also had this issue (trying to create an app shortcut to the second Google Calendar account) and solved it by creating a web app manifest before creating the app shortcut:

  1. Copy the JavaScript below
  2. On the Google Calendar page, open the Chrome Devtools (right click anywhere on the page and select "Inspect")
  3. Go to the Console tab and paste the copied JavaScript
  4. Modify the URL if necessary to whatever URL you are trying to create an app for
  5. Hit return to run the JavaScript
const startUrl = 'https://calendar.google.com/calendar/u/1/r';
document.head
  .querySelector(':first-child')
  .insertAdjacentHTML(
    'beforebegin',
    `<link rel="manifest" href='data:application/manifest+json,{"start_url":"${startUrl}"}' />`,
  );

This will add a Web App Manifest for this website which will be used when creating the app.

Once you have done this, you can create the desktop app as normal:

  1. Click on the three dots menu > More Tools > Create Shortcut
  2. Check "Open as window" and select "Create"

Now you should have a separate desktop app for your second calendar account!

Source: https://github.com/karlhorky/pwa-tricks#change-starting-url-of-pwa-in-chrome


Alternative: Editing an Existing Manifest

If you're trying to add a different PWA than Google Calendar where the page either specifies a manifest already or sets the Content Security Policy directive manifest-src, then the above solution may not work, potentially also returning an error such as:

Refused to load manifest from 'data:application/manifest+json,...' because it violates the following Content Security Policy directive: "manifest-src 'self'".

To get around this, you can use Chrome Local Overrides to modify the start_url in the Web App Manifest:

  1. On the page of the application, open the Chrome DevTools (right click anywhere on the page and select "Inspect")
  2. Locate and expand the <head> element and find the link element with rel="manifest". Note the file path in href.



  3. Open the Sources tab in the DevTools. If you have not used overrides before, you will need to set them up:
    • Switch to the Overrides 2nd-level tab (you may need to find it in the » menu)
    • If you Create a new folder in your projects or Documents folder called chrome-overrides
    • Click on + Select folder for overrides and select the folder you created



    • Confirm any prompts at the top of the browser asking for access to the folder



  4. Refresh the page to make sure all sources load. Locate the web app manifest corresponding to the file path you noted earlier. Right click and select Save for overrides:



  5. Now the web app manifest is editable! Make your changes to start_url or anything else that you need, save the file and reload the page
  6. The updated web app manifest has now been loaded, and you can install or create a shortcut to the PWA as normal 🙌

Source: https://github.com/karlhorky/pwa-tricks#solution-2-edit-an-existing-web-app-manifest

5
  • 1
    Thank you so much, works like a charm!
    – BoD
    Aug 28, 2020 at 7:06
  • Glad that it helped you!
    – Karl Horky
    Aug 28, 2020 at 17:00
  • 1
    Brilliant! Thanks!
    – Dan
    May 4, 2021 at 17:56
  • No problem ! 🙌
    – Karl Horky
    May 5, 2021 at 14:04
  • This worked for YouTube not letting me set the URL for a video I wanted a focus video soundtrack (e.g. youtube.com/watch?v=_JJJBQSBiA4&t=83s) that I wanted PWAize to a specific timestamp. It was always stripping the entire path off, to www.youtube.com. The first method worked and took about 30 seconds once I was done reading, which for some reason looked more complicated than it actually was. I did have to uninstall the previous PWA/Shortcut and re-add it, as expected. I suppose this solution could be packaged as a Chrome Extension too. Apr 8 at 0:18
1

I tried making a desktop app shortcut for Microsoft 365 outlook calendar and it always redirected back to the mail component. This solution to this question didn't work for me but going into the sources tab and manually editing the url manifest file and then creating the shortcut worked like a charm. Just putting it on here incase the other solution doesn't work, mine might.

2
  • Right, I actually also just added detailed instructions about this to my pwa-tricks repo 3 days ago 😄 : github.com/karlhorky/…
    – Karl Horky
    Jan 16, 2021 at 11:03
  • I will also add a section to the answer above referencing this second solution in the repo - should have also updated it 3 days ago.
    – Karl Horky
    Jan 16, 2021 at 11:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .