webmaxru / pwatter Goto Github PK

View Code? Open in Web Editor NEW

162.0 20.0 30.0 3.4 MB

Angular Progressive Web App using Workbox

Home Page: https://workbox-workshop.firebaseapp.com

JavaScript 16.65% TypeScript 57.09% HTML 17.54% CSS 8.72%

angular workbox pwa progressive-web-app service-worker push-notifications background-sync

pwatter's Introduction

A simple app for the PWA Workshop

Prerequisites

Latest stable versions of node, npm installed.
Static web server with SPA support:

serve. Recommended and pre-configured.
superstatic. Use this as a fallback option.

Installation

Clone the repo

git clone [email protected]:webmaxru/pwatter.git

Make sure you are on "workbox" branch:

git checkout workbox

Install dependencies:

npm install

Install "serve" dev webserver:

npm install serve -g

Run the server inside "pwatter" directory:

serve

Install Workbox CLI:

npm install workbox-cli --global

Open the browser:

http://localhost:5000/

You should see the page with PWAtter header.

We are ready to start the workshop! Follow the trainer instructions.

If for some reasons global npm package installation is not an option for you, you can install and run "serve" locally:

npm install serve
node_modules/.bin/serve

pwatter's People

Contributors

Stargazers

Watchers

pwatter's Issues

Service Worker postmessage in Angular 5 how to do it. Kindy Share any the sample Example of Postmessage

Mock SwPush and SwUpdate in development

With ng serve I get "No provider for SwPush" and "No provider for SwUpdate" because the ServiceWorkerModule is only registered in production environment:

environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []

Can SwPush and SwUpdate be mocked in development mode somehow?

SwPush Issues Angular 5

I have attached Screen Shot
I don't know what is the
exact problem more than 3 weeks . ngsw-config.json its calling notification data from server but me it is not working .Show in below. Kindly do the Needful.

Service-worker custom plugin

Is it possible to create custom plugins in @angular/service-worker: 5.x?

I have on my mind something similar to:
https://github.com/webmaxru/pwa-workshop-angular/tree/step9/src/service-worker

Question about Datagroups

I see in your ngsw-config.json that you have a dataGroups section with what seems to be relative paths: /favorites and /timeline. However, these are API calls to https://pwa-workshop-api.herokuapp.com. Can you explain how this works and why instead of referencing relative routes like the /favicon.ico, it matches a URL like the font URLs? And if such is the case, will it be any different with URLs that require URL parameters? Thanks!

How to create Service Worker in Development Mode

How to create Service Worker in Development mode in Angular 5

Property 'take' does not exist on type 'Observable<PushSubscription>'

Hello, is this really happening? or is it probably a problem in my project? Thank you and great work.

Uncaught (in promise): Error: StaticInjectorError[SwPush]:

Wow Awesome Bro for sharing your knowledge in Angular 5 using PWA.
I have issue in SwPush and i have attached screen shot,kindly find the attachment
Can you share me the simple example of source code while click the button option it will show the notification using swPush in Angular 5 with easy example. Kindly do the needful Bro.

This is my Mail ID [email protected]