CMS Development

JohnLaprairie
Participant | Gold Partner
Participant | Gold Partner

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

SOLVE

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.

1 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

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

SOLVE

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?

 

 

View solution in original post

17 Replies 17
JohnLaprairie
Participant | Gold Partner
Participant | Gold Partner

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

SOLVE

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

0 Upvotes
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

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

SOLVE

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
Member

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

SOLVE

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?

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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.

0 Upvotes
Susino
Member

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

SOLVE

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? 

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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

 

0 Upvotes
Susino
Member

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

SOLVE

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? 





0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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.

0 Upvotes
Susino
Member

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

SOLVE

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.

Susino_0-1708676758495.png

Susino_1-1708676776822.png

 

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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.

0 Upvotes
Susino
Member

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

SOLVE

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 

Susino_0-1708686039602.png

 

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

I  created the redirect with the proxy setting like this:

GregSamsa_0-1708690271766.png

 

0 Upvotes
Susino
Member

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

SOLVE

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

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

Great news! Good luck!

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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
Participant

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

SOLVE

@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. 

0 Upvotes
GregSamsa
Contributor | Platinum Partner
Contributor | Platinum Partner

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

SOLVE

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.

 

0 Upvotes