Is there a way to add “from (someone)” as WhatsApp with pwacompat? I’d like to make this effect, but I don’t know if it’s possible and how to do it.
Here is an example:

P.S.: I need this with iOS, so, I don’t care about modify anything on manifest icons (for chrome) but, for example, only add a new key-value pair on my manifest (that pwacompat adds to my iOS icons).

Lot of people are having issue with redirect at OAuth flow when using the apple-mobile-web-app-capable feature of iOS:

• https://stackoverflow.com/questions/51993155/redirecting-to-google-oauth-flow-in-progressive-web-app
• nolanlawson/pinafore#45 (comment)
• firebase/firebase-js-sdk#77 (comment)
• w3c/manifest#449 (comment)

I believe it can be solved by changing the:
<link rel="manifest" href="manifest.json">
to
<link rel="no-on-ios" href="manifest.json">
when on iOS.

It prevent the iOS Safari to process the manifest (which cause the bug)

So, i believe that this pice of code could be inside pwacompat.js to allow many of PWAs use OAuth login:

   var iOS = !!navigator.platform && /iPhone/.test(navigator.platform);
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }

At least until apple fix this issue (don't know where or if is been tracked).

https://forums.developer.apple.com/thread/100524

If an icon has "purpose": "maskable", that indicates it should not be transparent and is suited to be masked to shapes like iOS' rounded squares.

Some potential behaviour options:

• Include the maskable icons with no priority (current behaviour)
• If a maskable icon is present, discard the non-maskable icons and only use maskable icons for apple-touch-icon
• Rank maskable icons higher somehow (does Safari use the first icon it encounters?)

It would be nice to read description from the manifest and add it as <meta name="description" /> if that tag is not already present.

If a page changes its internal, local theme-color meta tag, should we update the ApplicationViewTitleBar with it?

Or should it just be set to the initial theme from the manifest?

Chrome, for instance, uses the manifest's theme color only for initial load, then deferring to the page.

First of all, thank you for this great plugin. It actually solves the splash screen problem of my PWA.

I have a little issue on iOS.
According to Apple docs, you can set transparent status bar which is not possible with pwacompat.
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
pwacompat only sets black or default according to theme option.

It would be great if this library could make sure Web App Manifests get converted to KaiOS' proprietary format. More details:

• https://developer.kaiostech.com/first-app/manifest
• https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS/Manifest

I'm using "theme_color": "#191919", wich I consider a dark color. This bug can be reproduced when using #000000 also.

Then, I'm adding my PWA to my homescreen and the iOS system bar is being painted on white, instead of black.

If I change the theme_color value on my manifest to #FFFFFF, then the iOS system bar is painted on black. The opposite of my theme_color.

I've being looking into the code, and the problem is on pwacompat.js:276, where I think a change should be made:

-    meta('apple-mobile-web-app-status-bar-style', themeIsLight ? 'default' : 'black');
+    meta('apple-mobile-web-app-status-bar-style', themeIsLight ? 'black' : 'default');

This would be also coherent with the same feature for MS Edge (on pwacompat.js:284)

It seems function largestSize called at L213 but it does not exist.
https://github.com/GoogleChromeLabs/pwacompat/blob/master/src/pwacompat.js#L213

I get RTL css from Framework 7 website and It worked well in shinyMobile dashboard, however, when I modified css (for example: .md .tabbar .tab-link, .md .tabbar-labels .tab-link ) file to change header and tab bar menu color, it did not work in iOS and iPadOS. It works well on android, windows, and MacOS.

I'm wondering if there should be a list of short-comings that this library can't handle. For example, "start_url" won't be used in iOS and it just uses the current URL. Also, all regular web links in iOS are opened in a new Safari window and the "scope" value is ignored. (apparently some of these things are fixed in newer version of iOS that support a web manifest, but I'm curious how that handles both a manifest and the meta attributes being set... unfortunately I have no way of testing it)

When I add my PWA to home screen on iPad 6 (2048x1536), the splash screen is only shown when I add it in portrait mode. (I can close it and then open it horizontally with the splash screen being shown without any problem).

However, when I add the PWA to home screen when the iPad is in landscape mode and open the PWA, the splash screen is not shown (Only a white screen).

I tried to add orientation:"landscape"/"portrait"/"any" to manifest.json and also played with meta tags without any success.
Bug can be reproduced with demo PWA emojityper.com and is also present on the newest version 2.0.14.

Chrome devtools prints out a warning from pwacompat version 2.0.8:

pwacompat.min.js:1 pwacompat.js error SyntaxError: Unexpected token / in JSON at position 447
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.e.onload (pwacompat.min.js:1)

Use CDN domain to serve pwacompat.min.js file instead of unpkg for speed.

https://cdn.jsdelivr.net/npm/pwacompat@latest/pwacompat.min.js

OLD :

<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

NEW :

<script async src="https://cdn.jsdelivr.net/npm/pwacompat@latest/pwacompat.min.js" crossorigin="anonymous"></script>

Hi there,

Nice lib. Is it possible somehow to change the font used on the splash screen that's generated?

Would be a nice addition so that the splash matches whatever font the PWA uses.

For compatibility with iOS, This logic fills title.
https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js#L160-L177

However, there is no word wrap function, so title is truncated.

• How many characters are splash screen title?
• How about adding word wrap function?

https://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

I'd like to contribute, but I do not have all of the iPhone devices 😢

hi

i want to know , is pwacompat support a2hs notification for ios ?

thank you

Related Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=977784

In these chrome version webview, serviceworker blocked all network requests.
Could we handle this exceptional case in this library?

The initial view (not the splash screen) height appears short when viewport-fit=cover is on the viewport meta tag. There doesn't appear to be a way to resolve this using only CSS (or the iOS provided env(safe-area-inset-top) spacing values).

Not sure if this a PWA specific issue, or rather an iOS "notch CSS" issue.

I can get the height of the gap using env(safe-area-inset-top) but cannot get it to go below the bottom of the body, even using a negative value like so: bottom: calc(-1 * env(safe_area-inset-top)). This is strange, because I can manipulate the top page elements (header, etc.) just fine with CSS using those values... Any who, figured I would post just in case.

When having manifest.json at a different location (CDN) as the web page, and having relative paths to the icons in the manifest, the polyfill will not work. It would be nice if the polyfill takes the domain of the manifest.json into account and add that to the image source paths.

I was discussing with @pi0 to add pwacompat to https://github.com/nuxt-community/pwa-module but we think that it would be ideal if the push method checked first if those nodes already exist, similarly to what the theme color does: https://github.com/GoogleChromeLabs/pwacompat/blob/master/src/pwacompat.js#L211.

If you're ok with that, I could make a PR ;)

I wanted to use pwacompat dynamic splash images feature but stumbled on unexpected behavior on iOS 12.4 and higher - test examples Emojityper , demo site v8.dev have any splash screens. Can anyone help with this?

I noticed the readme advertises use of the RawGit CDN, and with a fixed version (yay). That means it qualifies for SRI attributes.

See https://code.jquery.com for an example.

• https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
• ttps://www.srihash.org/

Currently, PWACompat appears to ignore the "purpose": "maskable" attribute on an icon, and use it as if it was a normal icon. Please filter maskable icons out, or add proper support.

How i can remove short_name/name from splas screen?

Since the commit that checks for existence of html tags before adding them to the DOM "apple-touch-icon" links won't be created anymore.

The reason is that the code in the push() method

#21 added the feature for black-translucent when viewport-fit=cover. However, it doesn't seems working fine with older iphone, for example my iphone 7 plus shows below, the toolbar is overlapped with system status:

I tried html and body to use height=100% and 100vh, no luck.

Is PWACompat recommended for production projects?

As I see it in the GoogleChromeLabs GitHub organization I'm not sure.

The safari crushed when last.removeAttribute("sizes"); // smallest is 'default', no sizes needed

117 return push('link', attr);
118 }).filter(Boolean);

This is probably to do with Safari pretending to be a desktop browser here.

Doesn't recognize the data uri for my manifest and attempts to get using XMLHttpRequest

Running the demo or including pwacompat in a project yields an error with IE11. The error occurs at the following code.

if (!manifestHref) {
  throw `can't find <link rel="manifest" href=".." />'`;
}

The backticks are not accepted in IE11.

Thanks for your contributions!

If I create a program as follows, the item will not be displayed in updateF7SmartSelect().

Update smart select

if (interactive()) {
library(shiny)
library(shinyMobile)

shinyApp(
ui = f7Page(
title = "My app",
f7SingleLayout(
navbar = f7Navbar(title = "Update f7SmartSelect"),
f7Button("updateSmartSelect", "Update Smart Select"),
f7SmartSelect(
inputId = "variable",
label = "Choose a variable:",
selected = "drat",
choices = colnames(mtcars)[-1],
openIn = "popup"
)
# tableOutput("data")
)
),
server = function(input, output, session) {
# output$data <- renderTable({
# mtcars[, c("mpg", input$variable), drop = FALSE]
# }, rownames = TRUE)

  observeEvent(input$updateSmartSelect, {
    updateF7SmartSelect(
      inputId = "variable",
      openIn = "sheet",
      selected = "hp",
      # choices = c("hp", "gear"),
      choices = c("hp"),  # If it changes like this
      multiple = TRUE,
      maxLength = 3
    )
  })
}

)
}

Thank you for reading it.

Is it possible to run this is as a CLI tool or Webpack plugin instead of at runtime?

UC Browser has support for many manifest like attributes

appmode, fullscreen etc.

IEs pinned sites provides similar features to that of a webmanifest which should be considered, specifically pinned sites metadata; including properties such as msapplication-starturl (see the metadata reference for an overview of properties).

Here is some more (possibly redundant) information/visuals:
https://blogs.msdn.microsoft.com/jennifer/2011/04/20/ie-pinned-sites-part-1-what-are-pinned-sites/

Pinned Sites is also supported in MS Edge on Windows 10.

Edit: This is already included, closing.

https://docs.microsoft.com/en-us/archive/blogs/jennifer/ie-pinned-sites-part-1-what-are-pinned-sites

Edge is now just Chromium. Refer to Edge in the readme as "Edge Legacy".

UWP is dead. Mostly because MS killed it.

iOS' "Add to Home Screen" feature now seems to retrieve the manifest and use several fields. This seems to be as of iOS 11.3.

• short_name field for the title
• start_url is respected

This happens regardless of PWACompat. The basic support doesn't use icons properly etc though, so there's still work needed.

There is a mistake in the icons field of the manifest.webmanifest sample in the Web App Manifest field.

expected

"icons": [
    {
        "src": "res/icon-128.png",
        "sizes": "128x128"
    }
  ]

actual

"icons": [
    "src": "res/icon-128.png",
    "sizes": "128x128"
  ]

I'm sorry if you do it on purpose.