PWA & iOS

Why this sucks and what can we do about it

👨‍💻

  • Krystian Kościelniak
  • Front-end Developer @ Brainhub
  • Remotee @ Kraków

📅

  • A shameful confession
  • An  justification
  • An shallow dive to PWA on iOS
  • The research summary

😳​

I'm not a fan of the idea tbh

  • I like native
  • I like React Native
  • PWA still has some early-age problems IMO
  • The promise of engagement is not delivered. Yet.

On the other hand

  • It's easy to hate for no reason
  • I've decided to give it a shot
  • I've spent few weeks to explore the idea

Disclaimer. Today I am:

  • Not treating PWA as an elastic tech stack
  • Answering some questions about PWAs current state
  • Presenting the point of view of an iOS user who considers using PWA app instead of native one. 

 invented PWA

  • Well... almost
  • Web 2.0 + AJAX
  • But then... the App Store

​ has some reasons

(the reasonable ones)

🤑

  • It may become the 1st one (They invest in services a lot)
  • App Store is the most lucrative service atm

🤑

  • 70/30 payment model for both Apps and In-App purchases
  • Pay or make the UX bad

🚔

  • Lack of control
  • PWA apps don't have to follow Apple Guidelines
  • Hard to keep native UX as it differs between platforms
  • Porn.
    Apple does not like porn

Does  give a fuck about PWA?

📲

  • Basic Service Workers support was introduced in iOS 11.3 (March 2018)
  • iOS 12 (September 2018) does not bring any improvement to PWA support at all
  • iOS 12.1.3 (January 2019) - nothing changed
  • iOS 12.2 (March 2019) - something happens

🤔

What can we do?

(quite a lot, actually)

We can...

  • Make a call, send SMS
  • Take photos
  • Geolocate the user
  • Pay with Pay
  • Create Share Extensions (iOS 12.2)
  • Keep state in multitasking (iOS 12.2, buggy)
  • Open out-of-scope pages like OAuth (iOS 12.2)

We kinda can...

  • Synth speech (only if an external headset is used)
  • Store data offline (only 50Mb)
  • Use gyroscope and accelerometer (if the user allows it explicitly)
  • Play audio in the background
    (but no player controls are available in the background)
  • Use some experimental Web* APIs
    (WebRTC, WebGL)

We can't...

  • Install our PWA app on the Home screen
  • Use app icon from manifest.json
  • Create splash screen easily
  • Access native features (TouchID/FaceID, Siri,
    Bluetooth, 3D Touch etc.)
  • Access private data (contacts, logs etc.)
  • Create apps that work in Split View on the iPad
  • Execute code in the background
  • Create push notifications

We need to remember about... 

  • Adjusting the navigation in the app (back button)
    • We can use gesture controls (iOS 12.2)
  • Any third-party browser on iOS doesn't support Service Workers

🧠

What can we do about it?

(quite a lot, actually)

So we have an app...

  • This one is created by "a friend of mine"
  • Allows to record our  medicine usage

App Icon

  • It's an app screenshot by default
  • It's not the same as defined in the manifest.json file
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- [...] -->

<link rel="apple-touch-icon" href="app-icon@120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="app-icon@152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="app-icon@180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="app-icon@167x167.png">

App Icon

  • We need to add an icon in exact size for each device separately

Splash screen

  • It's just plain white
  • The plain white box is visible in multi tasking menu
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- ... -->
 
<link 
    href="%PUBLIC_URL%/ss-iPhone6-4.7.png" 
    sizes="750x1334" 
    rel="apple-touch-startup-image"
    media="(device-width: 375px) and (device-height: 667px) 
            and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>

Splash screen

  • We need to do it for each device separately
  • Images need to be of exact device resolution and use media queries

Splash screen

  • BONUS: Splash screen is visible as an app miniature in the multitasking window

Add to home screen banner

  • Not available on iOS by default
  • Needs to be handled on our own
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test(userAgent);
}



const isInBrowser = () => 
  !(('standalone' in window.navigator) && (window.navigator.standalone));



if (isIos() && isInBrowser()) {
  this.setState({ showInstallMessage: true });
}
$ yarn add react-add-to-homescreen

Add to home screen

  • Banner is visible if the user opens a web app on iOS Safari
  • Provides a brief instruction on how to install the app
  • User still needs to take the steps to install the app

What else...?

  • Disable text selection
  • Disable external hyperlinks

We still don't have...

  • Integration with Apple Health
  • Push notificatons (reminders)
  • Any other native functionality

Is it worth the hassle?

Yes.

AliExpress increased its iOS conversions by 82%, despite iOS not supporting the full feature set of Progressive Web Apps

And they don't even have icon for iOS homescreen

Uber’s PWA core app is only 50k gzipped and takes less than 3s to load on 2G networks.

And it's fully usable in Poland.

We won't develop a fully-featured app in PWA

But we still can build something close enough

In no-time

You may also check:

Thanks

Others

Made with Slides.com