Building for browsers - PWA


Hey guys!

I am looking for tips and tricks on how to build a PWA. There are a few blocking points and I don’t know how to deal with them at present. What’s your approach on the following things?

  • Proper content size so things adjusts to different screen sizes? Do you have a bootstrap style approach with ionic grid?

  • How do you deal with modals, alerts?

  • When you use the cordova camera plugin, how do you adapt it for picking files from computer instead of gallery?

  • Service workers?!?

What are your best practises? Can you share any good links and tutorials?


I’ll try to keep this thread alive and edit the second post and paste all the good/interesting answers in here.
It’s game time Ionites! Let’s become PWA experts =)


Quickstarter for your first PWA site including a small hackish approach for your content to keep looking great.

1) Initial Commands
Creating an ionic app from a tab starter
ionic start TesTPWATabs tabs --v2

From project root, adding support for browser
ionic platform add browser

Running your PWA site
ionic run browser
Your site is contained in the /www folder. This is the folder you’ll need to deploy (Step 3)

2) Hackish approach - Setting max-width to 600 pixels when in browsers
In app.component.ts, in the constructor

  isDesktop: boolean = false;
  constructor(platform: Platform) {

    //Check if running on desktop
      if ('core')) {
        // This will only print when on desktop
        console.log("I'm in a desktop!");
        this.isDesktop = true;

In app.html, adding conditional css

<ion-nav [ngClass]="{'ionic-container': isDesktop }" [root]="rootPage"></ion-nav>

In app.scss

ion-app, ion-nav, ion-tab, ion-tabs, .app-root {

    right: 0;  //.app-root by default is set to position:absolute; top:0; left:0;
    margin: 0 auto;  //in order to center the content

    //Colour gradients for the sides
    //fallback for old browsers
    background: #4688FC;
    //Chrome 10-25, Safari 5.1-6
    background: -webkit-linear-gradient(#4688FC, #C7DAFF);
    //W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari
    background: linear-gradient(#4688FC, #C7DAFF);

//This class will only be used for desktops browsers
.ionic-container {
    max-width: 600px;

3) Deploy your site
This is a great guide I have used to deploy on firebase:

If you have a link to a another guide to easily deploy on AWS, ionic cloud or any other hosting service, feel free to share it and I’ll insert it in the post.

Deploying PWA

Hey, how is it going with Firebase as a host? People use to recommend Heroku.


I decided to try with Firebase’s hosting, but I’m stuck where you need to select a project when enter firebase use --add or firebase use, as said on the guide you posted. Only angular projects appear, none of my ionic does.

Any recommendations?


Where do you see theses commands?

I did the following commands:

firebase login
firebase init
firebase deploy

I just followed exactly what it said for the angular app while configuring the file with firebase init


That was not the question.

I already pass all those steps. But when you enter firebase use --add you have projects to select. I thought it was Ionic projects, but they are firebase database projects.


I don’t understand this command. Where did you see it and what does it do?
I just do firebase deploy and the site is uploaded.

You need to use all the 3 commands in your ionic project so there is never a need to choose an ionic project.

  • Your ionic project is linked to your firebase account with firebase login
  • Your ionic project is linked to your firebase project with firebase init
  • firebase deploy deploys your www/ built files to your firebase project


What happens is that I have multiple Firebase projects so, to me, there was an extra step. I had to link the web page to one of my projects. Everything is working though.

Thanks for your time.


Thanks, this was really useful as a first step. :slight_smile:


I tried to do the same thing!

Could you share how you find where to know these css property should be changed?

I tried to make a center fix width page in browser in ionic v1 by:

// in index.html

<div class="container">

// in CSS

container {
  max-width: 600px;
  margin: 0 auto;  

but this doesn’t work in ionic v2, how do you know these classes ( ion-app, ion-nav, ion-tab, ion-tabs, .app-root ) should be modified??


Hi all,

I followed DeeM52 “tutorial” and all steps was ok, i got my firebase URL, but when i try it in a browser i get this message :

And the link redirect me on the official documentation…What is the next step ?

EDIT : I found my error, my www directory path was wrong. You need to set platforms/browser/www as main directory


Im using firebase hosting for my PWA and its soooooooooooooooo easy.

Just make this commands:

ionic cordova build --prod
firebase login
firebase init
firebase deploy

and just choose the www folder from the build on the firebase.json:

  "hosting": {
    "public": "www",
    "rewrites": [
        "source": "**",
        "destination": "/index.html"

With this when you run deploy firebase will deploy just the www folder generated from ionic build :wink: :wink: