Progressive Web Application using Angular and Google APIs
Before we jump into some code, let us see a few good things about PWA.
PWA (Progressive Web Application) is getting known day by day for its great features and for a native app like behavior when it is really a web app.
PWA has many features that make it different from other conventional application development and interests many developers to learn more about it.
- Responsive and Compatible to different browsers
- Can render a web page when it’s offline or in low network quality
- It works on HTTPS, making it more secure and reliable
- A native app-like interface and easy to develop/integrate push notifications, thanks to the service worker
- Easy to build with many available frameworks
- Reduced installation friction with “Add To Home Screen” feature
Companies like Twitter, Uber, Alibaba, Flipkart, Fandango, Ola, The Washington Post, Shopify to name a few, uses PWA strategy and have made their customers happy.
Technical Components:
- Web App Manifest: Its just a JSON file with some guidelines to behave like a native app. This JSON will have a complete definition like a name of the app, theme, icons, start URL, display type, orientation and lot more
Sample manifest.json file:
2. Service Worker: This is a simple script that runs in the background and is responsible for push notifications, background sync, Offline mode etc. @angular/service-worker and ng service worker config file gives the caching techniques for angular apps
3. Lighthouse: This is the Audit tool that tells you how is your PWA performing and how can you improve to make it faster and better. Comes with chrome developer tool.
4. Add to Home Screen: To enable this popup, PWA needs to have the following
a) Served on HTTPS
b) Should have Web app manifest file with definitions
c) Proper icons to display on the home screen
d) Registered Service worker
Some Cons of PWA!
- Might create confusion to users since we are deviating from traditional native app development and these apps will be absent in App/Play store.
- Limited hardware access
- New technology and might not support all the browsers
Let’s create a simple PWA with Angular 7, This article also helps us understand how to integrate Google APIs to your angular application.
Prerequisites:
- A little bit of JS/TS and a bit about angular
- Globally installed angular-cli and http-server
Let’s begin!!
Step 1: Let’s create an angular app and test if its PWA
- Create an angular app and add PWA to it
ng new angular-pwa-demo2. Navigate to the project and add @angular/pwa
cd angular-pwa-demong add @angular/pwa
3. Install http-server globally or to your project, you need this to run service worker
npm i -g http-server //install http-serve4. Build your app and run it over http-server
ng build --prodhttp-server dist/angular-pwa-demo -o
That’s it, you are all set with Angular Progressive Web Application.
Let’s Test your PWA in chrome developer tool
a) Open chrome developer tool
b) Select Applications from panel selection → select Service Workers
c) Check offline, reload the page and verify if your app reloads successfully
NOTE: Check manifest.json and ngsw-config.json in your project folder to learn more about manifest and service worker.
Step 2: Create a google console account with a project and API key
- Create a google developer account and project in google console
- Enable Places API and Google Map API from the library (as shown in the gif below)
- Select the Credentials tab and create an API key for your app
Step 3: Use Google API to get the autocomplete place suggestion
- Install @agm/core and @types/googlemaps
npm i @agm/core
npm i @types/googlemaps2. Add “AgmCoreModule” to your app module, (app.module.ts)
import {AgmCoreModule} from '@agm/core';// add AgmCoreModule within imports of your @ngModule
AgmCoreModule.forRoot({
apiKey: 'YOUR API KEY FROM GOOGLE CONSOLE',
libraries: ['places']
})
3) Add an input field in the HTML file (I am using material UI in this example)
4) Add a simple getMapApiLoader method to get the place suggestion from the Google API to your component
That’s it, We are ready to get the location autocomplete results.
We just completed an angular PWA with Google API, let’s test for its offline mode.
This GIF gives you an idea of how usually a web application renders in Offline mode.
Do you want your customers to see that Dinosaur???
I heard you just said a big NOoooo… :D
Then make your app PWA and look how gracefully it handles when your application goes offline!!
You can check this project on GitHub: https://github.com/pnaika/angular-pwa-demo
Challenges when you start with your first PWA app and few tips.
- Cache Problems: Since we are guiding service-workers to cache files or a data source, It makes it difficult developing when your app does not respond to your changes. Two things that can make developers feel happy,
a. Check Update on reload in the chrome developer tool and This changes the lifecycle to be developer-friendly.
Each navigation will:
i) Refetch the service worker.
ii) Install it as a new version even if it’s byte-identical, meaning your install event runs and your caches update.
iii) Skip the waiting phase so the new service worker activates.
iv) Navigate the page.
This means you’ll get your updates on each navigation (including refresh) without having to reload twice or close the tab.
b. Use SwUpdate from @angular/service-worker to reload your page if there are any changes,
2. Problems with @types/googlemaps while integrating google APIs
If you come across this error “@types/googlemaps/index.d.ts’ is not a module” when you run your app, make sure to add TS triple-slash directive reference at the beginning of your TS file. It serves as a declaration of dependency between files, also triple-slash references instruct the compiler to include additional files in the compilation process.
/// <reference types="@types/googlemaps" />declare let google: any;
Did you know?
- Google wants to replace chrome apps with PWA
- PWA Case Studies from Google seems more prominent
- Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
That’s it for now and Thanks for the read, I hope this article helps. Comments and Feedbacks are appreciated! :)
References include all the links in the article.
Want to learn more about me?
