PWA on iOS navigates to blank screen on share button click

Question

I am working on an Angular based PWA. The app has social media share buttons generated using the ngx-share/core Module. These buttons work perfectly except on the PWA version of the site running on iOS. When the user clicks on the share button, the OS automatically opens the relevant installed app (ie. twitter) to allow the sharing, all meta data comes through, however when you return to the PWA, it now shows a blank white screen, even if you close and re-open the PWA. What I believe is happening, and through some debugging I found upon clicking the share button iOS seems to automatically navigate the PWA to a new about:blank page, and then hard caches this url, resulting in a blank white screen.

I have tried multiple fixes but nothing seems to work. I have tried adding event.preventDefault() to the click event, and even a history.go(-1), but this doesn't seem to have any effect as it automatically navigates away from this page, so no code is actually executed. I have tried editing the manifest.json , both the scope and start_url. I have tried editing the cache values in the ngsw-config.json. Since the Module seems to handle the links to the social media, I can not add target="_blank", and not sure this would solve the problem, as it seems to be a iOS specific issue.

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"
      }
    }
  ]

Is this iOS 12.2 and above? I had a similar issue with mailto: , I fixed it by adding a return statement at the end of the onClick function. Can you test this please? — Gary Vernon Grubb, Aug 08 '19 at 11:02
@GaryVernonGrubb, thanks for the response. Yes it is iOS12.2+. I have tested using the return statement as suggested, unfortunately no luck. — Marc Lauder, Aug 08 '19 at 11:37
I use the share API which works in both iOS & Android PWAs. It does not work in standalone browsers. Here is the code I use in my react app, you can do something similar for Angular. — Gary Vernon Grubb, Aug 08 '19 at 11:49
navigator.share({ title: 'Title', text: this.props.share, url: baseURL }).then(() => { console.log('Thanks for sharing!'); }).catch(err => { console.log(`Couldn't share. `, err.message); }); — Gary Vernon Grubb, Aug 08 '19 at 11:49
Oh, I forgot yo mention, I conditionally render this code by testing for support first: {window.navigator.share?shareButton:fallBackShareButton} — Gary Vernon Grubb, Aug 08 '19 at 11:51
Thanks @GaryVernonGrubb, Yes my plan going forward will be to write my own share integration and not rely on the ngx-share Module, as I am uncertain of their implementation and this is where the issue may lie. — Marc Lauder, Aug 08 '19 at 11:58

score 1 · Answer 1 · answered Aug 08 '19 at 12:10

1

I suggest using the Webshare API for PWAs. It works well on Chrome 61 & iOS 12.2 and above.

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

The share API does not work on regular non-PWA/browsers yet so we should test for compatibility first:

{window.navigator.share?shareButton:fallBackShareButton}

Share API documentation

answered Aug 08 '19 at 12:10

Gary Vernon Grubb

9,695
1
24
27

These two links wrap it all: https://developers.google.com/web/updates/2019/05/web-share-files (code) and https://w3c.github.io/web-share/demos/share-files.html (sample demo): – Aug 19 '19 at 04:24

PWA on iOS navigates to blank screen on share button click

1 Answers1