So, One of the main characteristics of a mobile or desktop app is that it gives something for users even it\u2019s offline or having a poor network connection<\/p>\n\n\n\n
PWA does not require to be deployed via app stores; instead, we take a slightly different approach and deploy it through the web servers through URLs. To make the same PWA as the native apps, we have to fulfil the following requirements :<\/p>\n\n\n\n
- Responsive <\/li>
- Auto-Updated <\/strong>(Service worker keeps it always updated<\/span><\/em>)<\/li>
- Secure (Content is considered to be safe due to serving through HTTPS.)<\/li>
- Reliably Connected<\/strong> ( Service workers support to make it work offline and on sparse networks.<\/span><\/em> )<\/li>
- Progressive (Web app that employs modern web capabilities to produce an app-like experience for every user.)<\/li>
- Searchable (Very much searchable via search engines due to web app manifest<\/a>.)<\/li>
- User Experience (Similar user experience by engaging the same interaction methodology as a native app has.)<\/li>
- Installable <\/strong>(Fully installable on users\u2019 mobile home screen, and the good thing is we do not have to visit the app store.<\/span><\/em>)<\/li>
- Regularly Communicate<\/strong> ( Keeps you up to date via push notifications and offers you the latest updates, promotion offers, etc.<\/span><\/em>)<\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n
We can implement service workers to a native JavaScript app. But from Angular 5.0.0 version, they ship an implementation of service worker with Angular.<\/em><\/p><\/blockquote>\n\n\n\n
<\/div>\n\n\n\nAdding PWA in Angular <\/span><\/strong><\/h4>\n\n\n\n
It is undoubtedly very easy to convert an existing angular application into a Progressive Web App (PWA). The \u201cng add angular pwa\u201d<\/strong> command can make your dreams come true.<\/p>\n\n\n\n
ng add @angular\/pwa<\/code><\/pre>\n\n\n\nExecuting above command would add required dependencies and do some configurations to our code:<\/p>\n\n\n\n
- The manifest.webmanifest<\/strong> file<\/li>
- The ngsw-config.json<\/strong> service worker<\/li>
- Varying sizes of icons inside the assets\/icons<\/strong> directory<\/li><\/ul>\n\n\n\n
The \u201cindex.html\u201d<\/strong> file has been updated and added the following meta tag and theme colour attribute<\/p>\n\n\n\n
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/10\/image-2.png\")
<\/figure>\n\n\n\nThe \u201cng add angular pwa\u201d<\/strong> command generated the ngsw-config.json<\/strong> file, It is solely responsible for service workers. Service workers are also automatically added to
app.module.ts<\/code> file.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/10\/image-3.png\")
<\/figure>\n\n\n\nHave a look at the
ngsw-config.json<\/code> file.<\/p>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/10\/image-4.png\")
<\/figure>\n\n\n\nThe \u201cng add angular pwa\u201d<\/strong> command also registered the service-worker inside the package.json<\/strong> file:<\/p>\n\n\n\n
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/10\/image-5.png\")
<\/figure>\n\n\n\nOne thing needs to keep in mind is that the service workers won\u2019t work with ng serve <\/span>command. They would only work in the production build. To do a production build run following command,<\/em><\/p><\/blockquote>\n\n\n\n
ng build --prod<\/code><\/pre>\n\n\n\nNow, we have the production build ready at the dist\/<\/strong>{project-name}<\/em> folder. Next, we will serve the angular PWA using the http-server<\/strong> package.<\/p>\n\n\n\n
To install http-server use following command,<\/p>\n\n\n\n
npm install -g http-server<\/code><\/pre>\n\n\n\nThen go to your project root directory and run following command (replace {project-name} with the actual project name),<\/p>\n\n\n\n
http-server -p 8080 .\/dist\/{project-name} -c-1 -o\n\n\/\/or in some case, when there is no ordner {{project-name}}\n\nhttp-server -p 8080 -c-1 dist -o<\/code><\/pre>\n\n\n\nThis would open a web browser with the Angular app on the following URL http:\/\/127.0.0.1:8080<\/a> and also give you the following URLs, you can check your app by entering one of the URL in the browser\u2019s address bar.<\/p>\n\n\n\n
Available on:<\/strong>
http:\/\/127.0.0.1:8080<\/a>
http:\/\/192.168.0.102:8080<\/a><\/p>\n\n\n\n<\/div>\n\n\n\nThen try checking the offline checkbox in dev tools and reload the webpage. It would load as normal even it\u2019s offline.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*7OzZvogzcPqcBjiVo0UTWg.gif\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
You might wonder how this happens. Service worker cache content of the website for the first time it loads in the browser. Then if the site goes offline, service workers would serve the cached content.<\/p>\n\n\n\n
When internet connection restored and if the user refreshes the website, Service workers would download any changes from the back-end and serve those changes on the next browser refresh.<\/p>\n\n\n\n
<\/div>\n\n\n\nReference:<\/h5>\n\n\n\n
- The ngsw-config.json<\/strong> service worker<\/li>