4

I'm adding a manifest to my web app for the first time. My manifest validates successfully at manifest-validator.appspot.com. And the Chrome Application->Service Worker window shows the service worker as successfully registered. I am able to "Save to Home Screen" on my iPhone. But when I open the icon saved to the home screen, I get a blank screen.

Here's my myApp_manifest.json file:

{
  "short_name": "myApp",
  "name": "myAppLongName",
  "icons": [
    {
      "src": "images/app-images/myIcon-512-green_512px.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "images/app-images/myIcon-512-green_192px.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=progressive_web_app",
  "background_color": "#63aed5",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

What am I missing?

VikR
  • 4,818
  • 8
  • 51
  • 96

2 Answers2

2

It may be specific to your phone and iOS/Browser combination
Try it on someone else's device and/or the XCode Simulator
Manifest looks fine to me and works as expected for Android

Mathias
  • 4,243
  • 4
  • 25
  • 34
0

iOS does not (yet?) use the launch image from the manifest file like android
See #PROTIP 2 here for how to make those work:
https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

Mathias
  • 4,243
  • 4
  • 25
  • 34
  • 1
    I appreciate the link! At the same time, the link describes the white screen coming up briefly while the app is loading. But when launched this way, my app never loads -- the white screen comes up and never goes away. What might account for this? – VikR Jul 08 '18 at 21:38
  • I have seen that a few times also Try waiting a few seconds before adding the shortcut Also have you tried removing and installing it a few times? – Mathias Jul 08 '18 at 21:52
  • I add the icon by selecting the Share icon and clicking "Add to Home Screen". Then I go to the home screen, click the icon, and I get the white screen -- nothing comes up after that. I have removed and re-installed the home screen icon a few times, waiting a few seconds each time before re-installing. – VikR Jul 08 '18 at 22:13
  • Does it work with iOS - Safari? Do you have a link to the page you don't mind sharing? If not something you can share, perhaps a friend with an Android phone that could try there for you? – Mathias Jul 09 '18 at 00:58
  • It's very kind of you to offer. I can't post the link publicly yet. There appears to be no way for me to DM you on SO. If you DM me on Twitter @VikRubenfeld, I can DM you back with a link. :) Or if you give me a Twitter handle or something similar I can DM you there. – VikR Jul 09 '18 at 03:09
  • If you have not done so yet, you may want to clear everything out of Chrome (under privacy I think), and perhaps uninstall and reinstall just to make sure you don't have anything old from testing stuck in there. Also, try on someone else's phone It may be something with the version combinations you have on your device, or perhaps with your security settings (very wild guess) – Mathias Jul 09 '18 at 20:55
  • 1
    It does appear to be specific to my iPhone. Per your advice I tested it in the xCode->Simulator, as well as on my wife's iPhone, and it worked great. Thanks very much for the advice, @Mathias! If you care to post it here as an answer I will mark it as the accepted answer. – VikR Jul 09 '18 at 21:03
  • 1
    I've tested in iPhone x and it works well. Need to set the meta tag for theme color and icons for A2HS. Everything else looks good WRT PWA. – Anand Jul 09 '18 at 21:47