L Last updated on 22/01/20 I Ionic PWA P Progressive Web Apps

Install node.js and after that use npm install command to install required dependecies to build PWA in Ionic:

            npm install -g ionic cordova firebase-tools
        

Create a new Ionic project using CLI. "gadu-gadu" replace with your own app name.

                ionic start gadu-gadu
            

Enhance your app. Use custom UI components from Ionic and create your amazing application. Add template using io-tags, create functions in TypeScript and css rules to style your project.

A small tip: If you're beginner in Ionic UI use Ionic creator. Creator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse. If you want to use this tool just register on this page. Create a prototype of your app easily and export code to your local project.

Log in firebase and create new project in firebase console. If you don't have and account, register.

Log to firebase locally using command line:

                firebase login
            

Build ionic project:

                ionic build --prod
            

Init firebase project locally. Set proper project name, function: hosting and directory with bundle created during building process.

                firebase init
            

A default Ionic project contains Web Manifest. You need to replace existing json with your own - describing your app. Don't forget to uncomment line with link to app.webmanifest in index.html file.

Define app properties inside app.webmanifest file. You can use Web Manifest Generator from pwafire.org. You need to complete form, copy generated json and replace existing app.webmanifest code with this one json.

Tip: Use Image Generator and convert any image to app icons. Use generated icons and json file with icons paths inside your project.

A default Ionic project contains Service Worker file and code for Service Worker registration. You can uncomment these lines in index.html and use ready service-worker.js file or customize it on your own:

                 <script> 
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    } 
  </script>
  

To learn more about service workers, read more on this documentation

Build current version of the app and deploy it via firebase:

                ionic build --prod
firebase deploy
            

After successful deployment run your app in a browser using url displayed in CLI.

Test your PWA in a browser. Run audit tests using Lighthouse. Open tools for Developers in Chrome, select tab 'Audit' and check Progressive Web App option. Run test and check the results. If you have less than 100% check details of your issues and get Google tips.

Make any changes if you need, rebuild your app and deploy once again.

Authored by Marta Wiśniewska