AMP or PWA? Why not AMP + PWA!

Choosing between AMP or PWA is a really difficult dilemma. You want your website to load instantly after it’s clicked from the Google Search results, but you also want to make your blog look like a native app and prompt users to add your website to their home screens. It’s kind of tricky to activate both, but there’s a way to easily harness the power of both Progressive Web Apps and Accelerated Mobile Pages in WP.

Wondering how to use the lightning fast AMP and the awesome PWA at the same time in your WordPress blog, here are two WP plugins that are compatible with each other. You just need to install them in the right order.

There are many AMP plugins out there, but this one does its job really well. Surprisingly, this is not the “official” AMP plugin for WordPress by Automattic. The plugin I recommend is the second most popular called AMP for WP – Accelerated Mobile Pages by Ahmed Kaludi and Mohammed Kaludi. This one: https://wordpress.org/plugins/accelerated-mobile-pages/

Install the AMP plugin first, set it up (There’s a newbie mode and expert mode, it’s up to you what setup option you want). Then once you’re done, install the PWA plugin that I mentioned in this post. After installing the PWA plugin, go to Settings > Super PWA > Scroll down a bit, then tick “Use AMP version of the start page”.

That’s it. You have enabled both PWA and AMP in your WordPress site. It doesn’t show the add to screen prompt on user’s first visit from Google SERPs, but you can disable the “Automatically add AMP at the end of menu url” and disabled “Mobile Redirection” in AMP > Advance Settings, so that when the user clicks on the menu link or any link, he/she will be redirected to a normal non-AMP page and that the magical PWA prompt will trigger.

Try it, it’s fun to explore these two awesome plugins.