Progressive Web App with animated launch screen

Question

How Can I set an animated launch screen like the one below, into my Progressive Web App? Is it possible?

Animated Launch Screen

Answer 1

Currently PWA splash screen can only consist of a color, a logo, and an title. There are some standards discussions happening around providing a more powerful API but nothing has been solidified as of this answer.

An option is to use the standard static splash screen and then animate into the content of your app. Here is a little sample code that creates an overlay matching your PWA's background_color, and then animates the background up into the toolbar. Obviously you'll want to tweak the coloring. You could even switch to a fade-in instead of a slide-up animation.

<style>
  #splash {
    background-color: #2196F3;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    transition-property: top;
    transition-duration: 300ms;
    transition-delay: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  #splash.animate {
    top: -100vh;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#splash').addEventListener('transitionend', (event) => {
      event.target.remove();
    });
    requestAnimationFrame(() => {
      document.querySelector('#splash').classList.add('animate');
    });
  });
</script>

<div id="splash"></div>

Sample - Demo - Source