使用 angular pwa 在应用程序加载时仅显示一次启动画面答案

【问题标题】：Show splash screen only once on app load using angular pwa使用 angular pwa 在应用程序加载时仅显示一次启动画面
【发布时间】：2021-08-04 12:58:54
【问题描述】：

我在我的 Angular PWA 应用程序中创建了一个示例闪屏组件。我只想在应用程序启动时显示一次启动画面。现在它显示在应用程序内任何页面上的每次刷新时，包括我的应用程序的启动。

如何在每次刷新时停止加载启动画面？

应用组件：-

<app-splash-screen></app-splash-screen>
<router-outlet></router-outlet>

闪屏组件：-

windowWidth : string | any | number;
  showSplash: boolean = true;

  constructor() { }

  ngOnInit(): void {
    setTimeout(()=> {
      this.windowWidth = +'-' * window.innerWidth + 'px';

      setTimeout(()=> {
        this.showSplash = !this.showSplash
      },500);

    },2000);
  }

闪屏 HTML：-

<div class="app-splash-screen" *ngIf="showSplash" [ngStyle]="{left: windowWidth}">
    <div class="app-splash-screen-inner">
        <div class="app-logo"><mat-icon>eco</mat-icon></div>
        <div class="app=label">Welcome</div>
        <div class="app-loader"></div>
    </div>
</div>

【问题讨论】：

您可以存储在会话存储中。当页面加载最初将其存储在会话存储中，当您进行硬刷新时，从会话存储中获取值并相应地分配值。您可以在此处参考我的答案 - stackoverflow.com/a/68648003/6777125
@KrunalShah 我按照 Apporva 的建议进行存储（下面的答案），但我不知道如何在其他组件上使用该存储进行刷新？

标签： angular progressive-web-apps splash-screen

【解决方案1】：

您可以通过使用来自 window 对象的选项来做到这一点，如下所示：

window.PerformanceNavigationTiming.redirectCount= 0 // not refresh 
window. PerformanceNavigationTiming.redirectCount = 1 // page refresh 

.
.
.
IsRefresh = !!window.performance.navigation.type;

基于以上条件，你可以在splash组件中显示和隐藏splash。

另一种方法是通过会话或本地存储，您可以创建像appInit 这样的密钥，如果存在则不显示启动画面，否则显示它。

根据要求，您如何使用session storage。当用户打开一个新选项卡时，它会在每个浏览器选项卡上工作，它会创建新的会话和会话存储。详情请查看here。

当您第一次加载应用程序时，您可以创建一个会话密钥名称isShowSplash。您可以在启动构造函数中执行此操作。

windowWidth : string | any | number;
  showSplash: boolean = true;

  constructor() { 
       // it will be null if it doesn't exist
       const isShowSplash = sessionStorage.getItem('isShowSplash');
       if (isShowSplash) {
           // don't show splash 
           this.showSplash = false;
       } else {
           // show splash 
           this.showSplash = true;
       }
       sessionStorage.setItem('isShowSplash', JSON.stringify(false));
  }

  ngOnInit(): void {
    setTimeout(()=> {
      this.windowWidth = +'-' * window.innerWidth + 'px';

      setTimeout(()=> {
        this.showSplash = !this.showSplash
      },500);

    },2000);
  }

【讨论】：

我猜在 window.performance.navigation 中，导航已被贬低。我也只需要在超时时使用吗？
不，您不需要使用超时。如果不推荐使用导航，您可以使用本地存储或会话存储。我已经为你添加了更新的。
感谢您的更新。另外我不知道如何将启动画面存储在本地/会话存储中。你能举个例子吗？
我在答案中添加了这一点，如果您遇到任何问题，请告诉我。
我猜布尔值应该是 stringlify sessionStorage.setItem('isShowSplash', JSON.stringify(false)) 。我试过这个值也被存储了，但是刷新后启动画面仍然出现。价值并没有变得真实。其他组件如何知道这一点？

【解决方案2】：

此组件控制显示/隐藏启动画面，步骤如下：

1- 浏览器会在你的服务器上下载 index.html 文件，然后从 index.html 指示的文件中搜索，例如：“runtime.js, polyfills.js, main.js, vendor.js”，持续时间为300 毫秒（在我的情况下）；

2- 文件下载后页面会显示启动画面；

3- 毕竟“角度解析器”会向您的服务器发出请求以获取您的数据组件；

4- 下载完所有图片、媒体、字体

5- 之后，当所有下载和加载，启动画面将被隐藏

 @Component({
   selector: 'sei',
   templateUrl: './sei.component.html',
   styleUrls: ['./sei.component.css']
  })   
 export class AppComponent implements OnInit {
   public showSplash: boolean = true; //Show or hide splash screen

   window.onload = (event) => {
     this.showSplash = false; //Trigger when everything load
   }
 }

但是我们这里有一个问题，因为“启动画面”只有在我们需要的 angular 文件（index.html、“runtime.js、polyfills.js、main.js、vendor.js”）下载时才可见等待所有这些角度文件在应用加载所有组件、图像、解析器等期间显示启动画面。

我们要在浏览器获取第一个 index.html 文件时启动“闪屏”，此时我们要开始显示闪屏并处理其他 Angular 文件。

转到您的 index.html 并在“app”标签下方创建您的“启动画面”，这将在您的浏览器获取角度主 index.html 文件时显示。

 ...
 <body>
   <app></app> //YOUR APP
   <div id="splashScreen">
     splash screen, loading angular, wait... 
   </div>
 </body>
 <style>
  .splashScreenFadeHide{
     opacity: 0; //turn transparent
     transition: opacity 1s linear; //after 1 second
   }
 </style>
 ...

并在加载所有内容时隐藏启动画面，您将：

 export class AppComponent implements OnInit {
   ngOnInit(): void {
     window.onload = (event) => { //triger when every thing is load (files, assets, components' resolver, etc)
     
    // All good so add clas "splashScreenFade" to hide the splash screen slowly 
    document.getElementById("splashScreen").classList.add("splashScreenFadeHide")
   }

    //we are listening the "splasn screen" turn transparent and after apply the "display = none"  
   document.getElementById("splashScreen").addEventListener('transitionend', (e) => {
     document.getElementById("splashScreen").style.display = 'none'
   })
  }
}

现在我们有一个启动屏幕，因为第一个文件是由浏览器加载的，并且只有在读取所有文件、图像、解析器等时才隐藏。

如果对你有帮助，请给我一个赞。

【讨论】：