{"id":20252429,"url":"https://github.com/ivandotv/nextjs-material-pwa","last_synced_at":"2025-07-29T00:05:54.322Z","repository":{"id":37429705,"uuid":"287817276","full_name":"ivandotv/nextjs-material-pwa","owner":"ivandotv","description":"Template for creating progressive web apps with MaterialUI, Next.js and Workbox","archived":false,"fork":false,"pushed_at":"2025-07-28T21:02:49.000Z","size":6515,"stargazers_count":58,"open_issues_count":18,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-28T23:08:26.860Z","etag":null,"topics":["material-ui","nextjs","nextjs-starter","pwa","pwa-example","workbox","workbox-webpack-plugin","workboxjs"],"latest_commit_sha":null,"homepage":"https://material-pwa.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivandotv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2020-08-15T20:08:02.000Z","updated_at":"2025-06-10T20:52:48.000Z","dependencies_parsed_at":"2023-01-31T11:15:34.455Z","dependency_job_id":"0ceb93c6-16e8-4fd6-9170-02e912b1579a","html_url":"https://github.com/ivandotv/nextjs-material-pwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/ivandotv/nextjs-material-pwa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivandotv%2Fnextjs-material-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivandotv%2Fnextjs-material-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivandotv%2Fnextjs-material-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivandotv%2Fnextjs-material-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivandotv","download_url":"https://codeload.github.com/ivandotv/nextjs-material-pwa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivandotv%2Fnextjs-material-pwa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267605947,"owners_count":24114619,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["material-ui","nextjs","nextjs-starter","pwa","pwa-example","workbox","workbox-webpack-plugin","workboxjs"],"created_at":"2024-11-14T10:16:41.518Z","updated_at":"2025-07-29T00:05:54.221Z","avatar_url":"https://github.com/ivandotv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nextjs Material UI Progressive Web App (PWA) Template\n\nTemplate for creating progressive web apps with [MaterialUI](https://mui.com/), [Next.js](https://nextjs.org/) and [Workbox](https://developer.chrome.com/docs/workbox/)\n\nWorking demo: https://material-pwa.vercel.app/\n\n\u003c!-- toc --\u003e\n\n- [Motivation](#motivation)\n- [Layout](#layout)\n- [Theming](#theming)\n- [Onboarding slideshow](#onboarding-slideshow)\n- [Service worker](#service-worker)\n  * [service worker setup](#service-worker-setup)\n  * [offline fallback](#offline-fallback)\n  * [installation prompt](#installation-prompt)\n  * [app shortcuts](#app-shortcuts)\n- [Custom Babel.js config](#custom-babeljs-config)\n- [Future](#future)\n- [Blog post](#blog-post)\n- [Useful links](#useful-links)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Motivation\n\nSetting up PWA's involves a lot of moving parts, so I've decided to create a template repository, that I would always keep up to date, and it will enable me to get started quickly.\n\n## Layout\n\nThe application supports both desktop and mobile layouts.\n\nThe desktop layout has a sidebar on the left side that can open and close.\n![desktop layout](./doc-assets/desktop-layout.gif)\n\nThe mobile layout has two options.\n\n- Traditional layout with a sidebar that can be swiped to open/close\n\n![mobile layout](./doc-assets/mobile-layout.gif)\n\n- Modern layout where menu items are at the bottom\n\n![mobile layout bottom](./doc-assets/mobile-bottom-menu.gif)\n\n## Theming\n\n- There are two themes dark and light, and they can easily be customized.\n\n## Onboarding slideshow\n\nI've also included an onboarding slideshow which is usually present in native apps. This is optional and it can easily be removed.\n\nhttps://user-images.githubusercontent.com/390700/174054384-3eeb975b-c39a-414a-a93c-48f6fbfefd7b.mp4\n\n## Service worker\n\nThe real hard part of creating pwa's is service worker integration, both in the build process and in production.\nService worker functionality is implemented with the excellent [Workbox library](https://developer.chrome.com/docs/workbox/)\n\n### service worker setup\n\n- Service worker [`sw.js`](./src/lib/client/service-worker/sw.ts) is written in Typescript and it will be compiled together with the rest of the code. The service worker will precache all the routes, images, CSS, and google fonts. Every time the app is built new cache manifest is created.\n\nWhen the service worker is installed, the application will show a prompt to reload the application so the new service worker can take over.\n\n### offline fallback\n\nOffline fallback is provided, if `navigation` happens when there is no network access, the fallback page will be shown. Please note that the fallback files must be pure html,css, and js (no react, or css-in-js libraries). Fallback files need to be placed in the `public` directory.\n\nAlso, there is `network offline` detection, if the browser loses network connection, there will be a notification inside the app that the application is offline. You can test this via the Chrome dev tools network tab.\n\n### installation prompt\n\nThe application also has a custom prompt for the installation of the app. Please note that the installation prompt only works on the desktop OS'es and Android, no IOS.\n\n### app shortcuts\n\nThe application also has set some demo shortcuts which show up if the application is installed. You can read more about PWA Shortcuts at [Get things done quickly with app shortcuts](https://web.dev/app-shortcuts/)\n\n![pwa shortcuts](./doc-assets/shortcuts.gif)\n\n## Custom Babel.js config\n\nThere is a custom babel configuration, that enables you to have a couple of custom `env` var that can be used when compiling the application:\n\n- `__VERSION__`: app version, taken from `package.json` version,\n- `__DEV__`: `true` if the application is running in dev mode\n- `__BUILD_DATE__`: app build date taken from the git commit\n- `__COMMIT_SHA__`: git commit sha\n- `__BRANCH__`: branch name,\n- `__COMMIT_MESSAGE__`: git commit message\n\nIf you don't need these `env` variables, you can remove the babel config and use [Next.js compiler](https://nextjs.org/docs/advanced-features/compiler) which will increase compilation speed.\n\n## Future\n\nThis template will be kept up to date. In the future, I might create similar templates for [Mantine library](https://mantine.dev/) and [Chakra-UI](https://chakra-ui.com/)\n\nIf you have suggestions on how this process could be improved, feel free to open an issue or pull a request.\n\n## Blog post\n\nI will eventually write a blog post detailing the whole setup process. You can follow me on [Twitter](https://twitter.com/iki_xx) or on [Dev.to](https://dev.to/ivandotv)\nto be notified of new blog posts.\n\n## Useful links\n\nIf you want to learn more about how to create progressive web apps with a great user experience, check out these links:\n\n- [learn pwa](https://web.dev/learn/pwa/)\n- [30 days of PWA](https://blogs.windows.com/msedgedev/2022/04/14/30-days-of-pwa-fall-in-love-with-progressive-web-apps/)\n- [service worker lifecycle](https://web.dev/service-worker-lifecycle/)\n- [pwa icon generator](https://maskable.app/)\n- [responsively application](https://responsively.app/)\n- [samsung remote test lab](https://developer.samsung.com/remote-test-lab)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n\nImage credits [flexiple.com](https://2.flexiple.com/scale/all-illustrations?search=app)\n\nSlideshow images: [pixeltrue.com](https://www.pixeltrue.com/free-packs/lined-illustrations)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivandotv%2Fnextjs-material-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivandotv%2Fnextjs-material-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivandotv%2Fnextjs-material-pwa/lists"}