A progressive web app (PWA) delivers an app-like experience through your mobile phone’s browser but has the same flexibility and gestures as a native application. Because they are powered by mobile browsers, they are not particular to any one device, meaning developers no longer need to write separate code for Android and Apple devices.

1. A new way to deliver amazing user experiences on the web.
A Technical Work Shop presentation by Citytech Software Private Limited
To know more about us please visit www.citytechcorp.com

2. What is a Progressive Web App?
A progressive web app (PWA)
delivers an app-like experience
through your mobile phone’s
browser but has the same
flexibility and gestures as a native
application. Because they are
powered by mobile browsers,
they are not particular to any one
device, meaning developers no
longer need to write separate
code for Android and Apple
devices.

3. Characteristics of Progressive Web App
Progressive: Gives an app like experience for the mobile website.
Responsive: Design adapts as per device whether desktop, mobile, or
tablet.
Connectivity independent: Uses the browser service worker technology
to work offline or on low-quality networks.
App-like: Feels like a mobile app with app-style interactions since it's
built on the app shell model.
Installable: Allows users to install the website as an app on their
home screen without the taking user to an app store.

4. Linkable: Easily share via URL, works exactly like normal link tracking on
web.
Re-engageable: Re-engage users with features like push notifications
even when they are not on website.
Discoverable: Identifiable as an "application" through manifest and
service worker registration scope. So normal search engine discovery
rules apply.
Safe: Served via HTTPS to ensure content is securely delivered

5. How it works:

6. What you need to build PWA ?
• Node Server (to run node package manager)
• Angular with typescript (Data binding, logic and
http request)
• HTML and CSS (structure and cascading's)
• Chrome Browser
• Chrome extension Lighthouse
• Firebase app

7. TypeScript Basic
What is TypeScript?
TypeScript is a strongly typed, object oriented, compiled language.
It was designed by Anders Hejlsberg (designer of C#) at Microsoft.
TypeScript is both a language and a set of tools. TypeScript is a
typed superset of JavaScript compiled to JavaScript. In other words,
TypeScript is JavaScript plus some additional features.
Features of TypeScript:
 TypeScript is just JavaScript.
 TypeScript supports other JS libraries.
 JavaScript is TypeScript.
 TypeScript is portable.

8. Lighthouse
Lighthouse is an open-source, automated
tool for improving the quality of web
pages. You can run it against any web
page, public or requiring authentication. It
has audits for performance, accessibility,
progressive web apps, and more.
You can run Lighthouse in Chrome DevTools, from the command line, or
as a Node module. You give Lighthouse a URL to audit, it runs a series of
audits against the page, and then it generates a report on how well the
page did. From there, use the failing audits as indicators on how to
improve the page. Each audit has a reference doc explaining why the
audit is important, as well as how to fix it.

9. PWA Manifest
Manifest is a simple JSON file
that gives the developer the
ability to control how the app
should appear to the user in
areas where they would expect
to see apps (a mobile device’s
home screen), direct what the
user can launch, and define its
appearance at launch.
<link rel="manifest"
href="/manifest.json">

10. Service Workers
Service Worker is a script that your browser runs in the background, separate from the web
page/web app. It is generally used for features that don’t need a web page or user
interaction.
Service Workers provide the technical foundation that features like offline experiences,
periodic background syncs, and push notifications rely on.

11. Example Contents:
• Creating an Angular App
• Place PWA code in angular app
• Creating the Firebase App
• Installing the Firebase Tools
• Using Firebase In Our Angular App
• Deploying
• Firebase Hosting Dashboard
• Extra: Script to Deploy
• Conclusion

12. Start progressive web with angular application:
Once we have the CLI, we can create a new Angular app
and test it out using the following:

13. Step 1. First audit.
Our app is good to go! Let's start setting up Progressive Web Apps.
We need to figure out how is our app going and where our week points take place. And all we have to do is
open our Chrome DevTools and go to the Audits tab, where we can find such a powerful tool as Lighthouse—
the best diagnostics of web pages.
Step 2. Adding the app shell
An application shell is the minimal UI that user will see ASAP. The app shell should load really fast
to catch user’s eyes and make him wait for the whole content.

14. 2.1 Loader
The most common example of app shell is loader (or spinner), that is visible for users until app and data is ready.
As an example resource, you can go to the codepen.io and search for something like ‘simple css spinner’ and choose
whatever you like. Copy markup and styles directly to your index.html file. Css goes to <style> tag (minifying the css
code would be helpful), the html of your loader — inside <app-root> element (it will be removed automatically when
angular app will be ready to work).
<app-root>
<div id="spinner"></div>
</app-root>
2.2 Header
To avoid an abrupt jumps in view, we can add some fake header-template.
<app-root>
<nav
style="background-color: #673ab7; height: 56px; width: 100%">
</nav>
<div id="loading"></div>
</app-root>

15. 2.3 JS Fallback
Some of the Lighthouse warning says, that we didn’t provide any content, if scripts are not available. To deal with it, we
can use the html tag <noscript>.
For example:
<noscript>
<h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
Sorry, but app is not available without javascript
</h3>
</noscript>
Step 3. Adding the manifest
we can see from the audit results, 3 red warnings tell us that we need something called “manifest”.
The web app manifest provides information about an application (such as name, author, icon, and description) in a
JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users
with quicker access and a richer experience.
There are a lot of examples of how manifest should look like, but the core info should include app name, short
description, urls to icons for different devices, name of start file and theme color. For our test, I created the following:

17. Create manifest.json under the src folder and copy/paste the code above. Open the .angular-cli.json file and
add manifest to assets section:
As you can see from the config, we need to include icons of different sizes to our project. For our studying
process, just google for it — choose any you like. (Hint: go to the Google search result Image tab,
find Tools button, and on the slided down toolbar open the size menu. Choose exact size to clarify the search
request). Download images and move them to our assets folder.
Go to the index.html file, add the following tags to head section:

18. Step 4. Service Worker
The last one. We are at the finish line. The last 3 fails we have are related to absense of something
called Service Worker.
A service worker is a script that your browser runs in the background, separate from a web page, opening the
door to features that don’t need a web page or user interaction.
npm install @angular/service-worker --save

19. create file
/precache-config.js

20. Add line
/package.json
Then Run below the command
Ng pwa

21. Creating the Firebase App
We'll need to create a Firebase account and a Firebase app so that our application knows where to deploy to.
Once you login to your Firebase console, create a new app.

22. We'll name our app Angular Hosting Test. You can also set the subdomain for your app. Your app will be hosted
at subdomain.firebase-app.com.

23. Our new app is live! That's all we had to do in the Firebase dashboard. The rest of the work will be done on our
own computer in our applications.
Installing the Firebase Tools
Please run below the command one after one.
npm install -g firebase-tools
firebase login
This will open your browser and allow us to login from there.

24. That's it! We're all ready to start using the Firebase tools.

25. Using Firebase In Our Angular App
The first step is to link our local Angular app to our Firebase app we created in the Firebase dashboard.
Here's the answers to the questions Firebase tools will ask:
 Are you ready to proceed? Yes
 Which Firebase CLI features? Hosting (In the future, use whatever you need! Press space to select.)
 Select a default Firebase project? Angular Hosting Test (Choose whatever app you created in the earlier
steps)
 What do you want to use as your public directory? dist (This is important! Angular creates the dist folder.)
 Configure as a single-page app? Yes

26. App Deploy to Firebase
Now that we have the dist/ folder, we can tell Firebase to deploy it:
Now run below the comment to push code
firebase deploy

27. Our app is now deployed and ready to view! Run
this Firebase command to see it in action:
Last and final command to open site in browser
firebase open hosting:site

28. Thank you
A Technical Work Shop presentation by Citytech Software Private Limited
To know more about us please visit www.citytechcorp.com