Oschangkai / angular-pwa-boilerplate

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

Welcome to the Angular Pwa demo!

Follow me on Twitter or Dev.to:       

This repository is the practical counterpart of my article Create Progressive Web Apps with Angular, Workbox, PWA Builder publisehd on Dev.to. The article is part of a series focusing on Progressive Web Apps technologies.

You can test the Angular PWA demo here.

The external APIs used:

• https://icanhazdadjoke.com/api
• https://www.worldtradingdata.com/

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 or the web server Chrome extension and target the previously built dist/angular-pwa folder.

Open the browser at the proposed address.

To-do

🔲 Make the application responsive
🔲 Show notification when a new SW version is available (use swUpdate)
🔲 Provide a dark mode

Troubleshooting

If, and only if, the service worker is not registered when the application is served locally via web server, then you can force explicitly the SW registration.

Add the following snipped in the main.ts file:

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(() => {
        if ('serviceWorker' in navigator && environment.production) {
            navigator.serviceWorker.register('./ngsw-worker.js');
        }
    })
    .catch(console.error);

Other users reported issues with some versions of the angular-cli:

Github issue

Github comment