Can I host a PWA on Ionic Appflow?

Appflow
1

To add PWA capabilities to your Ionic App should be quite easy…
Maybe this is a stupid question…but to be able to deploy my app as a PWA:
can I use Ionic Hub?

or do I need to go through Firebase??

Thanks,Csaba

2

I have no idea what “Ionic Hub” is, but no you don’t have to use Firebase. You can host PWAs built using Ionic with any hosting environment and/or httpd you choose.

1 Like
3

Thank you!
Browser Title says “Ionic Hub” for the https://dashboard.ionicframework.com/

Thank you!

4

I have executed in my project the following comman:
ng add @angular/pwa
this one also created:

  • ngsw-config.json
  • manifest.json

Then I upload my project to Ionic Dashboard, where I do build and the put it into the production.
Sure for sure, I also set in the environment.ts production: true

So my app is ready, deployed contains the two files (also package.json updtad) and the lighthouse analysis says still that this application is not PWA.
"Does not register a service worker that controls page and start_url"
-not true, as in manifest.json it is there!

" Web app manifest does not meet the installability requirements"

Failures: No manifest was fetched.

Hmmmmmm … :confused:

5

Somebody else is going to have to help you there. I only use the Ionic Framework itself, not any of its other services. The point of my previous post was to say that you can follow the Angular PWA deployment documentation, or in fact any other “how to deploy an Angular PWA on blahblahhttpd” or “how to deploy an Angular PWA on ubercoolhosting.com” documentation you find on the Internet.

The fact that your PWA uses Ionic Framework doesn’t have to impact how you deploy it at all.

1 Like
6

A PWA can be hosted wherever you want. Firebase is an option but there are others.
A PWA has some requirements (manifests, service workers, etc), so you maybe could read search for tutorials about it, read the pwa guide that can be found on ionic web site
The firebase cli tool will automatically generate all of this for you, i beleive.

7

[Ionic Hub is essentially Ionic Appflow]

Currently, Appflow doesn’t offer web/PWA hosting. As others mentioned, check out Firebase, Vercel, Netlify, etc. They are all great options. The Ionic team hosts a bunch of our sites on Vercel and we really like it.

For making your app a PWA, check out each Framework section in the Ionic docs. Here’s Angular’s. As you mentioned, you use the Angular CLI to add the @angular/pwa package. It should implement the basics for you - no more configuration necessary to have lighthouse recognize it as a PWA. So, not sure why it isn’t.

What host did you pick? If you’re pointing to a Web Preview from Appflow, that won’t work.

1 Like
8

Thank you for your message.
I choosed Firebase and it works fine…

  1. ionic build --prod
  2. firebase deploy

BUT:
between step 1 and to the following steps should be done:
rename manifest.json to manifest.webmanifest
+
cp manifest.webmanifest www/ (this is the build directory) and then PWA features are there :slight_smile:

1 Like