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

Question

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

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

文章.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>

文章.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;
            }
       });
}

清单文件

  "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 文档