How To Create A Progressive Web App Featuring Angular And Headless Cms

  • 2 weeks ago
  • 1

Create a new file in the /src/app folder and name it delivery-client.provider.ts. This provider module needs to export an object defining the factory used to create our client. In the code below, you can see the ID of the project in Kentico Cloud where the data is stored.

There are multiple JavaScript frameworks and instruments to build a progressive web app with, and each of them offer different capacities and capabilities. The main app routing module will now lazy load the content module whenever the user navigates to a router under the /hn/ path. In this case, I am automatically redirecting, but you are not required to do this. As you can see, Angular is a largest resource, while the Firebase SDK is a close second.

Let’s first verify that our application couldn’t be served offline. We can set the browser to appear as offline through Chrome Dev Tools. We can use ng serve to verify that the application has been created successfully.

Get The Medium App

According to Statista, the worldwide rate of mobile internet usage has been growing steadily over the last five years, reaching a 63% share of the total internet usage last year. Try to minimize the footprint of your initial styles.css file. If using Angular CLI 1.5 or greater, `–build-optimizer` is enabled by default. Progressive Web Apps in 2025 Web Page Test gives you the most detailed loading waterfall of any other tool on the web. Hacker News uses it when ranking submissions and it can be very helpful for tracking down bottlenecks. In addition to Lighthouse for Chrome, you might also check out the following tools for additional benchmarking.

Progressive Web Apps angular

In this section, we will define an injectable client that allows the app to get Kentico Cloud data. I will use the same data source as Bryan used in his article. I narrowed my choices down to three big players — React, Vue, and Angular. I chose to use Angular, because it has already support for service workers, and I wanted to use TypeScript. However, despite the framework’s overall greatness, there are way fewer Vue developers on the market compared to React or Angular ones. So, if a business wants an app built with Vue specifically, it is likely to encounter a problem finding a development team.

Capacitor has first-class support for Progressive Web Apps and native apps. That means that Capacitor’s bridge supports running in either a native context or in the web, with many plugins available in both contexts with the exact same API and calling conventions. Now, let’s import the service worker module to our app using the app.module.ts file. From Microsoft and Facebook down to the smaller players, here are five of the hottest hybrid mobile app development frameworks on the market in 2019.

PWAs can also be created using ‘plain’ JavaScript or certain tools that can speed up the process even more. This file contains the name of the application, theme, and background color, and various sizes of icons. If we now build for production and deploy the new version of our app, we should see that the dogs are listed even when we are offline. If there are changes in the ngsw.json, all affected resources are downloaded anew and added to the cache.


This will load a fancy font called Pacifico from Google Fonts. Now let’s make sure that all the headings use this font. We are intentionally making the fallback font to serif in order to easily recognize whether the font loads correctly. Safety-worker.js – if you screw up big time, this is your escape hatch. I hope you never have to use this, but here are the detailed instructions.

  • Primarily, it consists of how the PWA application will look when it opens up.
  • Therefore, PWA development should be approached mindfully and if possible involve dedicated application development specialists.
  • Web Page Test gives you the most detailed loading waterfall of any other tool on the web.
  • This tendency has raised the bar of what users expect from websites, which includes lightning-speed loading and frictionless browsing on their devices, whatever their brand, size or capacities.

Registering a service worker is an essential element of the criteria. Currently our users download the static assets over the network only the first time they open it. This is great for performance whenever network conditions are not optimal. However, there is a catch – users will always run the code which they initially downloaded. How do we publish a critical update – for example fixing a major bug in our code which affects all users?

This way, you’ll always be able to see what the code looks like. I recently read my colleague Bryan’s story about Progressive Web Apps. The article talks about the implementation of a Progressive Web App that lists interesting places stored in the headless CMS.

While a mobile application may be a viable option for global ecommerce brands, other rank-and-file businesses are left to figure out the solution. From AngularJS and React to Ionic and Lighthouse—here’s the list of the best PWA frameworks and tools to build progressive apps with in 2020. The larger and more complex the app, the greater the performance gains will be from lazy loading. AssetGroups — Here you can the specifies assets or resources that need to be cached and specify the caching strategy, whether it should be network first, cache first, or a combination of both.

I hope you have understood how you can install and configure PWA in an Angular application. Primarily, it consists of how the PWA application will look when it opens up. Here you can set options like splash screen icon, background color, display, etc. I’m intentionally inlining HTML and CSS since the component is simple enough. It takes a list of image urls as an input and renders each image as a list item.

Setting Up Angular Project

You can cache external images or sounds using the same strategy. We must serve the contents of the folder via an HTTP server. You can use whatever you want – nginx, Apache httpd or http-server. I will be using the last one since it is the simplest method and requires almost no configuration. You can follow along with the HTTP server you are most comfortable with. Capacitor has first-class support for Progressive Web Apps, making it easy to build an app that runs natively on iOS and Android, but also on the web as a mobile web app or “Progressive Web App.”

Progressive Web Apps angular

For instance, in Chrome in Android, you can do so by tapping the ellipsis glyph and choosing “Add to Home screen”. Finally, we’ll create the manifest itself, together with all the icon renditions. Rename /src/app.component.css to /src/app.component.scssand reflect this renaming in app.component.ts in the component declaration atribute’s styleUrls property value. Having written a good share of JavaScript code, I wanted to expand on the concept using more complex frameworks. Lighthouse assigns an evaluation score and the list of failed/passed audits for each parameter.

How To Build Progressive Web Apppwa In Angular 9 ?

Since Vue enables fast product delivery, it is oftentimes used to build smaller solutions and MVPs. At the same time, the framework offers capacity for dynamic and complex applications. Along with React and Angular, Vue is one of the most popular progressive JavaScript frameworks for building PWAs. Unlike Angular and React which are in large part driven by Google and Facebook, Vue was created by a single person. Using additional JavaScript libraries such as NextJS and GatsbyJS allows generating server-side and static (client-side) rendered pages, API interactions, and routing.

Progressive Web Apps angular

The primary drivers of performance in Angular include the size of the resources and number of network calls required to render the page. Build PWAs with Ionic Learn how to create a production version of a PWA built with Ionic Framework. How Pinterest Built a PWA Learn https://globalcloudteam.com/ how and why the Pinterest team rebuilt their mobile experience as a PWA. Learn how Progressive Web Apps can boost your app strategy with greater reach and engagement, and start building yours today. Learn how to make the most of the Ionic app development platform.

Ionic For Enterprise

React has excellent backing, documentation, a vast online community, and several high-profile projects under its belt, including Facebook, Instagram, WhatsApp, and Twitter Light. It must be remembered that ng serve does not work with service workers so we need to host the application externally through a web server. Src/app/app.module.ts – ServiceWorkerModule.register() is added to the AppModule imports list. It will register the service worker if it is supported by the browser and if the environment is production. Ngsw-config.json – this is the declarative NGSW configuration.

These apps are deployed to traditional web servers, are accessible through URLs, and can be indexed by search engines. First of all, it is required to install the service worker module to the application. It requires us to create a JSON file containing metadata about the app and link it from the head tag. The manifest file should point to multiple URLs of icons in various sizes.

I will show you how to lazy load firebase in the next step to dramatically reduce the bundle size. We have an initial loading splash page, then our app module shell , then firebase loads the data and our page becomes fully interactive. The following lesson contains a handful of tips and ideas aimed at optimizing the Lighthouse PWA performance score. Any good optimization starts with a solid analysis, so I will also provide you with some advanced tools for analyzing the performance for your progressive web app.

Understand The Files Added

Lighthouse is an open-source tool for automated audit of web applications and PWAs, created by Google and available through Chrome DevTools. PWA Builder is a Microsoft tool for converting websites into progressive web applications with no or little development work. To jumpstart the project, all one needs to do is to enter the URL in the PWA Builder input line. Released in 2017, Angular 5 was the first version to support PWA with the dedicated Angular Service Worker script, provided by the @angular/service-worker module.

Service workers work as a proxy between the client and the internet. Depending on the actual configuration, the service worker can pre-cache the app skeleton (called the ‘app shell’) during the first load. The service worker can also silently cache all other application data. One of the distinctive features of progressive web apps is that they can function offline. Webpack, an open-source module bundler for JavaScript, is the best tool for adding offline experience to a PWA.

As explained before, under the hood it uses service worker API. While the defaults will work for most of the cases, let’s go a step further and add caching for external assets – fonts loaded from Google Fonts instead of our own server. This is the usual case which has some performance benefits like using Google’s CDN and utilizing the native browser caching. This is a common case and it has some performance benefits like using Google’s CDN and utilizing the native browser caching.

Angular Pwa Framework

The default NGSW configuration caches all static assets served locally by our HTTP server – all files in /assets and all images and fonts in the root folder. The assets are declared in the asset group called assets and are fetched on demand and then later added to cache. The other asset group is named app and contains application critical files (JS, HTML & CSS) which are preloaded and cached on start. As you might have noticed there is no actual JavaScript file ngsw-worker.js. The actual Service Worker code which will run in the browser is generated at build time from the ngsw-config.json file.

To run the app, just download or clone the commit and run npm install and ng serve -o. Another factor to consider is the development team, their expertise and maturity, and whether they would be available to maintain and upgrade the application when needed. Popularity, documentation, backing, performance, and specifics of the development process—all of this plays a part in considering which frameworks and tools are best for PWA development. Employing a well-suited framework should accelerate rendering and development, while the bloated size of some frameworks and libraries can be detrimental to the project pace. IOS does not allow installing native apps that can’t be found in the official App Store.

If we didn’t install the @angular/service-worker package, we would have to wire up the checking for updates logic by ourselves. Updating our Angular PWA is as easy as creating a new production build. The NGSW will automatically check if there are changes and will initialize an update if there are any. The urls property contains a list of globs which when matched will result in the response content being cached.

Compare listings