Building Progressive Web Apps with Angular 11 Framework

Progressive web applications are mobile applications that do not require installation and depict behaviour similar to websites. These even perform in the intermittent network.

Prerequisites: What we require to get through?

• Install node.js locally
• Get the latest version of Google Chrome Web Browser
• Install the Lighthouse Chrome Extension to later test if your app is progressive
• Get a Google Account for uploading the application to Firebase

Follow Steps in Sequence

1. Create a new project with Angular CLI
2. Angular generates test files in the process. Make use of the skip test flag to prevent these.
3. As you get the prompt for configuration options, create a new project directory named ng-PWA.
4. Navigate to the new directory.
5. Create a web app manifest. It is a JSON file with a configuration that gives a web application the ability to save the user’s home screen. It defines the appearance and behaviour if launched from the home screen.
6. Secure a manifest.json file in the root of the src folder nano src/manifest.json

7. Now add this code in the src/manifest.json file:

8. Specify a name that you can attach with the app icon on the user’s home screen. It should be a short name.
9. Specify the landing page of the app while launching it from the home screen.
10. Set the theme colour for the browser UI to know when the users visit your website.
11. Specify the background colour property controls to change the background on which the app icon displays when users launch the app from the home screen. You should specify when you wish to display or hide the browser UI.
12. Create duplicates of the app icons in multiple dimensions if you want users with different types of devices with screen sizes to visit your site.
13. Go to index.html and add some code to the head section (after adding the image assets)

14. Instruct Angular to add the web app manifest file to the build folder. Add manifest.json file to the assets array in the apps section of the .angular-cli.json file.

15. Edit Angular.json instead of .angular-cli.json for applications built with Angular 6 or later. Add this code into angular.json:

16. Add service workers – webpack to the app before pushing it into production with the help of the sw-precache-webpack-plugin npm package. It must be able to track and cache the build files.
17. Execute a command to auto-generate the service worker in the build folder. For this, run the npm install command from the ng-PWA directory to install the package.
18. Create a file named precache-config.js, after installing the package
19. Add this code in the precache-config.js file:

20. The precache-config.js file configures the sw-precache-webpack-plugin by using literal object key-value pairs.
21. Configure sw-precache-webpack-plugin
22. Finish the service worker setup by creating a custom npm script or command that builds the app and auto-generate the service worker file in the build folder.
23. Add this code into the package.json file:

Get ready to create the views after installing the sw-precache-webpack-plugin and creating precache-config.js and editing package.json.

PWA with Angular commixes only a single view. Edit app.component.html and replace the content with some code that displays images, text and links.

It will produce a web page with images, text, and links. Here the rel=”noopener” attribute is essential if the anchor element’s target attribute is set “to _blank” for security and performance reasons. Edit src/styles.css as follows:

It will create a background in teal with text in white in the centre.

24. It’s time to deploy your app. Service workers require a secure connection. Visit firebase.google.com. Create an account if you don’t have it already.
25. Go to the Console link and create a new Firebase project.
26. Click continue to arrive at the project dashboard.

Go back to the command terminal. Run the npm install command to install the firebase-tools package globally – npm install -g [email protected]

27. After installation completes, build the app for deployment.
28. Auto-generate service worker, run the following from the ng-PWA directory: npm run PWA

29. As we run the custom script, this makes our app production-ready.
30. Log in to ‘Firebase’ by running this command: “firebase login”;
31. As you will be prompted for credentials, enter your account information into the terminal.
32. Run “Firebase init” to initialize the Firebase project.
33. Answer some questions:

34. Now the app is ready for deployment. Run the “firebase deploy” command and then run “firebase open hosting: website-name”;
35. Troubleshoot and test with Lighthouse depending upon your configuration.

Conclusive: Where can we go from here?

We’ve discussed creating progressive web apps in Vue.js and Ionic earlier. We hope that this article brings insight and eases the transition. PWA’s are lightweight and bring native app-like features into the web platform. Connect with us for more details.