Progressive Web Apps Tutorial For iOS

In this tutorial I’ll be showing you some of the cool things about setting up your WordPress website as a Progressive Web App and why you may want to do it at all. Things seem to run a bit smoother setting this up for Android but because I’m a heavy iOS user, this tutorial will be geared for that and any of the issues that come up for this platform.

What is a Progressive Web App?

This is a new technology that blends the mobile web view and the juicy stuff that mobile apps has to offer creating a fast and memorable mobile web experience.

A Progressive Web App is like a website reformatted to display somewhat like a normal app and can be accessed from the home screen of your device.

The cool thing about PWAs is that you can still navigate it even when you’re offline. Anyone can always launch the app and interact with it similarly to a regular app’s interface. They are loaded blazing fast, and this of course leads to a better experience for the end user.

Have you ever saved a website to your Home Screen of your iPhone device for example?

Well when you do this for a website that has been converted into a Progressive Web App format, the website is essentially stored locally and therefore can be accessed almost instantly. Keep in mind however, that only those pages that have been visited are made available offline. Also any images that are not hosted in your blog or site, meaning they are being pulled from an external site, are not made available offline either.

Recommended WordPress Plugins

There are a couple of different plugins I played with both are good and somewhat similar:

1. Super Progressive Web Apps
2. Progressive WordPress (PWA)

I went for option 2 above simply because they had slightly more of the configuration options I was looking for.

When testing the plugin, I found out that once I loaded the website in my iPhone and added it to my Home Screen, the so-called Splash Page was not showing up. It just showed blank for a second or two and then loaded my website.

However, through more research I found that at the time of this writing, Apple did not offer very good support for PWA yet, so there is is a workaround to displaying a Splash Page:

You have to add the following code to your Head section in your HTML:

<!-- place this in a head section -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="/apple_splash_2048.png" sizes="2048x2732" rel="apple-touch-startup-image" />
<link href="/apple_splash_1668.png" sizes="1668x2224" rel="apple-touch-startup-image" />
<link href="/apple_splash_1536.png" sizes="1536x2048" rel="apple-touch-startup-image" />
<link href="/apple_splash_1125.png" sizes="1125x2436" rel="apple-touch-startup-image" />
<link href="/apple_splash_1242.png" sizes="1242x2208" rel="apple-touch-startup-image" />
<link href="/apple_splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />
<link href="/apple_splash_640.png" sizes="640x1136" rel="apple-touch-startup-image" />

This is because of the many iPhone and iPad variations:

This code adds all the different Splash Page sizes so depending on what device you’re using, it will pull that image as the Splash Page to display it. The result is a more app-like experience.

Push Notifications To Send Your Subscribers Messages

The other option the plugin gives you is to send push notifications to users who may choose to be notified on your blog or website. It uses a Google service called Firebase. However, many people I’m sure will use OneSignal instead, this another push notification service that offers a free and paid option. Both are worth looking into it.

In a nutshell. The basic steps for turning your WordPress blog or website into a Progressive Web App in a few minutes are these:

1. Download and activate the plugin
2. Create your icon
3. Configure the PWA plugin
4. Test on your iPhone or iPad

Why Should I Care About Making My Blog or Website into a PWA?

If you are serious about creating a better experience for your users, and it fits your business model, then I would recommend it. Especially because most of us small businesses and solopreneurs can’t really afford to hire an App Developer to make a native app, this gives us an easy and fast option to turn a WordPress site into something that has some of the benefits and behaves like a native app without the cost or time.

It also offers a good experience for end users. This is important because providing a good experience will encourage and motivate them to come back. Not to mention adding your website to their Home Screen where you will be in their mind ongoing, especially if they can access much of your content offline!

Sources:

NetGuru