angular-pwa-boilerplate

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #machine-learning #rust #docker #macos #java #awesome #vue #security #mcp #openai #open-source

angular-pwa-boilerplate

(★ 11)

Angular PWA Demo using static assets cache and data request caching strategies ("freshness" and "performance").

angular-pwa-boilerplate 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Welcome to the Angular Pwa demo!</h1>
<a href="https://www.npmjs.com/package/@angular/core">
 <img src="https://img.shields.io/badge/Angular-v16.2.1-green.svg" alt="Angular version">
</a>
<img src="https://www.pwa-shields.com/1.0.0/series/classic/white/green.svg" alt="PwaShield">
 
 
 <a href="https://twitter.com/paco_ita">
 <img alt="Twitter: paco_ita" src="https://img.shields.io/twitter/follow/paco_ita.svg?style=social" target="_blank" />
 </a>

 
This repository shows how to use Progressive Web Apps features in an Angular project. 
 Do you wanto to learn more about the amazing technologies behind Progressive Web Apps? Then have a look at the 
<a href="https://www.educative.io/courses/zero-to-hero-with-progressive-web-apps" target="_blank"> complete course about PWAs</a> publisehd on Educative learning portal.
 
With PWAs not only we can cache static assets (.html, .js, .css) and make them available offline, but we can also cache GET responses according to different caching strategies (performance or freshness). This allows to cover many different scenarios in our applications, whether we want to provide blazing fast responses without the need of a network roundtrip or rather return the latest data from the server, falling back to the local cache in absence of a reliable connection. 
 

 <img width="500" height="400" src="https://res.cloudinary.com/practicaldev/image/fetch/s--Dzohyc-4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/k65j1f6ewz0rq0w5kfl9.PNG">

<a href="https://pacoita.github.io/angular-pwa-boilerplate/"> You can test the Angular PWA demo here.</a>
 
The external APIs used are:

- https://icanhazdadjoke.com/api (using the **performance** caching strategy)
- https://api.thecatapi.com/v1/images/search (using the **freshness** caching strategy)

## 1. Update npm libraries

First install or update your local project's npm dependencies:

```npm install```
 
## 2. Run a production build

Exceute a production build:

``` ng build --prod ```

This command will generate a dist/angular-pwa folder
 
## 3. Serve the application

As we cannot use `ne serve` with service workers, you need to run a web server iof your choice. As example: [http server](https://www.npmjs.com/package/http-server) or the [web server](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en) Chrome extension and target the previously built `dist/angular-pwa` folder.

Open the browser at the proposed address.
 
## To-do
:white_check_mark: Make the application responsive 
:black_square_button: Show notification when a new SW version is available (use swUpdate) 
:black_square_button: Introduce Share API

angular-pwa-boilerplate

angular-pwa-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

angular-pwa-boilerplate

angular-pwa-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README