Signup for the Ionic Newsletter to get the latest news and updates!

  • https://troydcthompson.com Troy DC Thompson

    Awesome Post! Only thing not mentioned here that I have on my pwa at https://tdct.io is a tutorial with scalable vector graphics (SVG) to ensure users get crisp images on any device.

  • http://lifestylebusinesstransformation.com/ Simon Grimm

    Ionic 1 was not really ready for web, but Ionic 2+ gives so much flexibility to build a highly custom UI for browser/tablet/phone size. The development is amazing, and you build a super cool looking website + PWA + App with that 🙂

    Thanks for sharing your grid tips, will definitely use them soon!

    • https://Savelist.co Rodrigo Fernández

      I’m glad you found the tricks useful!

  • Generic Comment

    At the moment I’ve been giving the ion-app a max width and margin 0 auto, because I couldn’t find a decent way of making the toolbars’ content align with fixed grids.

    Also
    @media (min-width: map-get($grid-breakpoints, lg)) {} is a great trick.

    Thank you for these tips and tricks!

    I think most of these should be the default in Ionic.

    • https://Savelist.co Rodrigo Fernández

      The only gotcha with using `ion-app { margin: 0 auto }` is that the headers and footers wouldn’t go side to side of the screen, they will show cut on the sides. This is a personal preference, but I think it looks better when they use 100% of width but the content is centered.

      • Generic Comment

        Absolutely. Your method is way better.

  • https://www.hackster.io/gusgonnet Gustavo

    Your blog post helped me understand the extra considerations for desktop.
    Thank you!

  • Ray Lawlor

    I’m hoping this isn’t a stupid question…

    Is there any way to use Ionic without the UI layer and switch to a common front end framework like Bootstrap or UIkit? That way we could use Ionic router etc but design a frontend with common frameworks?

    Or is it better to switch to straight Angular if we wanted to use these?

    • Masood Usmani

      You’ll just need to use an ion-nav component for the router and animations to work, but you don’t have to use any ionic UI components if you don’t want to. I think the vendor bundle will still include the ionic UI components even if you don’t use them though.

      Whether this is better than using angular is upto whether you really want to use Ionic’s routing and transitions, and if you’re fine with a larger bundle size.

    • https://Savelist.co Rodrigo Fernández

      It looks that you want to use Ionic without Angular. If that’s the case, I would wait for Ionic v4 to be released and use the new `ionic-core` Web Components for routing. Then you would be able to use any component you want with jQuery, React, Vue or nothing at all.

    • Gustav Bylund

      If you only want the Ionic router, I would definitely not do that. Just use the Angular router instead, it’s better than the Ionic router anyway, and Angular CLI is also really nice. From what I’ve heard, Ionic v4 will use Angular CLI regardless.

  • RhysC

    This is awesome!

  • Daniel Griffin

    Any way to change the tabsPlacement/tabsLayout dynamically? Setting the properties while in an observable/hostlistener and changing the screen width doesn’t update the UI

    • https://Savelist.co Rodrigo Fernández

      In my example the tabs placement and layout are changed dynamically when the component is created, so I’m guessing you’re asking about changing them afterwards.

      I’m not sure if it would work for your use case, but whenever I need to show/hide headers and footers after initialization, I get a reference to the “ as a property with `@ViewChild(Content) content: Content` and then run `this.content.resize()` to update. It should help you to recalculate the paddings of the content after the tabs have moved. It’s documented here: https://ionicframework.com/docs/api/components/content/Content/#resize

  • Aman

    Hi Rodrigo,
    Thanks for sharing the useful information. I’m wondering how you managed the navigation. I mean If I copy a link say `https://savelist.co/explore/post/5a8daca997a70a28ea00b4c4` and paste in new window, It opens the same item with the navigation history back to tabs. I’m curious how you implemented that functionality.

    • https://Savelist.co Rodrigo Fernández

      Hi Aman, thats a good question!

      We used the `defaultHistory` property of the `IonicPage` decorator, so the back button is shown and the user is able to go back from a deeplink: https://ionicframework.com/docs/api/navigation/IonicPage/#default-history

      Honestly, getting the navigation and deeplinks right was the hardest part but since every app has its own needs I decided not to cover it in this post.

      I hope it helps!

      • Aman

        Thanks for the answer.
        When I was reading your post, It was the first question that hit me. One more question, did you add the browser platform also or you just build it as a pwa. I’m confused about how you managed the browser vs mobile functionality.

        • https://Savelist.co Rodrigo Fernández

          You mean if I added the `browser` Cordova platform? No, I just do `ionic build –prod` to generate the PWA in the `www` folder without running any of the Cordova build steps. Then I just upload the contents of this folder to our web servers.

          As for the native functionality, we have built platform-independent functions that once called they check for `platform.is(‘cordova’)` and uses the native plugin if true or a web fallback if false, which we wrote ourselves using standard web APIs.

          • Aman

            Thanks for sharing.
            🙂

  • Paul

    Great article! I looked at savelist.co and found out that in the url is never the ‘#’. So my question: How did you get removed the ‘#’ from the URL?

  • Daniel Marc Ehrhardt

    Hi,
    thank you for this good tips!!
    How exactly did you removed the hashbang in your url?

    IonicModule.forRoot(MyApp, {
    locationStrategy: ‘path’
    }),
    did the trick for me but then ionic serve is not working anmyore

    Thanks,
    Daniel

    • Ivano

      in app.module.ts

      import { LocationStrategy, PathLocationStrategy } from ‘@angular/common’;

      providers: [

      { provide: LocationStrategy, useClass: PathLocationStrategy },

      ]

  • Remi Sture

    Anyone else getting this error?

    “[10:43:26] sass: src/theme/variables.scss, line: 89
    Undefined variable: “$grid-breakpoints”.

    L89: @media (min-width: map-get($grid-breakpoints, lg)) {“

  • sharedOne

    Thank you for this, it was really helpful to get started with PWA for Ionic, and nice website / app by the way. I just have one question, I noticed your answer about the routing that you used ‘deeplink’ but is there any other tutorial, or information you might have used to get it to work? I find it pretty hard to understand what I have to do. 🙂 Thank you!

  • Erin Sen

    I do not think that people would need that much of help about the desktop sector in recent days as they can use these side perfectly as there has google for it.

  • Carlos Henrique Fructuoso de M

    Great work, thank you for your sharing!

  • http://indizine.com Indizine

    This is Useful. Thanks for sharing!

  • moreirapontocom

    Very useful. Thank you for sharing.