Building your First PWA: Publishing

person carlosrojasofolder_opencrashcourseaccess_time September 19, 2017

Hello Startupers ! and welcome to your last Lesson 🙂

Prepare a good cup of coffee because i’m going to go deep in some topics. Ready?

Intro.

Progressive Web Apps are an early trend of where Web development is evolving and how to start or learn a little more about them. For this, I will use the framework Ionic which is already prepared to support the PWA. That said, let’s start.

What is a Progressive Web App?

Progressive Web Apps are the intersection between the Web facility and the Apps experience. Additionally, have several properties these are:

  • Adaptable: Its functionality adapts to the device regardless of whether it is Mobile, Desktop, Tablet, etc.
  • Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feels like an app, because the app shell model separates the application functionality from application content.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable – Makes re-engagement easy through features like push notifications.
  • Installable – Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  • Linkable – Easily share the application via URL, does not require complex installation.

Puedes dar una primera probada a esto, ingresando con tu móvil a pwa.rocks.

What should a PWA have?

An App in addition to the normal structure of a WebApp with an index and HTML, CSS and JS files a PWA should have 3 additional things, these are:

  • Manifest file. A file which describes the information of your PWA.
  • Icon App. An image that will be used to be the icon on mobile devices when it is installed.
  • Service Workers. It is a Javascript file that is registered in the browser and is the one that will allow doing the tasks of caching and the push notification, among others.

Building our Progressive Web App.

In this point, you learn:

– Build an App with Ionic.
– Build a Providers with Ionic.
– Build Pages with Ionic.
– Learn about Objects and Classes.
– To Connect your App with Firebase.

You can find all the code in this repo.

If your run:

$ionic serve

You should see something like that.

Ok, then here is the magic.

Go to the file src/index.html and find


<!-- un-comment this code to enable service worker

and install the sw-toolbox library.

$npm install --save sw-toolbox

I’m going to comment this line in src/index.html too for avoid Cordova errors.

<script src="cordova.js"></script>
And now i’m going to prepare to production.

$ionic build --prod

after this you going to have your amazing PWA in the directory www

What happened?

The short version is that Ionic creates the Icon, the Manifest and the Service Worker for you. You can see them in:

– assets/img/appicon.png
– src/manifest.json
– src/service-worker.js

How do I know if it works?

For this we will help with two tools:

Chrome Developer Tools: It is the inspector tool available in the Chrome browser to display hundreds of information regarding the web that is being accessed. If you are a developer you should know what we are talking about.

Lightbox Chrome Extension: It is a chrome extension, also usable as a web service, in which, through a URL, run certain tests against a web page to know its status, things that are ok and which should be improved.

Publishing

To be able to see fully working our App we must be on https:// as we said before.

To easily publish my App I’m going to use the Firebase Hosting service.

1. Install Firebase CLI.

$npm install -g firebase-tools

2. Create a project in Firebase Console.

3. Link the CLI with your account.

$firebase login

4. Link your project with Firebase.

$firebase init

5. Choose “Hosting”

6. When the CLI ask you for the public directory, choose “www”

7. When you finish the CLI questions, send your App with:

$firebase deploy

That’s it. When the process finishes you should have a URL generated by Firebase and you can publicly access the PWA we just produced.

Now go to it and open the Chrome Developer Tools.

Accessing the “Application tab”, you can find various information about the PWA you are viewing, such as the Service Worker that has been installed.

I recommend watching all the elements that you will find here to get more information about your application.

Finally, once you have a public URL, a quick and free pass through Firebase, just go there and run the extension.

Congrats…. you built your first App 🙂

Keep coding…

Carlos Rojas

@carlosrojas_o

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