Building Progressive Web Apps in 2018

person carlosrojasofolder_openpwaaccess_time November 19, 2017

We have heard about the Progressive Web Apps for about 2 years now and on their way, we are finding guides, tutorials, frameworks and tools that help us every day with the construction, generation, and publication of our projects.

In this opportunity, we are going to give an overview of some tools that you can currently use and facilitate the journey of publishing your PWA. then, let’s start …

Why use additional tools?

I love using tools to work on my projects, although this may result in a learning curve at the beginning will be rewarded later with the following benefits.

Save time.

These tools usually have many common features already done, which means you will not have to do them yourself, just integrate into your project. This translates into saving you that time with parts that have already been tested and optimized.

Save data for your users.

In many places it is still very expensive to pay for data on their phones, that is why we must worry about our builds being generated as light as possible and quickly load on their devices. Current Frameworks usually have an option to build to send to production, this process, in overall, minimizes files and calls to a server that results in fast uploads and less data usage.

Generation of Code.

Creating file structures and their correct naming scheme always turns out to be an arduous task and if you do it manually it will possibly be a lost cause. The current framework generates important blocks with some command, in an orderly and easy way.

Better practices.

When your App is small or you do not work with a team it is easy to maintain a project. But when the size increases, the problems begin. The best practices help you prevent those problems. The current framework establishes all good practices within its framework and allows you to follow them transparently.

Strategies to make a PWA?

Making a PWA is basically doing a WebApp with some additional features such as making it installable, running in the background and working offline, to achieve this we use the Manifest and the Service Worker. There are generic tools that you can use with your projects and tools integrated into the framework that you can also use. having said that, I present to you the most popular ones.

Generics

These tools are ready to be implemented in your projects in a standard way.

Workbox

Workbox is a collection of libraries and tools that make it easy to implement your web storage locally. It facilitates the implementation of the caching strategies and the code of your Service Worker.

offline-plugin for webpack.

This is a plugin that adds offline capacity to your Webpack projects.



Frameworks.

In this case, the framework tool does everything for you, you just have to activate the options in your App and adapt it.

Angular CLI

This is the Angular command tool that allows you to carry out the development of your projects in a comfortable and scalable way. The activation of the Service Worker is simply a command line within our project created with the Angular CLI.

$set ng apps.0.serviceWorker=true

Ionic CLI.

This is the Ionic Framework command tool which allows you to easily integrate Angular and Cordova. The activation of the Service Worker in your project is a bit more manual because you can not do it from the terminal instead you must enter the file src / index.html and uncomment the line that appears marked.

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

However, it is also easy to start with your PWA.

As you can see, the creation of PWA is already very advanced and in the next few months, it will be something incredible to see everywhere. So, I hope you start looking at these tools and you are ready for what is coming.

Until a next post.

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