topic Re: Does or will Hubspot CMS support Progressive Web Apps (PWA)? in CMS Development

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

JohnLaprairie — Tue, 27 Oct 2020 17:22:51 GMT

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.

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

dennisedson — Wed, 28 Oct 2020 19:40:28 GMT

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?

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

JohnLaprairie — Thu, 29 Oct 2020 18:00:27 GMT

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

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

GregSamsa — Tue, 31 May 2022 08:31:03 GMT

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.

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

amadhiya — Thu, 25 Aug 2022 07:52:50 GMT

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

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

GregSamsa — Thu, 25 Aug 2022 08:44:09 GMT

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.

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

Susino — Thu, 22 Feb 2024 12:20:34 GMT

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?

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

GregSamsa — Thu, 22 Feb 2024 12:46:58 GMT

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.

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

Susino — Thu, 22 Feb 2024 13:47:33 GMT

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?

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

GregSamsa — Thu, 22 Feb 2024 14:28:35 GMT

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

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

Susino — Thu, 22 Feb 2024 16:23:15 GMT

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/andWeekly-THEME/js/main.js

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/andWeekly-THEME/js/main.js');
}

What is wrong? Could you take a look?

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

GregSamsa — Fri, 23 Feb 2024 07:11:28 GMT

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.

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

Susino — Fri, 23 Feb 2024 08:27:01 GMT

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.

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

GregSamsa — Fri, 23 Feb 2024 09:02:42 GMT

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.

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

Susino — Fri, 23 Feb 2024 11:01:18 GMT

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

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

GregSamsa — Fri, 23 Feb 2024 12:11:45 GMT

I created the redirect with the proxy setting like this:

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

Susino — Tue, 27 Feb 2024 11:01:17 GMT

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

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

GregSamsa — Tue, 27 Feb 2024 11:06:54 GMT

Great news! Good luck!