Comments (5)
Actually—the code should support this. I use it in the test suite. The format should look like:
<link rel="manifest" href="data:application/json;base64,eyJpY29ucyI6W3sic3JjIjoibG9nby0xOTIucG5nIiwic2l6ZXMiOiIxOTJ4MTkyIn0seyJzcmMiOiJsb2dvLTEyOC5wbmciLCJzaXplcyI6IjEyOHgxMjgifV19" />
Admittedly, I've only tested this in Chromium-based browsers. Maybe IE11 or older browsers don't support the GET
operation on that href
? Are you using another browser?
from pwacompat.
from pwacompat.
by the way, the reason I am using a dataURI is my goal is to make my web app a single file. With no external file dependencies. That was I can hash that file and I know if the client is running the same version. Also it seems to make sense with the whole idea of an app being a single file.
from pwacompat.
I modified your setup() function to support data uri's in the manifest. It depends on an external decodeBase64() see below for the one I am using. Since I can reasaonably expect the manifest file to be non binary the base64 decoding can be more simplistic than would be required if the data uri contained binary data.
function setup() {
const manifestEl = document.head.querySelector('link[rel="manifest"]');
const manifestHref = manifestEl ? manifestEl.href : '';
if (!manifestHref) {
throw `can't find <link rel="manifest" href=".." />'`;
}
const hrefFactory = buildHrefFactory([manifestHref, window.location]);
const datauri=decodeBase64(manifestHref.split(',')[1]);
if(datauri){
try {
const data = (JSON.parse(datauri));
process(data, hrefFactory);
} catch (err) {
console.warn('pwacompat.js error', err)
}
} else {
const xhr = new XMLHttpRequest();
xhr.open('GET', manifestHref);
// nb. use getAttribute for older brower safety
xhr.withCredentials = (manifestEl.getAttribute('crossorigin') === 'use-credentials');
// this is IE10+
xhr.onload = () => {
try {
const data = /** @type {!Object<string, *>} */ (JSON.parse(xhr.responseText));
process(data, hrefFactory);
} catch (err) {
console.warn('pwacompat.js error', err)
}
};
xhr.send(null);
}
}
This is the decodeBase64 I am using, might be appropriate to include it in the pwacompat function.
decodeBase64=function(f){var g={},b=65,d=0,a,c=0,h,e="",k=String.fromCharCode,l=f.length;for(a="";91>b;)a+=k(b++);a+=a.toLowerCase()+"0123456789+/";for(b=0;64>b;b++)g[a.charAt(b)]=b;for(a=0;a<l;a++)for(b=g[f.charAt(a)],d=(d<<6)+b,c+=6;8<=c;)((h=d>>>(c-=8)&255)||a<l-2)&&(e+=k(h));return e};
from pwacompat.
I'm not sure what thisline is for but I am guessing it is to add the manifest url to an href list somewhere?
const hrefFactory = buildHrefFactory([manifestHref, window.location]);
If so then it probably should be moved to the XHR block.
from pwacompat.
Related Issues (20)
- iPhone 4s support for pwa manifest HOT 2
- Invalid character in IE11 HOT 1
- a2hs for ios is support by pwacompat ? HOT 1
- Serviceworker should be unregistered from android webview chrome version 37.0.3770.67 ~ 37.0.3770.101 HOT 1
- Prioritize maskable icons for apple-touch-icon HOT 3
- Initial Height on iOS w/ Notch + viewport-fit=cover
- Is PWACompat recommended for production projects? HOT 2
- apple-touch-icon not created on iPad iOS 13 HOT 1
- Feature request: prevent meta tags from being added if they already exist HOT 2
- <link rel="apple-touch-icon"> is not created and thus also no icon on boot splash HOT 2
- Splash screen not shown when added on iPad with landscape orientation HOT 11
- Maskable Icons HOT 1
- Use the CDN domain cdn.jsdelivr.net instead of unpkg.com ? HOT 1
- v2.0.16 does not create <link rel="apple-touch-icon"> HOT 1
- Is pwacompat dynamic splash images feature works correctly? HOT 3
- short_name/name is showing in splash screen HOT 2
- C
- CSS modification HOT 1
- README - Edge and links
- Add “from (someone)” as WhatsApp?
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 pwacompat.