SMARTER Web Apps with PWAs (Progressive Web Apps) | Adding PWA Functionality to Angular 10 App

Веб-разработка с JavaScript-фреймворками
Веб-разработка с JavaScript-фреймворками

Today we introduce a brand new topic being Progressive Web Apps (also known as PWAs). PWA are apps that can run both as a website and a mobile device applica†ion. Using our web development knowledge we can allow our web apps to also function as mobile device applications through the power of Javascript, HTML, and CSS (and of course PWA technology). We also implement the PWA paradigm into our Angular blog application to demo this functionality. Angular Update Tool: https://update.angular.io/ Check out our website for more great tutorials and content! https://smallbatchdevs.com KEEP UP with @smallbatchdevs on SOCIAL MEDIA! Twitter: https://twitter.com/smallbatchdevs Instagram: https://www.instagram.com/smallbatchdevs Facebook: https://www.facebook.com/Small-Batch-Devs-112906707036301 Twitch: https://www.twitch.tv/smallbatchdevs Check out all our Github Repositories for these episodes: https://github.com/smallbatchdevs 00:00 Intro 00:34 What Is It? 01:08 Why Use It? 02:09 How Does It Work? 03:16 Installation 04:31 manifest.webmanifest 05:01 ngsw-config.json 05:42 Build & Run & Demo 08:31 Testing Changes 09:41 Install the PWA on Desktop 10:21 Outro #pwa #webapp ► Artist Attribution Music By: "After The Fall" Track Name: "Dreaming" • SoundCloud - https://soundcloud.com/afterthefallofficial • Instagram - https://www.instagram.com/afterthefallmusic • FaceBook - https://www.facebook.com/afterthefallmusicofficial • DOWNLOAD @ https://www.chilloutmedia.com/atf Licence: Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) - Full licence here: https://creativecommons.org/licenses/... • Music released by: Chill Out Records @ https://goo.gl/fh3rEJ & https://www.LoFi-HipHop.com #pwa #angular #web


Keywords (if available)
Comments

Users Comments

Related Videos

Related videos

Thumbnail

Demo esp8266 send/recieve data via the internet with android phone

By Веб-разработка с JavaScript-фреймворками

Duration: 1:24

Thumbnail

Introduction to Angular Progressive Web App (PWA) on Windows

Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of t...

By Канал для JS-разработчиков веб-приложений

Duration: 5:34

Thumbnail

PWAs (Progressive Web Apps) in Angular - Make them look like Native Mobile Apps! - Roman Just Codes

In this video I'll show you the minimum requirements you need as far as aesthetics in order to make your PWAs build in Angular look more like native apps and less like mobile web apps using some clever techniques, tips and tricks. Github Repo:...

By JavaScript техники

Duration: 20:30

Thumbnail

How to convert Angular webapp / dashboard to Progressive web app [ PWA ] in 5 minute [ Part 1 ]

Stackoverflow post : https://stackoverflow.com/questions/35504194/what-features-do-progressive-web-apps-have-vs-native-apps-and-vice-versa-on-an In this tutorial you will get very easy steps for angular web app to convert into progressive web app ak...

By JavaScript: базовые принципы и практика

Duration: 5:23

Thumbnail

Episode 004 -- Progressive Web Apps in Angular

In Episode 004, we go over how you can get started turning your Angular application into a progressive web app. The CLI has made it really easy to turn your app into a PWA. We'll go over how to see that the service worker is working, and how to ...

By JavaScript Algorithms

Duration: 41:55

Thumbnail

Creating First PWA (progressive web application) with angular

Making an angular project to a pwa (progressive web application)

By JavaScript Фрилансерская Кодерская Сфера

Duration: 5:47

Thumbnail

Web goes Native: Progressive Web Apps (PWA) – with Angular - Shmuela Jacobs | IPC 2017

Web applications and specifically Single Page Applications leverage the power of our computers and give a fast, fluent experience to users who have a strong wifi connection. But a huge proportion of web activity is done on mobile devices, which requi...

By JS Визионер

Duration: 66:05

Thumbnail

Angular Academy Show [S01E02] - Progressive Web Apps in Angular #PWA

https://angular-academy.com - Angular Trainings and Consulting Recording of meeting with Maxim Salnikov @webmaxru and Michael Hladky @Michael_Hladky discussing Progressive Web Apps in Angular Brought to you by Bartosz Pietrucha @pietrucha from Angu...

By JavaScript: создание CMS

Duration: 95:01

Thumbnail

Creating PWAs with Angular [Urdu/Hindi]

Progressive Web apps are the next in line for challenging the mobile app status quo. Using Service Workers and latest frameworks like Angular you can create a fully functioning offline supporting mobile app really fast - and the best part you dont ev...

By JavaScript разработки

Duration: 30:54

Thumbnail

Progressive Web Apps with Angular

Get a 100 PWA score on Lighthouse with Angular. In this episode, I will teach you how to configure your app to be 100% compliant with the progressive web app checklist provided by Google, making your app installable on compatible devices. Full Less...

By JS Обучение с Простыми Примерами

Duration: 6:11

Thumbnail

Simple Angular PWA ( Code Review ).

To build a PWA (Progressive Web App) with Angular we need to follow the next steps: 1. Create the App with Angular CLI 2. Add the manifest with the basic info of your app (in the src folder). 3.Create the service worker (in this case with Sw-precache...

By JS С Основами

Duration: 11:18

Thumbnail

Why PWA? | Things you must know before developing a Progressive Web App

Welcome to the 8th episode of Learn Angular from the scratch . Topics - a) What is Progressive Web Application? Why PWAs are becoming popular? b) How to Convert existing angular app to a PWA c) Custom Add to home screen button . d) Working principal...

By TypeScript Проекты

Duration: 18:59

Thumbnail

Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster (Matt Raible)

In this session, I show how to build a Progressive Web App (PWA) AND a mobile app using Ionic, Angular and JHipster. PWAs are being hyped as the next big thing in mobile development. This talk describes the trials and tribulations of developing the ...

By React в деталях

Duration: 47:19

Thumbnail

Nuxt 3 PWA: Turn Your Nuxt 3 Application into a Progressive Web App

Get Started with Nuxt 3 PWA: An Easy-to-Follow Tutorial for Turning Your Nuxt App into a Progressive Web App -- Join Exclusive Community [FREE] -- Discord: https://jahid.dev/d Twitter: https://twitter.com/jahiddev Web: https://jahid.dev ? Social Med...

By Эксперты CSS

Duration: 22:55

Thumbnail

Build PWA in Angular [PDC Tech Carnival 2020]

? PDC Tech Carnival 2020 ? Topic: Build PWA in Angular ? Description: A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set o...

By JavaScript Pro

Duration: 46:28

Thumbnail

Progressive web apps tutorial using Angular 13 | Service worker | Push Notifications

Progressive web apps tutorial - We see how to convert Angular 13 app to Progressive web app. Service workers play the most critical role in the PWA of caching the resources and API data. The angular services SwUpdate and SwPush are available in the ...

By Инновационные решения на JS

Duration: 47:49

Thumbnail

Angular Service Worker | Progressive Web Apps Development

A service worker is a script that browser runs in the background, separate from a web page. With the help of the service worker, we can also implement push notification and background sync. Service workers can store files or responses in cache storag...

By Разработка JavaScript игр

Duration: 25:46

Thumbnail

PWA with Angular

Most of us have already heard about Progressive Web Apps. We will dive deeper into what Progressive Web Apps are and why they could be important for you and your business. Afterwards we will follow questions in the angular universe like how can we bu...

By Начинаем с JS

Duration: 61:43

Thumbnail

PWA Progressive Web App tutorial #20 Add a fallback page

Sometime the page we haven't visited before. Instead of showing the default error page, we want to show our own customized fallback. Here will show you how. ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ?Complete Courses? ...

By Реактивный Успех

Duration: 4:33

Thumbnail

Первые на деревне, 1 сезон, 1 выпуск

Премьера! Участники шоу были уверены, что поедут на съемки проекта в Дубай. Но реальность оказалась куда более приземленной - новой локац...

By Телеканал ТНТ

Duration: 89:50