Loading..
Processing... Please wait...

Product was successfully added to your shopping cart.



Free Magento PWA extension review

Magento collaborates with Google to bring PWA ( progressive web apps ) to merchants. That news was announced during Magento Live UK conference in June 2017.

Alex Komoroske, group product manager at Google:

 

PWAs are the new standard for building a modern web experience.

We're excited to see Magento's continued investment in the technologies required to create modern shopping experiences.

 

I won't go into much details about PWA. All interested could go to the official documentation. From what I can see progressive web app is a way you can mark up HTML so that a browser can preload and cache static content.

How is that different from AMP ( accelerated mobile pages )? This Google group has some answers. Here is some excerpt:

 

AMP delivers pages almost in an instant for users browsing content on the mobile web, which is hugely important on limited or flaky networks. Progressive Web Apps deliver reliable performance for re-visits to sites thanks to Service Workers and allows unprecedented engagement via push notifications and Add To Homescreen.

 

How do we try PWA with Magento? There is a free extension by Meanbee. I would like to review this plugin. It is available on github.

 

Installation

 

To take advantage of PWA your site needs to be served under SSL. When using self-signed certificate you might want to restart Chrome browser to recognize your domain as secure:

 

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:1123

 

More details on how to setup PWA locally can be found here.

To install Magento PWA extension you need to install modman first. Modman is just a bash script that manages extensions. Follow installation guide on its official github page.

With modman installed issue these two commands:

modman clone https://github.com/meanbee/magento-meanbee-pwa.git
modman deploy magento-meanbee-pwa

Clear cache and go to Magento backend. Relogin. You should now see PWA configuration at System > Configuration > Web > Progressive Web App Settings:

Magento PWA extension settings Magento PWA extension settings

The extension is using https://domain.com/serviceworker.js as Service Worker URL. You might need to edit web server configuration to route that request through Magento. For example for nginx:

location ~ <strong>serviceworker\.js</strong>$ {
    if (!-e $request_filename) {rewrite / /index.php last;}
    fastcgi_pass 127.0.0.1:9013;
    fastcgi_param  SCRIPT_FILENAME  /path/to/magento$fastcgi_script_name;
     include        fastcgi_params;
     fastcgi_connect_timeout 60;
     fastcgi_send_timeout 180; 
     fastcgi_read_timeout 180; 
     fastcgi_buffer_size 128k;
     fastcgi_buffers 4 256k;
     fastcgi_busy_buffers_size 256k;
     fastcgi_temp_file_write_size 256k;
     fastcgi_intercept_errors on;
}

 

PWA is now enabled on your frontend. How to confirm? Use Chrome browser. Open up any product page and go to Chrome Developer Tools. Under Network tab see if your static content is served from Service Worker - that is the sign you are using progressive web app:

 

Magento 2 PWA frontend in Chrome browser Magento 2 PWA frontend in Chrome browser

 

What the extension does?

 

Some technical details. The extension places this javascript on every page:

<script type="text/javascript">
  (function () {
    if ('serviceWorker' in navigator) {
       navigator.serviceWorker
         .register('<?php echo $this->getServiceworkerJsUrl() ?>')
           .catch(function (err) {
              console.log('Service worker registration failed:', err);
    });
   }
 })();
</script>

It checks if a user runs PWA-enabled browser and registers service worker URL.

Service worker URL looks like https://domain.com/serviceworker.js . That is JavaScript generated by Magento ( there is no real file serviceworker.js on disk ) .

All the magic happens inside the browser - the JS block mentioned above is the only change the plugin makes to the frontend page.

 

Performance results

 

PWA will not improve your time to first byte (TTFB) . Progressive web app technology only speeds up page rendering.

For testing purposes I was using a fresh copy of Magento 1.9.2.3 with Luma theme. I was using Chrome browser.

I performed 5 loads of cart page with 1 item. I picked the load with the lowest loading times.

Here is the result with PWA on:

 

Magento PWA on Magento PWA on

 

And with PWA off:

Magento PWA off Magento PWA off

 

As you can see there is hardly any difference between PWA and no PWA. In fact full load time without PWA is even lower because it doesn't have to load https://domain.com/serviceworker.js Service Worker URL.

Visually I didn't notice the difference neither. When I browsed the site with PWA on it didn't feel any faster.

 

Summary

 

If you want to try progressive web app technology on you Magento site there is a free extension - Meanbee PWA. Installation is easy. The only requirement - you will need SSL. Plus you might want to change web server configuration to make Service Worker URL work properly.

They say PWA will make your site faster. But I didn't notice any speed boost. Visually it feels the same. I tested the site with Chrome DevTools and the numbers didn't show any performance increase in regards to using PWA.

 

Want to speed up Magento? Check out these 20 field proven steps to improve performance.

Struggle with slow site? Let speed experts help you.

 

Like the article? Share:

 

Other articles you might be interested in:

  1. Magento 2 site optimization worthless extension
  2. Magento 2 TTFB (Time To First Byte) Optimization
  3. Magento 2 on AWS Debian Jessie 8 Dirty Cheap with Spot Instance
  4. Is Magento 1.9.2 faster than 1.9.1.1 ?
  5. Wyomind plugin to add 250ms to Magento 2 TTFB

  

Our Magento extensions you might be interested in:

  

If you find this post interesting do not hesitate to sign up for our newsletter and join the 859 people who receive Magento news, tips and tricks regularly.

Thank You!

 

 

2 thoughts on “Free Magento PWA extension review”
  • Konstantin Gerasimov

    Eric, thank you for your comment!

  • Eric

    Hi Konstantin! Long time reader, first time commenter here. Just wanted to start by saying that I think your work on speeding up Magento is great, and this is another great example.

    Admittedly, I never thought to use PWA with Magento 1's default design. I think that to truly realize the benefits of a PWA, Magento's front-end would need a huge re-write, to function as a single-page-app instead of a monolithic multi-page website.

    The real beauty of a PWA is being able to provide a good user experience to repeat customers, even with no internet connection whatsoever. For example, you could cache JSON about your whole catalog, and let the user browse the catalog, add to the wishlist, or even the cart, without having internet. Then when network connectivity is available, you can push all that data up to the server and let them complete their checkout.

    A typical use-case for this could be a contractor out working on a construction site with no internet. They can find all the products they need, add them to the cart, then once they get back to civilization (ie, where there's internet) they can place the order.

    PWA also lets you send push notifications, so you can let the buyer know via push notification when a package has been shipped, or if there's some issue that requires their attention (ie, a product that they ordered is actually out of stock, even though the front-end didn't say so).

    I should also note: The comparison in your second screenshot is not really fair. You can see that, without PWA, all of the assets are being loaded from the memory and disk caches anyway, so of course it will be roughly equal to the speed of a PWA. The true benefits of a PWA go far beyond caching page assets though.