mdn / pwa-examples Goto Github PK

View Code? Open in Web Editor NEW

900.0 41.0 603.0 1.75 MB

Examples for progressive web apps.

License: Creative Commons Zero v1.0 Universal

HTML 22.65% JavaScript 65.73% CSS 11.62%

pwa-examples's Introduction

PWA Examples

Examples for progressive web apps.

In this repo, we currently have:

CycleTracker: A basic app for tracking menstrual cycles. The app's HTML includes a form to add a period cycle start and end dates. The JavaScript app functionality sorts the dates and saves thems to local storage. It also displays the dates retrieved from local storage below the form. The app includes a manifest file with three icons, color scheme, etc. The app also includes a service worker to handle asset caching.
a2hs: An example set up to show how Add to home screen (A2HS) works. See it live here. This includes an icon and manifest file for allowing the app to be added to home screen, and a simple service worker for making the site work offline.
js13kpwa: A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps. The js13kPWA have the App Shell structure, works offline with the Service Worker, is installable thanks to the Manifest file and Add to Homescreen feature, and is re-engageable by using Notifications and Push. See it live here.

pwa-examples's People

Contributors

Stargazers

Watchers

Forkers

lokendrakumar danood jingchangxiao moinhasan pradeepverse sp9usb leimportant schubertyann resilientred zenmilan end3r ananya vmonster samuel-sobrino fenris85 kublaj uzbekdev1 qpanweb alinembl badlander atwood195 vlahx yurimorales dungagan ahmedobi sayonara90s csarami maquistemas laiyongqin tecfelipedsmartins itangsanjana kaushikkapil8750 jorgefigueroa txemis asmhan dzhagon crazyrex onlyliving tutd9x oliverlulembo tcbuddy code-goblin captn3m0 onurmutlu aramoscoren ioasis rooleary ctsanders1 caionalves nhutle dyoungwd pungprakearti mhdsyarif billy19353 diodedan koaben dariye panfi alishedeed vij4yk koyowe shijiajs elycheikhsmail imkrish7 obaaa8 naushadali789 akad90 belecona tiennvhp agampradhana cloned-repos prathibhacdac mozilla-github-standards ethanliew snehal1112 chadsconway webiscool dmitry-pogorelov dsamuels1020 franck30 jessonliou pizitai tb-j alfvlx gx110ewings zrrxy chadingtv paulfels igeranazgul tammerg jncompany suiznris rogerio632 general44dev beatrizelena trashoid mrthomas108 randomminds sumonst21 magnocat

pwa-examples's Issues

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

a2hs does not work on iPhone

Lighthouse PWA score below 100

This is the MDN example of a PWA. Surely the score should be continuously monitored and updated to show 100 in a Lighthouse Audit.

Cycletracker service worker not working

When I open /service_workers/index.html, I always see an error "sw.js:1 Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Request failed" in console, and it does not cache any data.

Probably, the name of file name in APP_STATIC_RESOURCES is wrong(styles.css -> style.css).

A2HS bug on desktop

I think there is some bug in your A2HS demo. It does not show any Add to Homescreen button in the latest Firefox for desktop. Not even in the latest Chrome.

Why doesn't it work on other domains?

I just wanted to test your example on another domain (https://matchflix.ch/@test/), I copied all the files (except the images) 1:1 and updated the path in the manifest and sw.js but it doesn't work. Do you know why? It works on https://mdn.github.io/pwa-examples/a2hs/

Thank you very much in advance for your appreciated advice.

Best
Simon

Conflicts with Apache2 default alias

This is a reminder for Apache2 user.
Apache has a default alias for /icons/ that points to a directory used by Apache to serve icons. This could be causing conflicts with icons subdirectory.

Why not use a JSON file for the manifest?

It seems strange to me that the extension for the file needs to be .webmanifest when there are already a ton of sites with all the same metadata as is required, but in their manifest.json files. Are .webmanifest and .json interchangeable for this to work? if not, I think they should be as you'd be causing duplication of files.

Add to home screen does not appear

In firefox the button for install(Add to home screen) does not appear, I'm using Firefox 80.0.1 (64-bit) in ubuntu 18.04, I think the reason is that the beforeinstallprompt event is no firing