Does or will Hubspot CMS support Progressive Web Apps (PWA)?

[JohnLaprairie]

Hello,

We are looking at some Google speed suggestions and for mobile users they recommend PWAs. There are pros and cons to this of course in terms of presenting updated information to mobile users but I don't want to get into that conversation.

Does the Hubspot CMS allow any automation of this? 

Mozilla.org has a tutorial on this here but at the moment I am not sure I can do it with a Hubspot site due to the service worker requirement.

Any help or comments appreciated. Thank you in advance.

[JohnLaprairie]

Thank you for the tip. If I get it set up myself, I will add that information to this post. 

[dennisedson · Accepted solution]

Hey @JohnLaprairie !

Great question regarding PWAs!  I do not believe the service worker placement should be an issue now as you can employ the proxy feature in the URL redirects settings. 

I believe @JAbella was working on this a while back.  I wonder if she had any luck setting one up and maybe have a little insight?

[Susino]

Installing a worker is not impossible, but can files be added to the cache? Generally, one should provide index.html, index.css, index.js, and this way the page can be launched without the internet. However, in HubSpot, it's not clear how to specify such a file because there seems to be no way to do so. Am I correct in understanding that it's not possible to run a page offline on HubSpot?

[GregSamsa]

Files can be added to cache and pwas can be used offline under HubSpot. You can set up what files to cache in the serviceworker.

[Susino]

Please tell me please how to add the index.html of the page to the cache. HubSpot Support said that this is not possible. Could you help me to do that? 

[GregSamsa]

I created a "HTML + HUBL" html file in the designer. I then created a normal site page using the html file as template. This page has this address: https://www.wieslab.se 

I then added this file to the service worker among the other files (images, js, css etc) like this:

const filesToCache = [
  '/hubfs/wieslab-app/svar-wieslab-logo.svg',
  '/hubfs/wieslab-app/vial-140.svg',
  '/hubfs/wieslab-app/vial-bl.svg',
  '/hubfs/wieslab-app/language.svg',
  '/hubfs/wieslab-app/home-140.svg',
  '/hubfs/wieslab-app/home-bl.svg',
  '/hubfs/wieslab-app/thermo-140.svg',
  '/hubfs/wieslab-app/thermo-bl.svg',
  '/hubfs/wieslab-app/info-140.svg',
  '/hubfs/wieslab-app/info-bl.svg',
  '/hubfs/wieslab-app/contact-140.svg',
  '/hubfs/wieslab-app/contact-bl.svg',
  '/hubfs/wieslab-app/arrow.svg',
  '/hubfs/wieslab-app/arrow-white.svg',
  'https://www.wieslab.se',
  '/hubfs/wieslab-app/tiny-slider-2.9.4/tiny-slider.js',
  '/hubfs/wieslab-app/tiny-slider-2.9.4/tiny-slider.css',
  '/hubfs/wieslab-app/pdf-js-2.14.305/build/pdf.js',
  '/hubfs/wieslab-app/pdf-js-2.14.305/build/pdf.worker.js'
];

The entire service worker file can be found here: https://2441243.fs1.hubspotusercontent-na1.net/hubfs/2441243/wieslab-app/serviceworker-app.js

[Susino]

Thanks for your example! I see that this page working offline. However, I totally don't know why it's not working for me... I'm already sitting 8 hours to check that...

Could you take a look with your expert eye?

https://www.andweekly.com/hs-fs/hub/3943149/hub_generated/template_assets/156882212757/1708617172217...

this is main.js with your code, a bit changed to mine.

This is page where I'm testing it

https://www.andweekly.com/test132443-0

This is registration code

if(navigator.serviceWorker) {
navigator.serviceWorker.register('https://www.andweekly.com/hs-fs/hub/3943149/hub_generated/template_assets/156882212757/1708617172217...');
}


What is wrong? Could you take a look? 

[GregSamsa]

I checked your page in Lighthouse (Chrome), and it says that no manifest file was fetched. I believe you have to add a manifest file to make your app installable and work offline.

[Susino]

Hi!

I added the manifest file, but nothing new. 

Is it possible that it doesn't work because of sw.js URL?

if(navigator.serviceWorker) {
navigator.serviceWorker.register('https://www.andweekly.com/hubfs/Test%20Dev/sw_hub_test-1.js');
}

your navigator.serviceWorker.register('https://www.wieslab.se/serviceworker.js);

I have hubfs/test-dev in the URL name.

[GregSamsa]

Your pwa page is https://www.andweekly.com/test132443-0 but you are caching the site main page (https://www.andweekly.com). The app is installable now but shows the main page and doesn't work offline.

I think you need to have the sw file point to https://www.andweekly.com/test132443-0 instead. In my case, the pwa is just a single page located at the top level of the domain.

[Susino]

Hey Greg, thank you for all of your responses, I appreciate it! 

I found the problem. I need to place serviceworker.js right after the domain andweekly.com/serviceworker.js but the problem is that when I keep files on the HubSpot, HubSpot add /hubfs/ between the domain and a file. 

My last question to you is - how do you place serviceworker.js right after the domain? Outside HubSpot? I can't do it. I've tried to redirect but I received an error 

[GregSamsa]

I  created the redirect with the proxy setting like this:

[Susino]

Thank you! It worked. The main problem was all the time with sw.js file destination.

[GregSamsa]

Great news! Good luck!

[GregSamsa]

I know it's an old post but if someone sees this in the future I can confirm that PWAs work in HubSpot using the proxy feature described by Dennis.

[amadhiya]

@GregSamsa did this PWA work for you? I can try to implement this in HubSpot CMS if anybody has guidelines on how this can be done on the general website.  or any other CMS website. 

[GregSamsa]

Yes! I created a folder in "Files" where I put the service worker, manifest, images etc. I then created a URL redirect to the service worker with the proxy setting to get the scope right.

The finished page is here: https://www.wieslab.se

Let me know if you have any specific questions.