时间戳

首页 > 解决方案 > 当我转到另一个页面并返回时，安装按钮消失

ionic4 - 当我转到另一个页面并返回时，安装按钮消失

问题描述

离子 4，PWA。INSTALL按钮安装应用程序

启动应用程序时，安装按钮在那里。如果我转到另一页并返回第一页，则INSTALL按钮将彻底消失。

注意：如果我刷新导航器（F5），就会出现安装按钮

ngs-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

comp.html

...
    <ion-buttons *ngIf="showInstallBtn" slot="primary">
     <ion-button (click)="showInstallBanner()">
      Install
     </ion-button>
   </ion-buttons>
...

标签： ionic4progressive-web-apps

解决方案

比较

...
  deferredPrompt: any;
  showInstallBtn: boolean = true;
  pwa_features: any;

  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private lcs: LoginCommercialService
  ) {

    window.addEventListener('beforeinstallprompt', (e) => {
      console.log('beforeinstallprompt Event fired');
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      this.deferredPrompt = e;
      this.showInstallBtn = true;
    });    
   }

  showInstallBanner() {
    if (this.deferredPrompt !== undefined && this.deferredPrompt !== null) {
      // Show the prompt
      this.deferredPrompt.prompt();
      // Wait for the user to respond to the prompt
      this.deferredPrompt.userChoice
      .then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        // We no longer need the prompt.  Clear it up.
        this.deferredPrompt = null;
      });
    }
  }

推荐阅读