A collection of helpful tricks for PWAs (Progressive Web Apps) and Chrome Pseudo-PWA
Sometimes PWAs don't behave in an ideal manner, such as in the following cases:
- Google Calendar doesn't allow for multiple Pseudo-PWA shortcuts to different accounts
- LinkedIn Messaging will show an ugly black bar if you navigate to another message
- Some PWAs may not start on the correct URL
In these cases it can be helpful to change the start_url in the web app manifest for the PWA.
Before you install or create the shortcut for the PWA, add a web app manifest with your chosen start_url to the page:
- Copy the JavaScript below
- On the page of the application, open the Chrome DevTools (right click anywhere on the page and select "Inspect")
- Go to the Console tab and paste the copied JavaScript
- Modify the URL if necessary to whatever URL you are trying to create an app for (this example is for creating a second Google Calendar Pseudo-PWA)
- Hit return to run the JavaScript
const startUrl = 'https://calendar.google.com/calendar/u/1/r';
const unsanitizedHtmlPolicy = trustedTypes.createPolicy('unsanitizedHtml', {
createHTML: (htmlString) => htmlString,
});
document.head
.querySelector(':first-child')
.insertAdjacentHTML(
'beforebegin',
unsanitizedHtmlPolicy.createHTML(
`<link rel="manifest" href='data:application/manifest+json,{"start_url":"${startUrl}"}' />`,
),
);Once you have done this, you can install the PWA as normal.
Or, if you need to create a shortcut for a pseudo-PWA:
- Click on the three dots menu > More Tools > Create Shortcut
- Check "Open as window" and select "Create"
Inline web app manifests may not work - either if the page already specifies a manifest or if the Content Security Policy directive manifest-src or trusted-types has been set - potentially also returning an error like this:
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, two additional options:
Switch to the Elements tab of the Chrome DevTools and manually edit the HTML to match the manifest in the JavaScript in Solution 1 above
Use Chrome Local Overrides to modify the start_url in the Web App Manifest, as in the guides below.
Both of the options for this below require Local Overrides to be set up, so do this first:
- Open the
Sourcestab in the Chrome DevTools. If you have not used overrides before, you will need to set them up:- Switch to the
Overrides2nd-level tab (you may need to find it in the»menu) - If you Create a new folder in your
projectsorDocumentsfolder calledchrome-overrides - Click on
＋ Select folder for overridesand select the folder you created
- Confirm any prompts at the top of the browser asking for access to the folder
- Switch to the
- Refresh the page.
If there is an existing manifest on the page (document.querySelectorAll('link[rel="manifest"]').length returns 1), then you can modify it like this:
- Locate and expand the
<head>element under Elements in the Chrome DevTools and locate thelinkelement withrel="manifest". Note the file path inhref.
- Go to the Sources tab and select the Page tab. Locate the web app manifest corresponding to the file path you noted earlier. Right click and select
Save for overrides:
- Now the web app manifest is editable! Make your changes to
start_urlor anything else that you need, save the file and reload the page - The updated web app manifest has now been loaded, and you can install or create a shortcut to the PWA as normal 🙌
- You can now remove the overrides (right click on the folder with the domain name -> Delete all overrides)
If there isn't yet a manifest on the page (document.querySelectorAll('link[rel="manifest"]').length returns 0), then you can add one like this:
- Locate and expand the
<head>element under Elements in the Chrome DevTools. Right click on the<head>element and selectEdit as HTML. Copy and paste the following code inside the head tag, at the beginning (before all other elements):
<link rel="manifest" href="/manifest-temp-pwa-tricks-0123456789.json" />
- This will trigger a network request to that file. Go to the Network tab, locate the request entry, right-click on it and select
Save for overrides - Now the web app manifest is editable! Make your changes to
start_urlor anything else that you need and save the file. - Reload the page and do step 1 again - edit the
<head>and add thelinkto the newly-created manifest - The updated web app manifest has now been loaded, and you can install or create a shortcut to the PWA as normal 🙌
- You can now remove the overrides (right click on the folder with the domain name -> Delete all overrides)
Chrome Pseudo-PWAs (aka shortcuts in new windows) can be created for any website or web application, and behave similarly to full desktop applications on your computer (see https://twitter.com/karlhorky/status/1127884049073233920).