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”. The Benefits:
  1. Faster Mobile Load Times (Expect the first time visiting the page)
  2. Can View Website Offline

The Downsides:

  1. Need to visit pages online to view offline (download and store them)
  2. Contact forms did not work
  3. Lazy Loaded images did not display offline
  4. WooComermce Doesn’t Work 100%

Testing PWA’s

The plugin was an install, upload some images and 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. Sweeet. Overall, I was impresssed with how simple it was to work.

The Downsides

Partly Downloaded Website

The downside was the app doesn’t download the whole website to your phone. 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. Above The Fold loading speeds would be very important for PWA’s first time loading. Loading longer than 5 seconds and you may lose your visitor.

Offline Data Submission

But then came some minor issues. 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. I made a simple javascript tester that checked if the contact form was in a PWA and offline. if so, it disabled the contact form submit button with a warning underneath saying to get back online to submit the form. Not perfect, but allows me to keep the form visible.

Lazy Loaded Images

Images that were lazy loaded were not saved with the rest of the website on the mobile device. Why? The plugin replaced the image source with a simple 1-pixel sized gif that was swapped out using javascript when the image was scrolled into view. This is great for websites to improve website loading speed but sucks for PWA’s as if you are offline, the image would not be swapped in. I had to disable that awesome plugin to get it to work. 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).

Online Shops

Finally, I tested Woocommerce. As there are lots of pages you visit during the journey of buying from a Woocommerce website (product page, shop, cart, checkout etc) that are not stored when you visit the website. And payment needs to be online for PayPal and credit cards.Woocommerce is not currently designed to run offline (No javascript style UX). There are simple solutions: https://wordpress.org/plugins/pwacommerce/. It isn’t perfect but it allows you to view products and add to cart.

PWA Uses

Blogs, News, Articles. Currently, these are the best uses for PWA with WordPress. Afterall, WordPress did start 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. Education websites with lessons would be great as well. Website Tools like body fat calculators or financial calculators that require repeat uses. More pwa app ideas. HTML5 Games. They are heavy coded websites which if repeatedly played, could save your gamers some 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).

Ideas

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).

Conclusion

For small businesses that use WordPress as a marketing service (an online businesses card), PWA’s would not be needed. 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.

The following two tabs change content below.
I don't really have a job title, since I am the only employee. I guess "founder" is best. As the saying goes "a founder wears all hats" - so my job duties are basically everything that needs to be done.

Pin It on Pinterest

Share This

Share this if you believe it will help one person in the world.