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.
Intro
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”.
Do check out Google’s page about PWAs as it is a good starting point for more information (Reliable, Fast, Engaging…). Or check out lads awesome post about the topic.
The Benefits:
- Faster Mobile Load Times (Expect the first time visiting the page)
- Can View Website Offline
- Integration with OneSignal
See what else your browser can do.
The Downsides:
- 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.
Testing PWA’s
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.
The Downsides
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.
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 set to lazy load on scroll 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. 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 offline. Payment needed 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 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.
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).
PWA Offline Google Analytics Tracking
A topic that came to mind was how to track offline visitor data when using Google Analytics. Google does offer a solution and there are others out there that have been using this to their advantage.
Conclusion
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!
Update 11/12/2018:
Read more here: https://medium.com/dev-channel/why-build-progressive-web-apps-never-lose-a-click-out-video-write-up-74cbbc466afd
