PWA notes
Making my Focal Length Equivalent utility a PWA at IndieWebCamp last weekend I made a few notes, which I thought I’d share:
- While iOS 12.2 does use the manifest.json file for most configuration options, it does not use the
iconsdeclaration. The icons are still specified via the<link>tag in the<head>. - And to make an icon actual appear on the home screen of iOS devices I found the
rel-attribute’s value must only containapple-touch-icon. With any other additional value – likeicon, for example, which is used for on Android non PWA-sites – it would not show it. It would always render the standard screenshot-icon. - Having said that, I’m not 100% certain about this. Because I also found that even when changes were deployed, iOS would sometimes still use some cached setting from a previous
<head>oder manifest.json configuration. Even after multiple refreshes of the page. So that was a bit tedious to debug. - As I found out you can have a
<noscript>tag in your<head>to only load certain (fallback) resources when JavaScript is disabled. Now, I wonder how this works in conjunction with a service worker and offline functionality. Because when no network request is made, my service worker will not cache them. Would it then make sense to manually cache them the first time the SW runs? Hm… haven’t done any testing around this. But I assume the SW doesn’t even kick in when JS is disabled, and therefor caching these resources is pointless, since a network request has to be made anyway. Actually, that’s probably the case and I have hereby answered my own question. Anyhow, I leave this rambling here, because that was something I wondered about.