PWA with WordPress Without Coding — Part 6/6
End Result:
So as promised, we were able to make a PWA, from scratch, without a single line of code!
Unexpected Issues
I encountered an unexpected issue. Add to home screen prompt is shown in Mozilla Firefox, but not on Google Chrome. I filed this issue in their GitHub repository. Turns out this is because I am running WordPress from within a separate directory.
I will continue tracking this issue (Issue #19), and update this post once the developers of the plugin have resolved this. This issue affects people who have given WordPress its own folder while installation.
Benchmarks, Expected Problems:
It is very important that we log out before running our tests. I will use lighthouse, and webpagetest.org to measure what we have. We will only measure performance, PWA, and best practices.
And here are the results, something that shouts: “This approach still has a long way to go!”
https://www.webpagetest.org/result/180410_YJ_c8377221e539475c6b6151892eb2a655/
Lighthouse PWA Score 82 run via webpagetest.org, and 73 when run locally:
The point of ambiguity is speed and as we can see, it is the biggest catch for this method of building websites.
Adding in a CDN and a proper catching plugin will make the speed and load times bearable, but I want to go a step further. A simple performance analysis shows way too many missed opportunities for my taste.
I could build a stunning PWA, without touching a single line of code. It is expected that a few compromises had to be made in the performance part.
<SPECIAL> A Future Expectation
Please follow this issue to learn more: https://github.com/SuperPWA/Super-Progressive-Web-Apps/issues/20
Full OneSignal support in the next update of the SuperPWA plugin! What this means is, the day isn’t far that when we press publish, our users get a notification!
Future Plans
Thanks to the Google’s Udacity Scholarship Challenge and my enrollment in Mobile Web Specialist Track, I am actually learning the skills I need to code a fast web app from scratch.
As time passes I aim to:
- Explore the features around manipulating post templates, category templates, error templates etc between the livecomposer and elementor plugins
- Make my own theme, starting from the _s project, without leaving any bloat
- Custom coded post and page templates
- Self-written service worker, written with the help of workbox
- A high lighthouse performance score
This was end of the five-part series. Please watch out for my PWA + WordPress with code series after I complete the MWS Nanodegree from Udacity.
Series Index:
- Making a PWA with WordPress Without Code — Part 1/6
Introduction
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-from-scratch-part-1-sans-code-69c1b9cbf955 - Making a PWA with WordPress Without Code — Part 2/6
HTTPS On Shared Hosting
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-1-d1fa54d9a120 - Making a PWA with WordPress Without Code — Part 3/6
Adding Themes and Plugins
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-2-14eec9349a3 - Making a PWA with WordPress Without Code — Part 4/6
Design/Wireframing
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-3-1355bf8320a2 - Making a PWA with WordPress Without Code — Part 5/6
The Home Page
https://medium.com/@raveeshagarwal/making-a-pwa-with-wordpress-without-code-part-4-4a024606d04f - Making a PWA with WordPress Without Code — Part 6/6
End Results
<here>
