Building Progressive Web Apps in Angular (using pwafire)

Progressive Web Apps(PWA) are basically sites that use modern web tools to provide app-like experiences to users.

Progressive Web Apps  |  web.dev

web.dev

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase:

What are Progressive Web Apps?  |  Articles  |  web.dev

An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps.

web.dev

PWAs is very interesting topic when it comes to user experiences and why businesses would use it. It comes down to users needs and organization goals and agenda, but hear me out:

• PWAs are faster than traditional websites. This is because they are able to cache content locally, which means that they can load much faster, even on slow internet connections.
• PWAs are more reliable than traditional websites. This is because they are not reliant on the internet in order to function. Once a PWA has been installed, it can be used offline.
• PWAs are more engaging than traditional websites. This is because they can offer a number of features that are not available on traditional websites, such as push notifications and home screen icons.
• PWAs can be installed on users' home screens. This makes them more likely to be used, as they are always just a tap away.
• PWAs can lead to increased conversion rates. This is because they offer a more seamless and engaging user experience.
• PWAs can lead to more repeat visitors. This is because they are more likely to be used than traditional websites.
• PWAs can lead to higher revenue. This is because they can lead to increased conversion rates and more repeat visitors.

Overall, there are a number of reasons why businesses are using PWAs. They offer a number of benefits over traditional websites, and they can help businesses to achieve their goals.

How Does Angular Support PWA?

Simply, service workers.

Service Workers & PWAs • Overview • Angular

The web development framework for building modern apps.

angular.dev

At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

A service worker acts as a proxy between web applications, browser and the network(if available). They enhance applications to deliver a reliable user experience and performance.

Adding a service worker on an Angular app is the first step to creating a PWA(in Angular).

Service Workers helps single-page applications built with Angular get best performance and makes the applications highly reliable. All this is done without the need to code against low level APIs.

So… How do you have these service workers in your Angular app?

Pretty simple actually. You just need to run this command:

ng add @angular/pwa

Okay, this command does a couple of things to make that Angular app you have a PWA, here’s a breakdown:

1. Adds the @angular/service-worker package to your project, which in turn creates a service worker, and supports service worker builds in the CLI.
2. Updates the index.html file:
   • Includes a link to add the manifest.webmanifest file
   • Adds a meta tag for theme-color
3. Creates the service worker configuration file called [ngsw-config.json](https://angular.dev/ecosystem/service-workers/config), which specifies the caching behaviors and other settings.

To make it happen, you may need to build you app (again 🤣 )

ng build

PS: You can actually get in depth content on the service workers on the Angular Docs, it’s are surprisingly well documented tbh 🤓

https://angular.dev/ecosystem/service-workers

What happens when you run your app? The fastest way to identify a PWA is by checking the intstall icon on a Chrom address bar, just like the image below =>

PWAFIRE … (wth is that)

It’s not related to fire, or any of the 4 elements of the earth, It’s just collection of resources/APIs used to build Progressive Web Apps.

Home - Progressive Web Apps API of APIs

Resources to build Progressive Web Apps

pwafire.org

PWA brings alot to the table, with 22 APIs for developers to explore! My best APIs from pwafire:

1. Connectivity
2. Copy Image
3. Copy Text
4. Notifications
5. Custom install
6. Share
7. Display mode
8. Fullscreen
9. Idle detection

You can check others out (my opinions can be sad).

Home - Progressive Web Apps APIs by pwafire

Documentation for Progressive Web Apps API of APIs - pwafire. PWAFire APIs are modern web apis bundled together into a single package or api aka pwafire. Built on top of Project Fugu, an effort to close gaps in the web's capabilities and native mobile and desktop apps.

docs.pwafire.org

Code and Demo

This is a funny one, a simple Angular app that is a PWA using some pwafire APIs to make it cool.

Incase you’re more of a not-long read, here’s the source:

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

View on GitHub

Using the Share and Copy Text API to make a Progressive Web App.

From the source code on the repo shared, we will focus on the app.component.ts file:

Remeber to install pwafire in your application by running the command:

  npm i pwafire --save

Using Copy Text API:

This API is used for reading and writing text data to the clipboard, without blocking the main thread.

https://docs.pwafire.org/copy-text

The copy text API usage is as follows:

  const text = "Text to copy"          
  pwa.copyText(text);

So, inside our application, we wil get the tex from the API response:

  async copyJoke(joke: string) {
    try {
      const res = await pwa.copyText(joke);
      this.jokeCopied = res.ok;
      setTimeout(() => (this.jokeCopied = false), 5000);
    } catch (error) {
      console.log(error);
    }
  }

Using Share API:

Share links, text and files to other apps installed on the device.

Home - Progressive Web Apps APIs by pwafire

Documentation for Progressive Web Apps API of APIs - pwafire. PWAFire APIs are modern web apis bundled together into a single package or api aka pwafire. Built on top of Project Fugu, an effort to close gaps in the web's capabilities and native mobile and desktop apps.

docs.pwafire.org

To use the share API, you first define the content to be shared:

  const data = {
    title: "Some title..",
    text: "Some text...",
    url: "https://pwafire.org",
  };

And finaly share the data:

pwa.Share(data);

So, here is how it’s used inside our app:

  async shareJoke() {
    const shareOptions = {
      title: 'Check out this joke!',
      text: this.joke,
      url: 'https://dadjokes-phi.vercel.app/',
    };

    try {
      await pwa.Share(shareOptions);
    } catch (error) {
      console.log(error);
    }
  }

Simple right!

You can checkout the live demo here:

https://dadjokes-pwa.vercel.app/

That’s it good people. By the way, there’s alot to learn in the PWA topic, I will drop some links below, just incase you are interested. Especially if you are curious on whether you can add a Progressive Web App to playstore 😎

Pwafire documentation: https://docs.pwafire.org/
Adding a PWA on Google Playstore: https://developers.google.com/codelabs/pwa-in-play#0
Fugu API tracker: https://fugu-tracker.web.app/
Fugu APIs: https://developers.google.com/learn/pathways/fugu-apis
Angular Service Workers: https://angular.dev/ecosystem/service-workers
Explore PWA: https://web.dev/explore/progressive-web-apps