Comments (3)
We should add these meta tags:
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
We might be able to set the values depending on the user's theme settings.
In addition, we also should include a manifest.json
.
As seen here this also could be provided by js: https://javascript.plainenglish.io/create-a-pwa-app-manifest-dynamically-3b3d45340b11
Example from the linked page:
//for brevity, we're not including the isDesktop function here
let iconUrl = isDesktop() ? '/desktop.png' : '/mobile.png';
let manifest = {
name: "App name",
icons: [{ src: iconUrl, sizes: "512x512", type:"image/png" }]
};
let content = encodeURIComponent(JSON.stringify(manifest));
let url = "data:application/manifest+json,"+content;
let element = document.createElement('link');
element.setAttribute('rel', 'manifest');
element.setAttribute('href', url);
document.querySelector('head').appendChild(element);
This will only work when using https, but this should not be a problem here.
If so, we could generate some properties on runtime like the page name including the actual name and the theme color for the splash screen.
from snappy.cards.
As of the javascript version will not work as expected anymore we should use other ways.
from snappy.cards.
This is generates using https://tomitm.github.io/appmanifest/
<link rel="icon" type="image/png" sizes="192x192" href="data:image/png;base64,iVB...==">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="data:image/png;base64,iVBOR....==">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Snappy.Cards">
<meta name="apple-mobile-web-app-title" content="Snappy.Cards">
<meta name="theme-color" content="#5A5A64">
<meta name="msapplication-navbutton-color" content="#5A5A64">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This must be tested to see if it will just work, or the manifest is needed anyway.
from snappy.cards.
Related Issues (20)
- Add a parameter for the count of items displayed until collapse
- Add support for DevContainers
- Add a parameter to privide a color accent for the glassy surfaces HOT 1
- Please add support telegram too
- When QR code is scrolled into view, links in card cannot be clicked
- IPhone sometimes adds type=undefined to URL
- Readme has typos and spaces are missing
- On mobile, replace vertical scrolling with horizontal scrolling
- Support Signal
- Provide deployment for PR builds
- Extra QR Code could contain VCard data
- Enable Keyboard navigation on desktop
- Maybe a little more highlight on the actual page in navigation HOT 1
- Add editor for creating new vcards
- Add some marketing text somewhere
- Order of contact information on the card should be same as the order of URL parameters in URL
- "Share snappy.card link" does not work with Firefox on Win10 HOT 1
- Unsplash does not work anymore
- ✨ Avatar image in portrait mode HOT 1
- ✨ Add additional images that can be used as background and avatar HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snappy.cards.