[go: up one dir, main page]
Scribd
Upload
112 views21 pages

Progressive Web Apps

Here are the steps to generate a PWA using Angular: 1. Create a new Angular project using the Angular CLI: ``` ng new my-pwa-app ``` 2. Add PWA capabilities using the Angular CLI: ``` ng add @angular/pwa ``` 3. Build the app in production mode: ``` ng build --prod ``` 4. Serve the built app using a static file server like http-server: ``` npm install -g http-server http-server dist/my-pwa-app ``` 5. The app should now be accessible and function as a PWA

Uploaded by

SIR.Einstein
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
112 views21 pages

Progressive Web Apps

Here are the steps to generate a PWA using Angular: 1. Create a new Angular project using the Angular CLI: ``` ng new my-pwa-app ``` 2. Add PWA capabilities using the Angular CLI: ``` ng add @angular/pwa ``` 3. Build the app in production mode: ``` ng build --prod ``` 4. Serve the built app using a static file server like http-server: ``` npm install -g http-server http-server dist/my-pwa-app ``` 5. The app should now be accessible and function as a PWA

Uploaded by

SIR.Einstein
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Progressive Web

Apps
Marina Magdy
Agenda

● What is PWA ?
● What makes an app a PWA?
● PWA Principles.
● Manifest file.
● Service workers
● PWA with angular
● Questions!
What is PWA?

Progressive web apps are web applications built with technologies that
make them behave like native apps. A benefit of progressive web apps is
the ability to work smoothly when network coverage is unreliable. Also,
unlike native apps, no installation is required, but they are faster than
typical web apps.
What is PWA?

On the other hand, native apps are better integrated with the operating
system and therefore offer a more seamless experience for the users. You
can install a native app so that it works offline, and users love tapping their
icons to easily access their favorite apps, rather than navigating to it using a
browser.
What makes an app a PWA?

It's not that obvious if a web app is a PWA or not from first glance. An app
could be considered a PWA when it meets certain requirements, or
implements a set of given features: works offline, is installable, is easy to
synchronize, can send push notifications, etc.

In addition, there are tools to measure how complete (as a percentage) a


web app is, such as Lighthouse
Examples

● Starbucks : https://app.starbucks.com/

● Pinterest : https://www.pinterest.com/

● Twitter : https://twitter.com/home
PWA Principles

● Discoverable, so the contents can be found through search engines.


● Installable, so it can be available on the device's home screen or app
launcher.
● Linkable, so you can share it by sending a URL.
● Network independent, so it works offline or with a poor network
connection.
PWA Principles

● Re-engageable, so it's able to send notifications whenever


there's new content available.
● Responsively designed, so it's usable on any device with a
screen and a browser—mobile phones, tablets, laptops,
TVs, refrigerators, etc.
● Secure, Accessed via HTTPS to allow authorization,
secured transactions, and also to prevent unauthorized
access
Is it worth doing all that?

Absolutely! With a relatively small amount of effort required to implement the core
PWA features, the benefits are huge. For example:

● A decrease in loading times after the app has been installed, thanks to caching
with service workers.
● The ability to update only the content that has changed when an app update is
available also the push notifications option.
● A look and feel that is more integrated with the native platform like app icons on
the home screen.
Service Workers

Service Workers are a virtual proxy between the browser and the network and how to
properly cache the assets of a website and make them available when the user’s
device is offline.They run on a separate thread from the main JavaScript code of our
page, and don't have any access to the DOM structure. This introduces a different
approach from traditional web programming — the API is non-blocking, and can send
and receive communication between different contexts. You are able to give a
Service Worker something to work on, and receive the result whenever it is ready
using a Promise-based approach.
Service Workers

They can do a lot more than "just" offering offline capabilities, including handling
notifications, performing heavy calculations on a separate thread, etc. Service
workers are quite powerful as they can take control over network requests, modify
them, serve custom responses retrieved from the cache, or synthesize responses
completely.
Manifest file

The web app manifest is a JSON file that tells the browser about your Progressive
Web App and how it should behave when installed on the user's desktop or mobile
device. A typical manifest file includes the app name, the icons the app should use,
and the URL that should be opened when the app is launched.
Angular and PWA

After we create an angular application we need to use the following command line:

● ng add @angular/pwa

The above command automatically add PWA files and features inside an Angular
app:

● The manifest.webmanifest file


● The ngsw-config.json service worker
● Varying sizes of icons inside the assets/icons directory
Angular and PWA

You need to build the application to generate the static files to run the application on
servers

● ng build –configuration=production

You need to run the app over HTTP Server because ng serve not working with
service workers

● npm install -g http-server


● http-server dist/<project-name> -o
General
Resources [ PWA ]
● https://vaadin.com/pwa

● https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction

● https://angular.io/guide/service-worker-intro

● https://www.positronx.io/build-progressive-web-app-pwa-with-angular/

● https://tharakamd-12.medium.com/make-an-angular-app-available-in-offline-getting-started

-with-service-workers-in-angular-9e169e43c013

● https://daanstolp.nl/articles/2020/angular-pwa/

● https://blog.angular-university.io/angular-service-worker/

● https://allfront.io/blog/creating-a-pwa-with-angular
Resources [ Angular ]
● Docs is the most important resource
● Fireship: https://www.youtube.com/watch?v=Ata9cSC2WpM
● Freecodecamp: https://www.youtube.com/watch?v=AAu8bjj6-UI
● https://www.youtube.com/watch?v=WHv1YQUg6ow
● https://www.youtube.com/c/Angular
● https://www.youtube.com/watch?v=ew6ljePlSSc
● https://www.youtube.com/watch?v=3dHNOWTI7H8&t=6118s
● https://www.youtube.com/c/JoshuaMorony
● Old version but good instructor about TS:
https://www.youtube.com/watch?v=k5E2AVpwsko&t=6472s
Resources [ Angular ]
● Rxjs
○ https://www.youtube.com/watch?v=ewcoEYS85Co
○ https://www.youtube.com/watch?v=65Us8NwmYf4&t=16s
○ https://www.youtube.com/watch?v=T9wOu11uU6U&list=PL55RiY5tL51
pHpagYcrN9ubNLVXF8rGVi
○ https://www.youtube.com/watch?v=2LCo926NFLI&t=70s
Thank you
Lap
Task
● Please create a new project and do the same steps we have done in the lecture
to generate a PWA.
● Continue any previous task :)

Best of luck,

You might also like