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 文檔