Vue-cli: [cli-plugin-pwa] - Splash screen is not displayed on Safari

[cde06]

Version

3.1.1

Reproduction link

http://test-dev-gyhi.s3-website-eu-west-1.amazonaws.com/

Node and OS info

Node 8.12.0 / NPM 6.2.0

Steps to reproduce

I've created

• a new vue project thanks to vue-cli 3.
• select PWA support in the CLI options
• and add assets and meta tag for Apple ios support

you can clone this Repo: https://github.com/cde06/splashscreen-vue-cli3-pwa
or direct access to my demo: http://test-dev-gyhi.s3-website-eu-west-1.amazonaws.com/

Then deploy the webapp on your favorite host, and open it on iphone iOS safari browser.

• Add your PWA shortcut to your home screen.
• Open your PWA webapp from the icon just created.

=> You will receive a white screen during the loading of the webapp instead of the branded assets ref in the index.html file.

What is expected?

I expect that the PWA webapp from my home screen can launch a splash screen like a native mobile app.

Like it's successfully done in this example:
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

This is a static example that work with a splash screen. (So Safari browser from iOS correctly support this feature)

What is actually happening?

We have a white screen during the loading of my webapp instead of our branded screen.

[milky2028]

You might chalk this up to a Safari issue. Configuring splash screens for Safari is somewhat of a huge pain since Safari requires the exact specific device resolution for every splash screen, otherwise it will return a blank white screen. Considering the fact that new iOS devices are released each year, each with different resolutions, this quickly becomes difficult to manage. Other have gone into more detail on this here and here.

Thankfully, the Chrome team has made this easier by creating PWA Compat. Just include PWA Compat in your index, as well as a manifest file, and this will configure icons and splash screens properly.

[cde06]

Actually, as you could see it in my git repo:
https://github.com/cde06/splashscreen-vue-cli3-pwa
I’ve already follow the examples coming from appscope and medium.com.
The process described to have custom splashscreen : works for non vuejs project but doesn’t work with vuejs CLI 3.

Is it due to webpack bundle or something else? I don’t know. I’m struggle to troubleshoot this issue.

[milky2028]

It looks like you might need to make sure and add an apple-touch-icon tag, as well as making sure to add all images to your manifest.

[wth193]

I'm also facing this issue as of today.
I tried PWA Compat, it did helped to create ios splash screen based on theme color, app icons and name, but is not the image i put in public/index.html

Has anyone got the solution?

Version
@vue/cli-service: 3.4.1
vue: 2.6.8
nodejs: 10.15.1
npm: 6.9.0

---

Update
i made it works by:
+ pwa.appleMobileWebAppCapable: 'yes' to vue.config.js
- from public/index.html

[milky2028]

If you're using PWACompat, you need to set up a manifest file that points to two images, one that's 192x192 and one that's 512x512, and it should work. At least it works for me. Something like this:

{ "name": "Aspen Valley Company", "short_name": "AVHC", "icons": [ { "src": "/img/icons/192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/img/icons/512x512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#004D40" }

[wth193]

Yea i got that working, what i needed is custom ios "apple-touch-startup-image".

[kasperkamperman]

For people who run in this issue:

I use generated splash screens for iOS (https://itnext.io/pwa-splash-screen-and-icon-generator-a74ebb8a130). I found that you need to declare <meta name="apple-mobile-web-app-capable" content="yes" /> in front of this, otherwise they don't show up.

Problem with Vue PWA is that it adds this meta-tag double (because it's also added by appleMobileWebAppCapable: "yes",).

See also https://github.com/vuejs/vue-cli/issues/3269