{"id":17987792,"url":"https://github.com/dirkluijk/rolling-ball-workshop","last_synced_at":"2025-04-04T03:23:35.682Z","repository":{"id":72723195,"uuid":"170371555","full_name":"dirkluijk/rolling-ball-workshop","owner":"dirkluijk","description":null,"archived":false,"fork":false,"pushed_at":"2019-02-12T18:44:28.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-09T15:11:29.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dirkluijk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-12T18:44:12.000Z","updated_at":"2019-02-12T18:44:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"d9ef8cc8-bb28-48de-9aad-c3e342918bf6","html_url":"https://github.com/dirkluijk/rolling-ball-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Frolling-ball-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Frolling-ball-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Frolling-ball-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Frolling-ball-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirkluijk","download_url":"https://codeload.github.com/dirkluijk/rolling-ball-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247114197,"owners_count":20885893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T19:09:39.699Z","updated_at":"2025-04-04T03:23:35.666Z","avatar_url":"https://github.com/dirkluijk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rolling Ball\n\nLet's make a PWA of this game!\n\n## Preparations\n\nTo make this app fully progressive, it needs to be served over HTTPS. Let's use \nGoogle Firebase hosting for that!\n\n1. Create a project for yourself at [Google Firebase](https://console.firebase.google.com)\n2. Install the [Firebase CLI](https://firebase.google.com/docs/cli/)\n3. Run `firebase init` in this project. Choose \"Hosting\" and use the current directory (`.`)\nas web directory (instead of the default `public` path).\n\nNow you can serve the app locally with `firebase serve`. You can deploy the app to a HTTPS environment using `firebase deploy`.\n\nYou can test the PWA features using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) in Chrome Devtools. \n\n## A. Service Worker support\n\nThis part can be done locally. Use `firebase serve` to run the app locally.\n\n1. Register the service worker in `app.js`. Check in your Devtools if it is being registered correctly.\n2. Prefetch all the required assets (`/`, `/style.css`, `/app.js`) on `install`. Check in your Devtools if the assets \n    are added to the application cache.\n3. Now serve the cached assets from cache, on the `fetch` event. Check if the app works offline.\n4. All right, you made it so far! Now it would be nice to update the pre-fetched assets when there are updates.\n    You can check it by changing something in `index.html`, without changing the service worker, and see if it is updated \n    in the cache on refresh (and being served after a second refresh).\n\n    \nA bonus exercise: support different caches per service worker instance. I recommend doing exercise B first!\n\n- You need a different cache name per instance.\n- On `activate` of the new service worker, it should cleanup the old caches.\n- The new service worker is being activated when all tabs are closed.  \n\n## B. App Manifest\n\n1. Add a app `manifest.json`. You can use [App Manifest Generator](https://app-manifest.firebaseapp.com/) for that.\n2. Register it using `\u003clink rel=\"manifest\" href=\"manifest.json\"\u003e`. You might also want to add `\u003cmeta name=\"theme-color\" content=\"yourhexcolorhere\"\u003e`.\n3. Validate your manifest using Chrome Lighthouse.\n\nFor iOS, some manifest options are ignored / not implemented yet. You the following metatags to make it work on iOS \n(replace the values!).\n\n```\n\u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u003e\n\u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"your hex color here\"\u003e\n\u003cmeta name=\"apple-mobile-web-app-title\" content=\"your app name here\"\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"images/icons/icon-152x152.png\"\u003e\n```\n\n## Deploy and test it!\n\nNow deploy using `firebase deploy`. On both iOS and Android you should be able to add it to your homescreen and use it offline.\nOn Android, the PWA will be detected, and a popup should automatically show up within 30 seconds. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirkluijk%2Frolling-ball-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirkluijk%2Frolling-ball-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirkluijk%2Frolling-ball-workshop/lists"}