My experience with PWA

[amjadyahya]

Hello everyone,

I’m working on a project that is supposed to be delivered next week, I decided to take the PWA approach rather than the native approach for a number of reasons. Now I’m nearly finishing this project and wanted to share my experience with PWA.

On Android, the experience with PWA was awesome but on iOS it was terrible, iOS is not ready for this kind of approach as it lacks lots of features that are essential for the user experience, to name a few bumps that I ran into (had I known that before I started I would have not taken the PWA path):

• You cannot use your own app icon, Safari takes a snapshot of the page when you hit “add to home screen” button and use as an icon.
• It is not possible to use Facebook login because the callback after logging-in will not be triggered.
• On Android, Chrome automatically recognizes that this is a PWA and prompts the user to add to home screen, Safari does not (Chrome on iOS does not have an “add to home screen” button).
• Lists with about 32 items sometimes freeze on iOS.

I don’t know what else is not supported on iOS but for me the above is enough to take this decision: until PWA are fully matured on iOS I will not repeat this experience again.

[robinyo]

@amjadyahya

You cannot use your own app icon, Safari takes a snapshot of the page when you hit “add to home screen” button and use as an icon.

See:

• https://realfavicongenerator.net/
• Favicon checker

@amjadyahya

It is not possible to use Facebook login

See:

• Is there a way to integrate facebook & google login in ionic PWA - #5 by nsvivek121

@amjadyahya

On Android, Chrome automatically recognizes that this is a PWA and prompts the user to add to home screen, Safari does not (Chrome on iOS does not have an “add to home screen” button).

See:

• Encouraging iOS users to install your Progressive Web Apps in Ember - DockYard
• PWA: Create a “New Update Available” Notification using Service Workers | by Simon Wicki | Progressive Web Apps | Medium
• http://www.jomendez.com/2018/06/05/add-home-screen-pwas/

Also see:

• https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/
• https://robferguson.org/blog/2018/04/17/optimising-the-performance-of-an-ionic-pwa-part-2/

iOS:

Android:

@amjadyahya

I don’t know what else is not supported on iOS

See:

• PWAs are coming to iOS 11.3: Cupertino, we have a problem | by Maximiliano Firtman (firt.dev) | Medium
• Progressive Web Apps on iOS are here 🚀 | by Maximiliano Firtman (firt.dev) | Medium

[amjadyahya]

Thanks @robinyo I will look at the links you have posted.

I have another question: how to enforce PWA to not use the cache version and always update on iOS? It works perfectly on Android when I changed “service-worker.js” not to cache any files at all, but unfortunately this is not working on iOS, any ideas?

[reedrichards]

@amjadyahya

It is not possible to use Facebook login because the callback after logging-in will not be triggered.

Nope, it’s possible and working. Another solution as the one listed above (without library) is to build your own custom Facebook login flow Manually Build a Login Flow - Facebook Login - Documentation - Meta for Developers

[reedrichards]

About service worker cache, I opened the following thread https://forum.ionicframework.com/t/pwa-service-worker-app-cache-duration