{"id":13716215,"url":"https://github.com/webpack/webpack-pwa","last_synced_at":"2025-04-04T17:09:12.116Z","repository":{"id":65978460,"uuid":"80039093","full_name":"webpack/webpack-pwa","owner":"webpack","description":"Example for a super simple PWA with webpack.","archived":false,"fork":false,"pushed_at":"2019-09-20T15:25:59.000Z","size":400,"stargazers_count":811,"open_issues_count":4,"forks_count":52,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-29T14:57:57.633Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webpack.github.io/webpack-pwa/page-shell/dashboard.html","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/webpack.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}},"created_at":"2017-01-25T17:37:23.000Z","updated_at":"2024-10-14T23:02:57.000Z","dependencies_parsed_at":"2023-02-19T19:00:32.700Z","dependency_job_id":null,"html_url":"https://github.com/webpack/webpack-pwa","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/webpack%2Fwebpack-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack","download_url":"https://codeload.github.com/webpack/webpack-pwa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217214,"owners_count":20903009,"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-08-03T00:01:08.165Z","updated_at":"2025-04-04T17:09:12.099Z","avatar_url":"https://github.com/webpack.png","language":"JavaScript","readme":"# webpack-pwa\n\nSuper simple webpack PWA(Progressive Web App) example featuring\n\n* Routing with **On Demand Loading**\n* Offline support\n* Fetching some data from network\n* Two approaches\n  * App Shell\n  * Page Shell\n* By intent: No framework, only simple JavaScript and DOM\n  * Yes with `innerHTML` and `innerText`\n  * Feel free to imagine your favorite framework here.\n\n## Build and Run it\n\n``` shell\nnpm install\nnpm run build-shell\ncd dist\nnpm install node-static -g\nstatic\nopen http://localhost:8080/dashboard.html\n```\n\nThis builds the App Shell version.\n\nTo build the Page Shell version: replace `npm run build-shell` with `npm run build-page`.\n\n## Architecture\n\n![app shell vs page shell](images/app-vs-page-shell.png)\n\n### App Shell\n\n* Total size is smaller\n* Initial load requests three files: `login.html`, `shell-1234.js`, `3456.js`\n* Initial load needs to load: Shell + Router + content\n* The shell is visible earlier than with Page Shell approach.\n\n### Page Shell\n\n* Total size is bigger (i. e. dashboard content is in `dashboard-1234.js` and `4567.js`)\n  * App takes longer to be offline ready.\n* Initial load requests only two files: `login.html`, `login-2345.js`\n* Initial load needs to load: Shell + content\n* The shell + content is visible earlier than with App Shell approach.\n\nA hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fwebpack-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack%2Fwebpack-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fwebpack-pwa/lists"}