General explanations about Progressive Web Apps and how to start developing progressive apps using the Ionic 2 framework.
PWAs, Progressive Web Apps or progressive applications are an early trend that shows us where Web development is evolving. Therefore it is important to take an interest in this technology and spend a little time to start learning a little more about it.
In this article we are going to use the Ionic framework, in its second version, which is already prepared to support the development of PWAs, as well as applications for devices as traditionally. You will see that everything is very automatic, since the tools that exist around Ionic allow us to do almost all the operations for the development of the necessary components for a Progressive Web App. That being said, let’s begin…
What is a Progressive Web App?
Progressive Web Apps are the intersection between the ease of the Web and the user experience of the Apps. They have several features like:
- Progressive: Works for all users.
- Adaptable: Its functionality adapts to the device regardless of whether it is Mobile, Desktop, Tablet, etc.
- Connectivity independent: Supports offline features in addition to low-quality or LiFi connections.
- App style: For the user, a PWA is similar to an App, one of those that could be downloaded from a store.
- Fresh: Thanks to caching strategies, it can be kept updated every time a connection is available.
- Secure: Works over HTTPS.
- Discoverable: Search engines are capable of indexing the PWA, and will detect it as an App.
- Subsequent Actions: It will allow Push Notification after the user has installed it, similar to the Apps you download from a store.
- Installable: Allows users to have the App available on their device with an access icon like the Apps you download from a store.
- Linkable: It can be easily shared with a URL.
If you don’t know what progressive applications are, or you want to find various examples, we recommend you explore the address with your mobile.
What should a PWA have?
Progressive apps are like a website in a general way. That is, they will have a normal structure of a WebApp or SPA (Single Page Application), with an index and HTML, CSS and JS files. But also, to be considered a Progressive Web App, it must have 3 additional things:
- A manifest file. A file which describes the information of your PWA.
- An App icon. An image that will be used to be the icon on mobile devices when installed.
- Service Workers. It is a Javascript file that is registered in the browser and is what will allow caching and push notification tasks, among others.
Building our App
To make our first App we are going to have to install the Ionic Framework.
1.- Install NodeJS.
Note: It is simply an installer, or add it from the official repositories on Linux. But if you have no idea, please check the .
2.- From your terminal:
npm install -g cordova ionic
Once Ionic is installed, from your terminal run:
ionic start myApp
The Ionic CLI will ask you which App you want to create, select “Conference”
Locate yourself in the project.
cd myApp
3.- Open the file src/index.html with your editor.
Look in this file for this piece of code and uncomment it.
/* * if (‘serviceWorker’ in navigator) { * navigator.serviceWorker.register(‘service-worker.js’) * .then(() => console.log(‘service worker installed’)) * .catch( err => console.log(‘Error’, err)); * } */
4.- Install sw-toolbox.
The sw-toolbox library is a set of helpers that allow you to create your own service workers automatically. Basically, instead of programming you will have to configure. However, it will be the Ionic CLI that takes care of everything.
npm install –save sw-toolbox
5.- Serve your application from the browser
To do this, from the terminal, you will execute the specific CLI command that performs the task of starting the server and starting the project.
ionic serve
Now you will see your App, running in the browser.
6.- Make the build
Finally run.
ionic build –prod Note: If you feel lost with Ionic we recommend you read the one published in , which will explain step by step the basic things you need to know to get started with Ionic.
What happened?
The short version is that Ionic creates the Icon, Manifest, and Service Worker for you. You can see them at:
- assets/img/appicon.png
- src/manifest.json
- src/service-worker.js
How do I know if it works?
For this we will use two tools:
-
It is the inspector available in the browser to view hundreds of information related to the web that is being accessed. If you are a developer you should know what we are talking about. -
It is a browser extension, also usable as a web service, in which, through a URL, certain tests are executed against a web page to find out its status, the things that are good and those that should be improved.
Next we explain how to manage these plugins for our purpose of getting more information about the Progressive App that we have built using Ionic.
Publishing my App
In order to see our App fully working we must be on https:// as we said before.
To easily publish my App I will use the Firebase Hosting service, which allows me to send all the PWA files to a free hosting space, using a few simple console commands. To do this you will follow these steps:
1.- Install Firebase CLI.
npm install -g firebase-tools
2.- Create a Project in the Firebase Console.
You do this part from the Firebase website itself, through the control panel that they offer for the administration of the applications. You only need a Google account to use Firebase and it is quite intuitive.
Note: Firebase is an excellent cloud service, provided by Google, designed to greatly facilitate the development of web applications, devices and even general purpose. If you have any questions you can consult the .
3.- Link the CLI with your account.
Again, from the terminal, we achieve this by running CLI commands (firebase-tools) that we installed in a previous step.
firebase login
4.- Link your project with Firebase.
We do this step with a Firebase CLI wizard, in which we have to answer some questions. The wizard is launched with the command:
firebase init
In the wizard choose the “Hosting” option and when it asks you for the folder choose “www”
You can leave the rest of the questions to the values that it offers you by default.
5. Send the project to Firebase.
In this step, we are finally going to send the files from the web to the Firebase hosting. Files from the “www” folder, set as the publish root, will be sent. You do it with a new CLI command.
firebase deploy
Clever. You should already have a Firebase-generated URL and you can publicly access it in the PWA we just produced.
Note: If you later have to make changes in the application and send them back to Firebase, you would simply have to, being in the root of the Ionic project, launch the Firebase CLI command “firebse deploy” again.
Once the application is published on a public hosting, you can access it. The CLI itself will inform you about the URL to connect to with your browser. Now access it and open the Chrome Developer Tools.
From the “Application” tab you can find various information about the PWA you are viewing, such as the Service Worker that has been installed.
We recommend that you look at all the elements that you will find to obtain more information about your application.
Finally, once you have a public URL, fast and free thanks to Firebase, just enter it and run the Lightbox extension.
This should generate a report with things that we could improve.
Well I hope this Post is useful and any questions you can reach me at @carlosrojas_o
Keep Programming 🙂
Facebook Comments
Disqus