Convert your Shopify store to PWA for better performances (conversion)
by Ilias Haddad
On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking about Why you should convert your Shopify store to PWA for better performance?
What is a PWA?
A progressive web application or PWA is a web application that has many capabilities of a native mobile app like Offline Mode, push notifications, have your website on your visitor's home screen.
PWA needs two files:
- Manifest: a JSON file that hosts your PWA configuration like App name, background color, splash screen…
Service worker: is a script that your browser runs in the background to cache assets for offline experience and makes your site faster doing predictive prefetching
Why you should convert a Shopify store to PWA?
Every Store owner, should focus on improving their store performance, and with the new Shopify release. You can check your store speed in your theme dashboard based on your previous visitor's performance score.
In my first article related to Shopify speed optimization, I got a lot of feedback and request from Shopify store owners to improve their online store speed.
From my experience with Shopify, Static files like images and JS files are the critical files that impact Shopify store performance.
We need to focus more on service workers because this what will make your website faster.
The impacts of converting a Shopify store to PWA
- Users spending more time on your service
- Reduced bounce rates for your leads
- Improved conversion rates
- More returning visitors
Most PWA projects result in a higher mobile conversion rate, and you can learn more from the numerous PWA case studies. Depending on your objectives, you may want to prioritize some aspects of PWA that make more sense for your business, and it’s completely OK. PWA features can be cherry-picked and launched separately. — Web.dev
Okay, Great. How we can convert a Shopify store to PWA?
Updated: 20/05/2023
According to the new Shopify update, we can serve direclty assets from our theme assets folder using shopdomain.com/cdn instead of cdn.shopify.com. This update will helps us with serving the service worker and manifest.json file from your domain name.
You should set the scope of your service worker as close to the root of your app as possible. This is the most common setup as it lets the service worker intercept all the requests related to your PWA. Don't put it inside, for instance, a JavaScript folder or have it loaded from a CDN. — Web.dev
Here’s an example Shopify theme with PWA powered without using any Shopify app. By my friend Youness.
Resources:
- #4WeeksOfShopifyDev
- Shopify Dev
- Performance