A collection of useful 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:
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:
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:
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:
Sources
tab in the Chrome DevTools. If you have not used overrides before, you will need to set them up:
Overrides
2nd-level tab (you may need to find it in the »
menu)projects
or Documents
folder called chrome-overrides
+ Select folder for overrides
and select the folder you createdIf there is an existing manifest on the page (document.querySelectorAll('link[rel="manifest"]').length
returns 1
), then you can modify it like this:
<head>
element under Elements in the Chrome DevTools and locate the link
element with rel="manifest"
. Note the file path in href
.Save for overrides
:start_url
or anything else that you need, save the file and reload the pageIf there isn't yet a manifest on the page (document.querySelectorAll('link[rel="manifest"]').length
returns 0
), then you can add one like this:
<head>
element under Elements in the Chrome DevTools. Right click on the <head>
element and select Edit as HTML
. Copy and paste the following code inside the head tag, at the beginning (before all other elements):<link rel="manifest" href="https://github.com/karlhorky/pwa-tricks/blob/main/manifest-temp-pwa-tricks-0123456789.json" />
Save for overrides
start_url
or anything else that you need and save the file.<head>
and add the link
to the newly-created manifestChrome 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).