Building for browsers - PWA

Ionic Framework ionic-v3
1

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?

2

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 =)

3

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 (platform.is('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.

5

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

6

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?

7

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

8

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.

9

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
10

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.

11

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

12

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">
  <ion-nav-view></ion-nav-view>
</div>

// 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??

13

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 :

image

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

14

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: