gokulkrishh / demo-progressive-web-app

🎉 Demo for Progressive Web Application and its features.

Progressive Web Application

A demo for progressive web application with features like offline, push notifications, background sync etc,

Live

Installation

Step 1 - clone the repo

$ git clone https://github.com/gokulkrishh/demo-progressive-web-app

Step 2 - cd in the repo

$ cd demo-progressive-web-app

Step 3 - install dependencies

$ npm install

Step 4 - run application

$ npm run start

In browser, open http://localhost:3000

Main Features

• - App Shell Architecture

• - Service Worker + Navigation Preload (Origin Trial)

• - Add to Home Screen, Splash Screen, Browser Mode, Notify user if site is updated etc,

• - Offline Support

• - Online/Offline Events

• - Fetch API

• - Push Notifications

• - Background Sync

• - Web Share API

Get started with PWA Development

• Codelabs

List of Progressive Web Apps

• PWA Rocks

References

• Google Developer Site

• Web Share API

• Navigation Preload

• Awesome Meta and Manifest

License

MIT © Gokulakrishnan

_{If you found a bug or some improvments, feel free to raise an issue and send a PR!}

demo-progressive-web-app's Issues

update

Github pages demo

Is possible to make an github pages demo?

W3C Markup Validation Service Report (4 errors, 0 warning)

Error

W3C Markup Validation Service Report (4 errors, 0 warning)
at line 44, character 10End tag “div” seen, but there were open elements.
</div>
at line 41, character 29Unclosed element “ul”.
<ul class="menu__list">
at line 53, character 46Element “img” is missing required attribute “src”.
<img alt="avatar" class="card__img">
at line 72, character 54Element “p” not allowed as child of element “h3” in this context. (Suppressing further errors from this subtree.)
<p class="custom__button custom__button-bg">

Waht is it about the "applicationServerKey" and "gcm_sender_id" ?

what do they, and where are they coming from, and how do i get these parameters?

thanks for any advice

failed to build as following the guide.

Describe the bug
A clear and concise description of what the bug is.
failed to build as following the guide.

1. See error
   game@root:~/demo-progressive-web-app$ npm run start

[email protected] start /home/game/demo-progressive-web-app
npm run css && node server.js

[email protected] css /home/game/demo-progressive-web-app
postcss -u autoprefixer -r css/*

events.js:377
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE: address already in use :::3000
at Server.setupListenHandle [as _listen2] (net.js:1331:16)
at listenInCluster (net.js:1379:12)
at Server.listen (net.js:1465:7)
at Function.listen (/home/game/demo-progressive-web-app/node_modules/express/lib/application.js:635:24)
at Object. (/home/game/demo-progressive-web-app/server.js:51:5)
at Module._compile (internal/modules/cjs/loader.js:1114:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:979:32)
at Function.Module._load (internal/modules/cjs/loader.js:819:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
Emitted 'error' event on Server instance at:
at emitErrorNT (net.js:1358:8)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
code: 'EADDRINUSE',
errno: -98,
syscall: 'listen',
address: '::',
port: 3000
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: npm run css && node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/game/.npm/_logs/2023-07-12T04_35_33_334Z-debug.log

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
  No LSB modules are available.
  Distributor ID: Debian
  Description: Debian GNU/Linux 11 (bullseye)
  Release: 11
  Codename: bullseye

game@root:/demo-progressive-web-app$ npm -v
6.14.18
game@root:/demo-progressive-web-app$ node -v
v14.21.3

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

How to create a push notification?

Hi,
thank you for sharing your project here, it helped me to come up with a PWA within minutes.
but now i was wondering on how to create push notifications with your demo app, just to see how it looks and feels...
can you provide me some inputs on how to use this project to create some demo pushs?
thank you

Exception coming on npm run start

events.js:154
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:890:11)
at exports._exceptionWithHostPort (util.js:913:20)
at Server._listen2 (net.js:1234:14)
at listen (net.js:1270:10)
at Server.listen (net.js:1366:5)
at EventEmitter.listen (/Users/techteam/Pwa/demo-progressive-web-app/node_modules/express/lib/application.js:617:24)
at Object. (/Users/techteam/Pwa/demo-progressive-web-app/server.js:51:5)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)

Ionic PWA

Hi man,

What do you think about to use Ionic 2 with Angular 2? :)

Regards, Nicholls

silly question

hey men. meaby it's the right place to ask.
i'm made my own framework to make progressive web apps
i'm super duper with how it works. but i have a issue about deploy
I'm made the same server-side render as you made.
but the question: how I ensure that when enter the url. www.foo.como/
is taking the server.js fisrt to render and not the index.html like it did usualy.??

Thanks

IOS

Hello @gokulkrishh

Curious question, is it possible to run this on IOS and if so how would one do so ?

Thank You,
GuacheSuede

cant work

Hi,
when I test demo-progressive-web-app in my system with change Github Url in app.js page I can get some error and responce not getting?
Look my code is:

In App.js ->
var name = username || 'gokulkrishh';
//var url = 'https://api.github.com/users/' + name;
var url = 'https://test.com';

any Idea?

Thanks

How to Install

Hello, thank you for the warehouse. Is there a tutorial for this pwa repository? Should I put all the files in the main directory? I'm trying to run this on a wordpress site. I do not know how to do it. Can you help me?

Clarification sw

https://github.com/annamalai-saro/demo-progressive-web-app/blob/master/serviceWorker.js#L65-L69

I think the code should be

caches.open(staticCache).then(function(cache) {
     cache.put(request, response.clone());
});

return response;

then at https://github.com/annamalai-saro/demo-progressive-web-app/blob/master/serviceWorker.js#L56

event.respondWith is missing ...

Sorry ..Please correct me if I am wrong ...