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

  • Ankush Aggarwal

    as you said, we can disable the plugins line. How would I use sqlite plugin or @ionic/storage? Do I need to include cordova.js for that?

    • Marouan Frih

      you can use ionic storage without sqlite for the web (you can use Storage when you’re on ‘ionic serve’, so yeah 🙂 )

  • João Vitor Paes de Barros

    The trouble with removing cordova.js is that some ionic plugins not work properly without it.
    There are some decision to be made about build a Ionic PWA, to use cordova (browser platform) and the plugins works or just not use cordova and some plugins don’t work.
    Maybe the plugins should work on web regardless of cordova? Or the ionic build system should always use cordova with platform browser?
    From my perspective, the plugins should work regardless of cordova. Even because of cordova principle was to be just a polyfill for the web.

  • https://www.facebook.com/app_scoped_user_id/705515260/ Nicolas Durand

    This is great news, and one of the reasons I picked Ionic (to have a single code base).

    However (and sorry if I missed it in your excellent blog post), when I run npm run ionic:build — –prod, it indeed compiles and creates files in the www folder, but when I open www/index.html, it is empty.

    How can I have my nice application (that is all under src/app, src/pages, etc) appear?
    My app is built on the Tutorial app, and specifies
    export const FirstRunPage = ‘HomePage’
    in /src/pages/pages.ts

    Any help would be greatly appreciated.

  • Mr.Floppy

    If I deploy my app in the way you just described, the cordova plugins don’t work, right?
    Does it makes sense to deploy the app as the browser plaftorm? Basically like this:
    ionic cordova platform add browser
    ionic cordova build browser –prod
    And then upload the folder [project]plaftormsbrowserwww
    If so, does the service worker work as well?
    Are there any traps I could run into? Or is there anything I have to consider by doing it this way?

  • Abu Nj

    what is the difference between PWA and electron app ?

    • Alberto

      An Electron app is a web app that behaves like a standard desktop app, with its own installer, own window, etc. Electron is a framework that encapsulates the web app and gives access to machine’s resources and APIs in Windows, Linux and Mac. You can think of it just like “a Cordova for desktop”.

      On the other hand a PWA is a Web App still accessed with the browser, with the P of Progressive meaning that it doesn’t matter the device (mobile or full desktop), the app adapts its layout and may or may not offer different features based on that. Also a PWA should be able to do some work offline using service workers. All of this allows us to deliver a great user experience: The user can start doing something quick in a smartphone and jump later to a laptop to continue with more time and features. Just to give an example.

  • Owa

    How will routing work in Ionic going forward?

    Routing is a major headache for PWAs built in ionic,

    Its difficult to implement things like AuthGuards etc, and it seems Ionic doesnt adapt Angulars routing

    • Ratikanta

      I do not have idea about AuthGuards but normally the Routing works fine as it is in cordova app.

  • http://www.artansoft.com/ Raul Torralba Adsuara

    I’m making some tests with a PWA with ionic, are there any component for AdSense or other advertisement system for PWA?

  • Samuel Faucher

    Thanks for the article, looking forward to build an PWA using Ionic

  • Cattaneo Pablo

    Hi! Great post! And thank you for doing of Ionic a great framework! I’m trying to create a PWA and a hybrid app width the same code, so after run npm run ionic:build — –prod I have the next issue:

    ionic-app-script task: “build”
    [09:39:43] Error: Type CategoriesPage in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts is part of the
    declarations of 2 modules: AppModule in
    /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and CategoriesPageModule in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts! Please
    consider moving CategoriesPage in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts to a higher module
    that imports AppModule in /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and
    CategoriesPageModule in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts. You can also
    create a new NgModule that exports and includes CategoriesPage in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts then import that
    NgModule in AppModule in /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and
    CategoriesPageModule in
    /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts.
    Error: Type CategoriesPage in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts is part of the declarations of 2 modules: AppModule in /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and CategoriesPageModule in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts! Please consider moving CategoriesPage in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts to a higher module that imports AppModule in /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and CategoriesPageModule in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts. You can also create a new NgModule that exports and includes CategoriesPage in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.ts then import that NgModule in AppModule in /home/pablo/projects/basic_login_and_logout_firebase/src/app/app.module.ts and CategoriesPageModule in /home/pablo/projects/basic_login_and_logout_firebase/src/pages/categories/categories.module.ts.
    at syntaxError (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34)
    at CompileMetadataResolver._addTypeToModule (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:14655:31)
    at /home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:14543:27
    at Array.forEach ()
    at CompileMetadataResolver.getNgModuleMetadata (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:14534:54)
    at addNgModule (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58)
    at /home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14
    at Array.forEach ()
    at _createNgModules (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26)
    at analyzeNgModules (/home/pablo/projects/basic_login_and_logout_firebase/node_modules/@angular/compiler/bundles/compiler.umd.js:22935:14)

    I get this error only when I run npm run ionic:build — –prod but not with ionic serve and that is what I don’t understand. I searched in the web and there are a couple of solutions that probably works but none of them explains why happen this problem so I’m afraid to implements this changes and then breake the app as hybrid app.

  • Terence O’Donoghue

    Apart from the scenario where the developer wants a single code base for mobile and web, what benefits does the developer get when using Ionic2 instead of just Angular4 for web?

    • Daniel Martin

      Platform specific UI components are one benefit

  • Rodrigo Rubio

    Guys? is there a way to check via a PWA if device supports “NFC”?

    Cheers, Rodrigo

  • Jose Vicente de Sousa

    I love ionic and angular

  • Alok

    Hi, Thanks for the above info but plugins that are running in App are not working as PWAs.

    Please explain how to use camera plugin & how to control the hardware back button in PWAs ?

  • Mauricio Silvestre

    The command: “npm run ionic:build — –prod”. not works . It was renamed?

    • Popoola Gafar Babatunde

      npm run ionic:build –prod

  • Connexion Swm

    Very good information and very useful, thank you