Quick Summary: We created a Progressive Web AMP (PWAMP) using Meteor. Very fast first delivery + rich and engaging app features
Previously, I have posted how we made the first load of our web app fast on this topic: Fast initial load of dynamic pages with Meteor and React
But the public pagespeed / lighthouse score is still lower than the 90+ goal that we have. After a few research, I realized that AMP has the capability to warm up a service worker in the background to launch a PWA. So basically, we created an AMP version for all dynamic public pages that we have that can be cached by Google. Prior to the caching, we are already hitting 80+ (90+ on some) on all pages in the public PageSpeed site. I think it will hit 90+ in all pages once cached by Google.
To create AMP, we did the following:
Inline all critical CSS using the technique already mentioned here: Fast initial load of dynamic pages with Meteor and React
We are lazy loading most of our images so we just changed it to use
<amp-img>tags when in AMP mode
Hide all functionality not required in AMP or link them to the corresponding functionality in PWA. This includes removing the CSS and JS bundle generated by Meteor.
Catch the HTML output of Meteor and convert them to AMP by passing it through the AMP optimizer which adds all the necessary boilerplate required for AMP. Depending on the AMP features used, it also automatically adds the required packages (I don’t even know what those packages are until now )
AMP to PWA
Our PWA has an existing service worker using WorkBox (so easy to use)
To warm up the PWA during the first access of the AMP page, there is a need to do precaching also through workbox
meteor buildour build script updates the service worker to include the generated CSS and JS bundles in the precached urls for #2
In all AMP pages, we include the amp-install-serviceworker that warms up the service worker, which in turn precaches the css and js bundles, which in effect preloads the PWA in the background. Any action on the AMP page loads the PWA
Example cached AMP page: