YOUR SHOPIFY STORE? THERE’S AN APP FOR THAT!

Anything you could imagine, there’s an app for that! With the advent of smart phone technology and tablets, “there’s an app for that!” has become the ultimate catch phrase of this most recent technology boom. Everything has an app, and now your personal Shopify store can have it’s own app as well? If you were not aware of Progressive Web Applications, and you’re just reading about this for the first time, then I imagine you’re already skipping ahead to the section where we explain how to get it!

Every merchant, seller, or client would give anything to not only show up in someone’s Google search but to actually live on the desktop of someone’s cell phone! That would be the ultimate commitment to a brand! Before we get too excited, let’s take a moment to understand Google Ads benefits and how they can support this goal, starting with what a Progressive Web Application is.

Progressive Web Applications are a type of mobile applications that help in converting your ‘one-time’ browser or regular visitors into long term customers who will come to your store more often by placing an icon on their cell phone home screen that takes them straight to your Shopify store. Now, it’s important to mention that Progressive Web Applications shouldn’t be considered as native apps we have on our phones, PWAs are not that complex, but they’re more like a bookmark to your favorite Shopify store that is just being run on your browser without the URL search bar at the top.

Now you’re thinking… okay but that’s the same as a current web store and the only part that is missing is typing store’s URL into a browser, instead of that, I’m using an app icon. That may be true - but not completely.

Shopify PWAs have a host of advantages. Your Shopify store PWA is able to function for your customers offline, so they continue to shop your products even without an internet connection. Also, by exploiting the many caching methods, PWA has very fast loading speed with low data usage so using this type of application will become a much more streamlined shopping experience for your customers. Another really important feature is the fact that you can interact with users through push notifications, which is direct marketing at a whole new level. The payment process is also easier for payments because the app saves the personalized data for faster checkout. As you can see the overall goal of this approach is better customer engagement, what means - increased conversions!

The main two PWA building blocks are Manifest file and Service workers.

1. Manifest file is a JSON file which informs the browser about the web application and how the app should behave after being installed on the user’s device.

   Example of manifest.json file for Slicedbread’s progressive web app: 
   

   
   {
     "short_name": "Sb",  
   /*short_name is shown on user's screen, app launcher and on other places where space for app name is limited*/
     "name": "Slicedbread", // name is used in the app install banners
     "icons": [
       {
         "src": "/images/icons-sb-192.png",
         "type": "image/png",
         "sizes": "192x192"
       },
       {
         "src": "/images/icons-sb-512.png",
         "type": "image/png",
         "sizes": "512x512"
       }
     ],
     "start_url": "/sb/?source=pwa",
     "background_color": "#FE6159", //color used when the application is launched
     "display": "standalone",
   /* the app runs in own window without browser elements like URL bar, etc.*/
     "scope": "/maps/",
     "theme_color": "#FE6159"
   }

2. Service Workers
   

However the most important part of Progressive Web Applications are service workers and they are in core Javascript file which represent the ‘middle man’ in cooperation between the user’s device and the network. 

Consequences of SW use are associated with separate operating from the main thread as these workers are independent of the application, so localStorage can’t be used in it, and the service worker can receive push messages when the application isn’t active. This allows pushing notifications to the user even if the browser isn’t opened just like the usual apps do. Because of its isolation, the service worker isn’t able to access the DOM. Instead of direct DOM change, SW uses the postMessage() method to pass the data and message event handler to receive data.

Therefore, all of the caching, information retrieving, synchronization, and networking proxy services are handled by this file.

Can more of “progressive” apps be expected in Shopify?

With all of the previous in mind, we can expect significant growth of Progressive Web Applications in Shopify and in the overall e-commerce market as they are very effectively bridging the gap between the store and customer. Having an ability to browse offline, boost the store’s performance, use push notifications for brand announcements, and personalize the experience entirely will raise online shopping is sure to have a positive impact on positive conversion rates. Even if it is for the super fans of your brand, just remember, there’s an app for that!