Progressive Web Apps and WordPress
- Post Menu
Check If Your App Is "Progressive"
Test with Google’s Lighthouse tool
Update 9/03/2019: Personally, I see the gap between PWA’s and WordPress is still a large one… Current themes and page builders are still focused on website and mobile responsive processes (and still getting it wrong most times) with little hype or progress with PWA enabled themes. While there is the awesome Super PWA plugin (Well done lads), it is a “Save All To Phone” approach that would quickly be pointless for an online store or large news website. While I will continue to “watch this space” in the PWA’s sphere, it will take a large jump to help/encourage everyday joe to move to PWA’s.
Earil 2018: I came across a plugin that allowed a WordPress website to become a PWA (Progressive Web App). PWA’s are regular web pages or websites but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience.
As per Alex Russell’s words, Progressive Web Apps are “Just websites that took all the right vitamins”.
- Faster Mobile Load Times (Expect the first time visiting the page)
- Can View Website Offline
- Integration with OneSignal
- Need to visit pages online to view offline (download and store them)
- Contact forms did not work
- Lazy Loaded images did not display offline
- WooComermce Doesn’t Work 100%
- As of April 2018, iOS supports PWAs but not that well
if you have PWAs running, make sure to test it using Chrome’s Lighthouse Tool. The tools is super valuable outside of PWAs as well.
The plugin was an install, upload some images, set your details and forget system. It did the rest. I tested it on my mobile browser (chrome), and was asked if I wanted to install the website as an app on my phone. I tapped yes and off it went, putting an icon on my home screen that when opened, loaded my website.
So I disabled my internet and opened the app again, the website homepage loaded again! What did I expect… Testing website loading times on mobile dropped by half. It already had all the files on the phone and didn’t need to redownload them all again.
Overall, I was impressed with how simple it was to setup and run.
Partly Downloaded Website
The downside was the app doesn’t download the whole website to your phone (I guess its a good thing as some websites are huge!). Just the pages you visited while online.
So technically, if I visited the whole site while online, I would have my website offline. But logically, you can’t do that as each device has different limits to the space you can store offline files.
Data Submitting While Offline
If I am offline, how do my contact forms work?
Short Answer: They didn’t. Contact Form 7 just does not have an offline storage system (yet?). I did see that Gravity forms were played with for offline form submission which was cool. And there seems to code ways to get around any sort of offline form submission issue.
Lazy Loaded Images
A part solution was to install this plugin that added in src-set size images. This allowed smaller resolution images to load on mobile instead of using the full 1600px width image that the desktop would use. Mobile speeds for first time loading would improve, however, desktop load speeds would get worst as the lazy loading feature was not enabled. A downside for desktop but in the age of mobile, do your visitor research and see which device to focus on.
If you combined Lazy Loading with src-set size images into a plugin, that would be a plugin I would use to fix this (and for general use).
There are simple solutions: https://wordpress.org/plugins/pwacommerce/. It isn’t perfect but it allows you to view products and add to cart while offline. Might be better for smaller shops than the larger shops.
PWA Uses and Ideas
Blogs, News, Articles. Currently, these are the best uses for PWA with WordPress. Afterall, WordPress did start out as a blogging platform.
Information database style websites (like Wiki) as you can keep coming back offline for the same information. The Pokedex is a great example of this type of system.
Education websites with lessons would be great use of the tech. Website Tools like body fat calculators or financial calculators that require repeat uses. There are heaps more ideas here: pwa app ideas.
HTML5 Games. They are heavy coded websites which if repeatedly played and visitored, could save your gamers internet AND your web servers some load. There are heaps more ideas at PWA ROCKS.
For the more tech-minded, Google has a 30min video about how they combined WordPress and PWA to get a fully functioning PWA blog working. (Note, iframes such as Youtube embeds require internet so they would not work offline).
There is a meta tag “preload” which allows you to load the second page in the background of the first page. The purpose would be to allow for a fast user experience IF you knew that the second page was going to be visited. The bad part is that loading the first page would take longer as it is loading two pages. It also uses a lot more internet for someone just visiting the first page (and ignoring the second page).
With PWA, you could possibly do this with its settings (you can define pages to store).
PWA Offline Google Analytics Tracking
As most of my clientele are small businesses, the conclusion is biased to focus on them.
For small businesses that use WordPress as a marketing service (an online business card), PWA’s would not be needed (just some major speed improvements).
Online shops at the moment could partly use PWA’s for browsing products but the checkout process would require them to be online. If you want to dive into the tech side of coding your own, Google has got you covered.
Update 23/11/2018: Desktop PWA’s will be available with Chrome from version 70 for Linux and Windows. MacOS will be ready from version 72. Check out the details!
Read more here: https://medium.com/dev-channel/why-build-progressive-web-apps-never-lose-a-click-out-video-write-up-74cbbc466afd