What are some popular PWAs built using Ionic?

gauz09 · March 23, 2018, 8:02pm

Just out of curiosity, does anyone know some good PWAs built using Ionic 2/3?

Are any major companies/brands building PWA using Ionic?

AaronSterling · March 23, 2018, 8:35pm

I don’t think there are any yet. I’d love to be wrong about this, but I think so far there are just some interesting projects. The app scene is a lot different, with some very commercially successful apps written in Ionic. But the desktop world is not well served yet. Here’s hoping Ionic 4 solves a lot of those issues. Moving to Angular routing is huge for desktop programming.

nylex · March 24, 2018, 2:16am

So what is actually the difference between react pwa and ionic pwa. I guess ionic pwa can be used for mobile app natively because of capacitor. What about react pwa? Can it be used with react native? I need more info on what’s the benefit of going with ionic pwa vs react pwa. Any comments would be appreciated

robinyo · March 26, 2018, 2:39am

I think the biggest challenge for PWA’s is iOS support: https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea

Ionic 3 PWA -> Brew - The Craft Beer App: https://craftbeer.org.au/

gauz09 · March 28, 2018, 8:16pm

So it appears Ionic PWAs are not yet there for real PWA workings.

But, can I deploy the Ionic app (the www folder, guess it will still be called PWA) and use it as a regular website? Of course, I will probably need to have altogether a new set of CSS to give it a website look and feel. At least, I will not need to write completely new code for my website UI. That is, use the HTML, TypeScript, Angular code.

Correct? Can I do that?

Thanks.

robinyo · March 28, 2018, 9:03pm

You can build PWAs using Ionic 3 right now, you just need to follow a few simple steps.

See:

Yes you can, I use Google Hosting and FIrestore (angularfire2/firestore):

npm run build --prod
firebase deploy

gauz09 · March 28, 2018, 9:33pm

@robinyo, thanks!

Awesome!!

By any chance, do you know of such websites that are being used as hybrid apps on mobile devices as well regular/pure websites?

It would be great to have such a list.

I am great fan of Ionic (don’t have the whole knowledge though ). It’s sometimes hard to convenience people to go with Ionic for mobile apps (hybrid) and use the codebase for regular website usage even if PWA is not matured yet. This way at least 75-80% of the code can be reused.

Thanks again for inputs, appreciated!

jaydz · March 28, 2018, 9:44pm

Do you happen to know if Google hosting handles angular routing well? AWS does not which is a dealbreaker for me. I’m looking to host elsewhere

robinyo · March 28, 2018, 10:17pm

@gauz09

See: https://ionicframework.com/startups

robinyo · March 28, 2018, 10:33pm

You might also like (Hacker News readers as Progressive Web Apps): https://hnpwa.com/

bandito · March 29, 2018, 12:00am

it can’t? Are you sure? I dodge a bullet there using Heroku lol

jaydz · March 29, 2018, 12:02am

Nope. There’s an option to set up Routing Links or something of the sort but it’s obscure and unintuitive. Angular Routing is essentailly useless.

bandito · March 29, 2018, 12:03am

wow. Ionic works great on Azure though.

gauz09 · March 29, 2018, 1:14am

@jaydz - Sorry to repeat the question @bandito asked , but are you sure? Can you elaborate a bit on what exactly happens when you deploy Angular project (with routes) on AWS EC2 or EB? Can you point to some specific discussion on this?

I got interested because at my current client we are planning to develop a website in Angular and deploy on EC2 or EB. Thanks.

gauz09 · March 29, 2018, 1:15am

@robinyo - this is cool! Thanks for providing those links!

jaydz · March 29, 2018, 1:59am

Hey @gauz09. I used AWS but didn’t end up using EC2 or EB. I was using S3 and Route 53 if I remember correctly. It may be that other options are compatible with Angular Routing, but I Googled the subject pretty extensively and had no luck finding anything other than ‘You’re out of luck’.

Anytime I opened my website, whatever ‘route’ it tried to open to failed, and a warning was all I got. Something along the line of “the key ‘/my_route’ is not defined” etc…

Here’s an example of AWS’ routing configuration that is meant to replace / compliment angular routing, e.g make it work

Edit Redirection Rules section of the S3 Console for your domain, add the following rules:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

That’s just something I found with a quick google search.
Google AWS Angular Routing and stuff will pop up

jaydz · March 29, 2018, 4:37am

Azure is Microsoft .net / IIS based, is that correct?
And Heroku is on top of my list. AWS also didn’t seem to have a simple solution for implementing a MEAN stack, and I hear Heroku is good for that sort of thing

Yuyinitos · March 30, 2018, 12:22pm

http://app.wieneschrijft.nl

reedrichards · March 30, 2018, 12:29pm

According https://ionicframework.com/pwa

Starbucks, Pinterest, Uber, Twitter, Forbes

EvanW · March 30, 2018, 1:28pm

If you look carefully those are companies that are using PWAs and having positive results, but it never explicitly states that Ionic is used for the PWA. I doubt that any of those companies are using Ionic, but they still prove the usefulness of the technology.