Tips for optimizing performance in Magento PWA Studio

I try to search for similar topics online, but have not found a good one that covers the optimizations and configs of the magento side and that of the server side.

as per magento page:
– You must confirm that FPC must be deactivated and if no other caching is required.
– In my case, I find that Magento perform similarly in developer mode and production mode. Production should be faster, right?

According to a production website running PWA Studio, are there any tips to improve performance as much as possible?

twitter – PWA without Chrome

Can PWA (Progressive Web Application) run without Chrome, but with a different Chromium-based browser? I plan to run Twitter PWA with Kiwi browser.

Access to PWA-relevant data data/data/...webapk.../shared_prefs/org.chromium.webapk.shell_apk.xml There is a string name runtime_host With, I have replaced that with com.kiwibrowser.browser and seems to be working.

Module – Integrate the PWA app into the Magento2 website

I want to integrate the PWA app into my Magento2 website. I have already tried the Tigren extension and made changes according to the document. After the installation I get errors when checking out.

I get the following errors:

Uncaught ReferenceError: firebase is not defined

require.js:1895 GET https://xxxx/pub/static/version1575442910/frontend/Smartwave/porto/en_US/@firebase/app.js net::ERR_ABORTED 404 (Not Found)

Uncaught Error: Script error for: @firebase/app

How can I fix these errors or is there another way to implement PWA Application?

Change the start URL for the installed Chrome desktop PWA

Is it possible to change the start URL for a site that was installed as an app in Chrome?

If it was my app, I would do it by changing it start_url in the web app manifest file.

However, is there any way to change it for another user's site so that it uses a URL other than the one specified when opening?

To put it bluntly, I do not want to change it for my own site, but for a site I use.

PWA When should I change my pwabuilder-sw.js?

I start in PWA and have several questions. I have already created my page and it works.

During their studies, they often warned here and there to allow infinite life caches in the browser, but I have never seen or understood how to objectively avoid them.

So I have some questions:

1 – When should I update the service worker file? That is, every time I move the HTML markup on my main page, do I have to add a javascript code or other changes, change the SW file to a new version as well?

2 – As mentioned earlier, my page works fine, but in my Chrome browser, the F12 crawl, the Application tab, the Cache section, and the Cache memory option are my old ones Caches available, although I have set them return caches.delete (cacheName); in the SW file:

function(event) {
      return Promise.all(

 cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);

3 – Is it correct to control the cache name by typing in the first line of my SW file? const CACHE = "pwabuilder-page_201908xxYYzzWW"; and be xxYYzzWW Variable for each new cache?

What am I doing wrong?

How do I avoid splitting the layout in a PWA project?

When you list the files that you want to cache with the Service Worker version, in most cases the style file is made available offline.

Changing the CSS may cause the application to suffer from the divergence and CSS of the "html / javascript" cache in production.

Even if you remove the CSS file from the cache list, this break may happen.

What solutions do you typically use in the PWA scenario or the best solution to avoid a layout change in a new PWA version?

For example, adding a query string if there is a high probability of break, and so on.