Progressive web apps(PWAs) are coming to a Safari near you

Mr Super Shetty
A Web Developer
Published in
5 min readJan 4, 2018

--

Safari is finally adding PWA features.

For those of you who have no clue what a PWA is or are confused about how to begin developing a PWA or dont know about it’s importance please read this post on PWA before you proceed.

Safari/Webkit has finally started adding features that constitute a PWA. Before we proceed its important for us to understand what features constitute a PWA. At the core of it only three

  1. Web App Manifest
  2. Service Worker
  3. Cache API

These are the must have PWA features. PWAs are web apps that can be added to homescreen. And it works like a app when opened from homescreen without the browser window. You may ask what’s works like a app. In any native app when you open the app, the shell is always available. It may also show you last time’s data when offline or when loading. In traditional web apps you see a white screen then HTML loads and if it was a SPA(single page application) the js loads which makes ajax calls and then loads data.

By making optimal caching strategy, you can eliminate the initial white page. But here you are at the mercy of the browsers Overall Cache size/limit. One way to overcome this was the offline cache manifest. This was a very cumbersome way to achieve the above. Thankfully it’s deprecated.

At the starting of last year support for PWA looked like this

  1. Supported (Almost/Fully) — Chrome, Opera,
    In Dark Green Color
  2. Mostly — Firefox
    In Light Green
  3. Partial/Buggy — UC Browser, Samsung Internet
    In Yellow
  4. Enthusiastic (coming soon) — Edge
    In White
  5. Not Supported — Safari, Opera Mini
    In Grey

Opera mini is meant for really low end phones and hence it can be forgiven. So the only major player that wasn’t on the PWA bandwagon was Safari. Service Worker was in their 5 year plan but we had no idea if they will implement web app manifest.

To be honest web app manifest is optional in Safari as Safari had its own proprietary meta tags. The apple touch icons and start url meta tags. you can read about icons sizes and the dilemmas here

Although they don’t offer quiet the breadth of features of a web manifest file, they did the job. Also, they supported proper splash screen/launch image. There were stories floating around of how safari is the new IE and why supporting web isnt good for their bottom line.

But all that changed by the end of the year.

  1. Samsung gained full support
  2. UC improved their support
  3. Safari and IE are working on PWA features. Some of these work in their preview version.

Safari recently went live with Service Worker in their technical preview. This means that atleast on their desktop safari we will see support for Service Worker. On mobile, we really have to wait and watch if Service Worker will be supported.

https://webkit.org/status/#specification-service-workers

They are also developing web app manifest. This we should see pretty soon(this years iOS 12 i guess).

https://webkit.org/status/#specification-web-app-manifest

When we talk about PWA’s we also assume the a few nice to have features. And it’s nice to know that Safari has improved on all of these.

  1. IndexedDB — Its support in iOS/Safari was buggy to say the least. People were falling back to local storage. With 10.1 they fixed all the issues and we are now good to go.

2. Payment Request API — Payment API was born out of Apple Pay JS. It was a proprietary solution released by Apple to support Apple Pay on web. It was a question of when rather than will they. They are currently working on it. Google had even released a shim that polyfilled this in iOS/Safari.

3. Credential Management API — This is an API that makes login on sites a one click experience. No need of user fiddling with passwords or login forms. Autocomplete/Autofill mostly does the job but this API makes it seamless. Sadly i couldn't find much info on if they will support this API. My guess is they will.

4. Push API — On desktop they support Push Notifications via a proprietary API, on mobile web they don't have any intention of supporting it atleast for the time being. The current Push API draws heavy influence from how iOS and Android handles push. Thus the job for Apple to transition their proprietary API may not be humongous.

5. WebRTC — It basically a P2P connection between two users allowing them to communicate directly, browser to browser. Sub features of this is getUserMedia that allows advance image and video operations. This is supported in iOS 11.

The great thing about iOS user is that most of them upgrade their OS once Apple releases it. In the chart below notice how in 1 year iOS 10 has captured 90% of the market from 0%. This means you might not need any polyfill pretty soon(my guess a year from now).

Data from statista.com

Update : ios 11.3 supports web app manifest and service worker

Tweet about Service worker and manifest support

Releasing Soon : PWA at a Safari near you

Want me to write more

Hit claps if you liked it. It will encourage us to write more. Follow me for more posts on PWA’s and mobile. Comment below if you have any other suggesions or inputs. So give up on Apple yet .

--

--