For those don’t know what a PWA is, we’ll start by saying that there is no unique or precise definition.
Progressive Web Apps (PWA) is kind of like a new technology that creates a middle ground between a website and a mobile app. They are installed on smartphones like a normal app (web app) and can be accessed from the home screen and even the app list or menu section. Users can come back to your website by launching the app from their home screen and interact with your website through an app-like interface!
It can also be referred to as an app created with Web technologies that −without packaging or signing− can work offline and can optionally be installed in the operating system where it will look and act like any other app.
PWA has around for quite some years now on Android, but with iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive Web Apps” (PWAs) for iOS.
At the moment, only Edge/Windows 10 is currently forcing PWAs to be in the store. It is also worthy to note that Google just recently joined the fold by permitting PWAs to be published and discovered on the Play Store.
So basically, you can now install apps on iOS without App Store approval and PWA is one of such apps.
The criteria iOS uses to decide if the site is a Progressive Web App:
- Website should served fully via HTTPS
- Website has a Web App Manifest
- Web App Manifest has name or short_name property
- Service Worker registered with a fetch event handler
- Display property should set to standalone, fullscreen and minimal-ui
Let’s quickly walk you through the steps on how to install and test PWA on iOS devices.
- Make sure that you have cleared the browsing data and browser cache.
- Visit the website that you have installed PWA
Note: Currently like as on Chrome for Android and other browsers on Android there’s no inbuilt prompt to show Add to Homescreen for iOS devices. Due to that reason you need to manually add the PWA to your Homescreen. - Tap the Share button (can be found at the browser options)
- From the options tap the Add to Homescreen option, you can notice an icon of the website or screenshot of website added to your device’s homescreen instantly.
- Tap the icon from homescreen, then the Progressive Web App (PWA) of your website will be loaded.
- Upon PWA navigate via some of the web pages you like, after that disconnect the internet on your iOS device and close the web app.
- After that tap the web app icon again, you can notice that all the pages which you viewed earlier during online can be viewed and all the pages that you haven’t viewed will showed by an Offline page that you set upon the service worker.
Abilities of PWAs on iOS
With the Web Platform on iOS you can access:
- Geolocation
- Sensors (Magnetometer, Accelerometer, Gyroscope)
- Camera
- Audio output
- Speech Synthesis (with headsets connected only)
- Apple Pay
- WebAssembly, WebRTC, WebGL as well as many other experimental features under a flag.
That’s all you need to do when installing and testing PWA on iOS. Should you have any issues installing PWA on both Android and iOS here? Feel free to reach out to us in the comment section or by filling our contact form. We’ll be glad to help you out.
Source: Medium, SuperPWA
