Angular PWA如何实现启动屏仅首次加载显示 避免每次刷新都展示

你需要通过本地持久化存储标记启动屏是否已经展示过，避免每次页面刷新重复加载，修改方案如下：

• 第一步：修改启动屏组件逻辑代码

注：原代码中this.windowWidth = +'-' * window.innerWidth + 'px';存在语法错误，数字和字符串相乘会得到NaN，同步做了修正

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

constructor() { }

ngOnInit(): void {
  // 读取本地存储标记，判断是否已经展示过启动屏
  const hasShownSplash = localStorage.getItem('splashHasShown');
  if (hasShownSplash === 'true') {
    this.showSplash = false;
    return;
  }

  // 仅首次启动走原动画逻辑
  setTimeout(()=> {
    this.windowWidth = '-' + window.innerWidth + 'px';
    setTimeout(()=> {
      this.showSplash = false;
      // 动画结束后写入展示标记，后续所有加载场景都不会再显示启动屏
      localStorage.setItem('splashHasShown', 'true');
    },500);
  },2000);
}

• 第二步：可选优化（仅当需要应用大版本更新时重新展示启动屏时使用）
  可以给存储标记绑定应用版本号，发版时更新版本号即可触发重新展示：

// 发版时更新版本号即可
const CURRENT_APP_VERSION = '1.0.0';
const hasShownSplash = localStorage.getItem(`splashHasShown_v${CURRENT_APP_VERSION}`);
// 写入存储时也使用对应版本的key
localStorage.setItem(`splashHasShown_v${CURRENT_APP_VERSION}`, 'true');

localStorage存储的标记会永久保留，除非用户手动清除浏览器缓存或者应用数据，完全符合仅首次启动展示一次的需求。

内容的提问来源于stack exchange，提问作者NoobCoder