I have been working on building a PWA front end for WooCommerce. I saw the Polymer Shop repository and thought it couldn’t be that hard to wire up to a real backend and get everything working. I was right and I was wrong.
I started by creating a WordPress/WooCommerce install on Pressable. This was really simple and took maybe 5 minutes. I then populated it with the categories that I needed and a couple items to show on the site.
Next was to create node api server that could handle authentication because the wc-api requires auth to make calls. This api server is also a great cacheing point since it serves one thing to many users. It only needs to retrieve the data from the WooCommerce store daily or hourly in order to be current. Again this was pretty simple and required only an hour of effort to get an express server running and making requests to the WooCommerce store. The documentation on the WooCommerce API is pretty good. Once I had the service working I pushed it to Google App Engine. I have yet to add caching but plan to do so when I have time.
I finally had everything ready for me to dive in and get the Polymer Shop running off my service instead of hard coded arrays and json files. First I needed to get the categories pulling from the api. Easy enough but since they were hardcoded I needed the app to wait for the API to return before showing the page as a 404 since the category requested did not exist. In the constructor I call the function that fetches the data from the API. I also added some checks to wait for category data before declaring the 404. Not to difficult. Next was getting the items displaying properly. Not too difficult, all I needed to was replace the json file with a fetch to the api server and modify the data format a bit.
Where I ran into problems. I was at first attempting to use the PRPL node server but couldn’t quite get it working. I struggled with this for a couple hours and gave up. I know now why it wasn’t working and will eventually get back to it. The way I had it configured was serving the src folder not the builds. Once I removed that and decided to just serve the es6-unbundled version to start with I was moving again.
The next issue that I ran into was trying to get the service worker implementation to add the api and store urls so that it would cache everything it needs. Because the Polymer CLI was building the service worker I had to add those urls to that build and I failed in figuring out how to do that. I had used Workbox before and decided to just do my own implementation. I ripped out the CLI service worker implementation and struggled with the instructions here. What I didn’t realize was that you could not provide your own base service-worker.js with
workbox-cli generate:sw what I needed was
workbox inject:manifest which creates a manifest of the files and injects it into the source service worker you give.
Once I had all that in place everything was on easy street. I pushed the frontend to another Google App Engine instance and I was done.
There is still lots to do:
- There is a bug where if you click around quickly it gets confused which category to use which then breaks everything
- Sometimes when you click on an item it takes a while to load and sometimes never loads
- When you first load the app it is really slow.
So in conclusion. It is not World’s Fastest Store but could be with a few optimizations. I have work to do but it is a beginning and also just a proof of concept.