iOS 上的 PWA 在单击共享按钮时导航到空白屏幕

Question

我正在开发基于 Angular 的 PWA。该应用程序具有使用 ngx-share/core 模块生成的社交媒体共享按钮。除了在 iOS 上运行的网站的 PWA 版本外，这些按钮都可以正常工作。当用户点击分享按钮时，操作系统会自动打开相关已安装的应用程序（即 twitter）以允许分享，所有元数据都会通过，但是当您返回 PWA 时，它现在显示一个空白屏幕，甚至如果您关闭并重新打开 PWA。我相信正在发生的事情，通过一些调试，我在单击共享按钮时发现 iOS 似乎会自动将 PWA 导航到新的 about:blank 页面，然后硬缓存此 url，从而导致空白屏幕。

我尝试了多种修复方法，但似乎没有任何效果。我尝试将 event.preventDefault() 添加到 click 事件，甚至添加 history.go(-1)，但这似乎没有任何效果，因为它会自动导航离开此页面，因此实际上没有执行任何代码.我尝试编辑 manifest.json ，包括范围和 start_url。我尝试在 ngsw-config.json 中编辑缓存值。由于该模块似乎处理社交媒体的链接，我无法添加 target="_blank"，并且不确定这是否能解决问题，因为它似乎是 iOS 特定的问题。

article.component.html

<div class="share-container">
    <share-buttons
        [theme]="'modern-dark'"
        [include]="['facebook', 'twitter', 'linkedin']"
        [show]="3"
        [showText]="true"
        [showCount]="true"
        [autoSetMeta]="true"
        [title]="postTitle"
        [description]="postDescription"
        [image]="postImage"
        (click)="incrementCounter($event)"
        [url]="shareUrl"
    ></share-buttons>
</div>

article.component.ts

incrementCounter(event) {
        event.preventDefault();
        let social = event.target.innerHTML.toLowerCase().trim();
        var url = this.config.url + '/wp-endpoint/' + social;

        const httpFormOptions = {
            headers: new HttpHeaders({}),
        };

        const httpFormData = new FormData();
        httpFormData.append('post_id', this.post_id);

        this.httpClient.post<any>(url, httpFormData, httpFormOptions).subscribe(data => {
            switch (data.platform) {
                case 'facebook_share_count':
                    $('#Facebook').html(data.count);
                    break;
                case 'twitter_share_count':
                    $('#Twitter').html(data.count);
                    break;
                case 'linkedin_share_count':
                    $('#LinkedIn').html(data.count);
                    break;
            }
       });
}

manifest.json

  "theme_color": "#93d50a",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/content-hub/",
  "start_url": "/content-hub/",
  "icons": []

ngsw-config.json

  "dataGroups" : [
    {
      "name" : "api-fresh",
      "urls" : [
        "/category/*"
      ],
      "cacheConfig" : {
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s",
        "strategy": "freshness"
      }
    }, {
      "name": "api-performance",
      "urls": [
        "/"
      ],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1d",
        "strategy": "performance"
      }
    }
  ]

Answer 1

我建议对 PWA 使用 Webshare API。它在 Chrome 61 和 iOS 12.2 及更高版本上运行良好。

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
}); // share the URL of MDN

共享 API 还不能在常规的非 PWA/浏览器上工作，所以我们应该首先测试兼容性：

{window.navigator.share?shareButton:fallBackShareButton}

分享 API documentation