Building your first PWA: Preparation

person carlosrojasofolder_opencrashcourselocal_offer, , , access_time July 22, 2017

Hello Startuper!!

Progressive Web Apps have some basic stuff that makes detectable as an App to modern browsers. these are:

  1. HTML,CSS and JS App.
  2. Service Worker.
  3. Manifest.

To handle easily with this we going to use Ionic an awesome framework build in top of Angular with a lot of components and ready for PWA.

Installing Ionic.

Ionic CLI is installed on top of Node and Ionic is Built on top of Cordova, so you gonna need Download and Install a recent version of Node from here.

Once you have Node.js installed, you will be able to access the node package manager or npm through your command terminal.

$ npm install -g ionic@latest cordova@latest

Maybe you can need sudo in order to install globally

 

Now, we going to start our new App. type in the terminal CLI.

$ ionic start myFirstApp

Later, we need move to our project folder.

$ cd myFirstApp

From now on, whenever you are going to type something in the CLI it’s gonna be in this location.

In this point, we going to start our new App. type in the terminal CLI.

$ ionic serve

You have to see something like this in your browser:

If you see that screen you are very good 🙂 gratz.

Visualizing in Chrome

Now, I personally use Chrome Dev Tools to work in my projects.

To use this from your Browser you need Click-Right Button in your Mouse. And select “Inspect”.

Press in the 3 points in the corner and select “Dock to right”.

and later, press in the small device image.

Now you can see something like this:

Perfect!! now, we are almost ready.

Additionally, you need and editor. you can find good options here.

I’m using Visual Studio Code.

Then, when you choose your editor you going to need open the project there:

Cool, What next?

Well, we going to create an app that have these features:

  • You can read news from a Feed (RSS).
  • You can register users.
  • You can Authenticate users.
  • Your users can reset password.

Ok, that’s all for now. but meanwhile, you can read the next links 🙂

Resources.

What are RSS feeds?

Angular 2 Series

Ionic Cloud Services

Keep coding…

@carlosrojas_o

Liked it? Take a second to support carlosrojaso on Patreon!