googlechromelabs / pwacompat Goto Github PK
View Code? Open in Web Editor NEWPWACompat to bring Web App Manifest to older browsers
License: Apache License 2.0
PWACompat to bring Web App Manifest to older browsers
License: Apache License 2.0
Is PWACompat recommended for production projects?
As I see it in the GoogleChromeLabs
GitHub organization I'm not sure.
UC Browser has support for many manifest like attributes
appmode, fullscreen etc.
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.
hi
i want to know , is pwacompat support a2hs notification for ios ?
thank you
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 titlestart_url
is respectedThis happens regardless of PWACompat. The basic support doesn't use icons properly etc though, so there's still work needed.
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.
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
Lines 172 to 179 in a6ba589
How i can remove short_name/name from splas screen?
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.
Doesn't recognize the data uri for my manifest and attempts to get using XMLHttpRequest
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 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.
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.
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 ;)
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:
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).
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?
It seems function largestSize called at L213 but it does not exist.
https://github.com/GoogleChromeLabs/pwacompat/blob/master/src/pwacompat.js#L213
Lot of people are having issue with redirect at OAuth flow when using the apple-mobile-web-app-capable feature of iOS:
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).
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?
Thanks for your contributions!
If I create a program as follows, the item will not be displayed in updateF7SmartSelect().
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.
This is probably to do with Safari pretending to be a desktop browser here.
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.
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.
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.
It would be great if this library could make sure Web App Manifests get converted to KaiOS' proprietary format. More details:
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.
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 😢
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>
Is it possible to run this is as a CLI tool or Webpack plugin instead of at runtime?
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)
It would be nice to read description
from the manifest and add it as <meta name="description" />
if that tag is not already present.
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.
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.
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.
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)
#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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.