Ionic 3 PWA -> iOS 11.4.1 issues

[robinyo]

Tags: Ionic 3, PWA and iOS 11.x

Each new release of iOS means a new set of issues for your PWA.

I just noticed several issues when running my Ionic 3 PWA on iOS 11.4.1

• after you use an input control (e.g., an <ion-textarea> or an <ion-searchbar>) the screen doesn’t resize correctly
• <input #capture type="file" accept="image/*;capture=camera" ... > has stopped working

“Because of iOS challenges, Starbucks PWA is doing user-agent sniffing and delivering a different manifest for iOS, using display: browser instead of display: standalone.”

“Safari support (and bugs) are changing so fast that even if it works fine today, you might end up with a lousy implementation pretty soon.”

See: You shouldn’t use Chrome’s PWACompat library

Glossary:

• PWA (no PhoneGap/Cordova plugins)
• Hybrid Mobile App (PhoneGap/Cordova plugins)

Ref:

• iOS 11 its not me its you (tags: iOS11, PWA, Camera)
• [Ionic pwa without cordova] statusbar problem on android

[robinyo]

Ionic 3 PWA on iOS - Added to Home Screen - “display”: “standalone”

Tap on <ion-textarea>:

Enter some text:

Tap ‘Done’:

Screen doesn’t resize correctly.

Rotate device:

Screen doesn’t resize correctly.

Rotate device:

Screen doesn’t resize correctly.

Zoom in (pinch with two fingers):

Screen resizes correctly, however, if you rotate the device:

[reedrichards]

@robinyo

<input #capture type=“file” accept=“image/*;capture=camera” … >

I should definitely give a try to this later today, I use the following in my app, hope I’m still good

<input #capture type="file" accept="image/x-png,image/jpeg" (change)="upload()">

[robinyo]

I use:

<input #capture type="file" accept="image/*;capture=camera" (change)="uploadFile($event)" class="custom-file-input">

It works without issue on Android, but it fails silently on iOS 11.4.x

I think I’ll go ahead and add Sentry support to my App.

@reedrichards

Are you seeing any of the ‘sizing’ issues after you use a <ion-textarea> or an <ion-searchbar> ?

[reedrichards]

I should test later tonight too

I don’t use ion-textarea, only textarea but I use ion-searchbar I think

[reedrichards]

@robinyo sorry for the late feedback, doing as I displayed above for the camera/gallery still works like a charm with iOS 11.4.1 on iPhone 6s (real phone not simulated)

I tested my textarea, ion-textarea and ion-searchbar (in content) there all looked ok, no ‘sizing’ effect

[robinyo]

@reedrichards

Thanks

I thought it was related to the settings in my manifest (e.g., “display”: “standalone”).

But it turns out it was ‘meta’ tag related. I updated my “viewport” as follows:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

[reedrichards]

Cool nice to hear you found a solution