{"id":13406526,"url":"https://github.com/ionic-team/ionic-pwa-toolkit","last_synced_at":"2025-10-05T22:30:48.010Z","repository":{"id":28080839,"uuid":"114666900","full_name":"ionic-team/ionic-pwa-toolkit","owner":"ionic-team","description":"Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).","archived":true,"fork":false,"pushed_at":"2022-01-24T18:22:11.000Z","size":613,"stargazers_count":635,"open_issues_count":17,"forks_count":74,"subscribers_count":48,"default_branch":"master","last_synced_at":"2024-09-26T09:03:01.370Z","etag":null,"topics":["ionic","ionic-framework","pwa","pwa-apps","web-components"],"latest_commit_sha":null,"homepage":"","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/ionic-team.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}},"created_at":"2017-12-18T17:05:47.000Z","updated_at":"2024-09-11T14:23:36.000Z","dependencies_parsed_at":"2022-07-27T12:17:36.446Z","dependency_job_id":null,"html_url":"https://github.com/ionic-team/ionic-pwa-toolkit","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/ionic-team%2Fionic-pwa-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fionic-pwa-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fionic-pwa-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fionic-pwa-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ionic-team","download_url":"https://codeload.github.com/ionic-team/ionic-pwa-toolkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877065,"owners_count":16554821,"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":["ionic","ionic-framework","pwa","pwa-apps","web-components"],"created_at":"2024-07-30T19:02:32.677Z","updated_at":"2025-10-05T22:30:42.744Z","avatar_url":"https://github.com/ionic-team.png","language":"TypeScript","readme":"# Ionic PWA Toolkit\n\nThe PWA Toolkit is a starting point for building Progressive Web Apps using Ionic and Stencil.\nThis combination of tools gives you the ability to build a fast, efficient PWA out of the box.\n\nFor more info check out our [homepage](https://ionicframework.com/pwa/toolkit)!\n\n## Features\n\n* `@ionic/core` for the UI.\n* Stencil for the application logic and routing\n* Push Notifications setup\n* Unit Tests\n* Pre-rendering\n* Lazy-loading and code splitting\n* Intelligent Polyfills\n* Modern mode: ES6/ESM for new browser, ES5 for older\n* Service Worker, App manifest, iOS meta tags\n* Theming using CSS variables\n\n## Getting Started\n\nTo start building, clone this repo to a new directory:\n\n```bash\nnpm init stencil ionic-pwa\n```\n\n\n## Production\n\nTo build for production, run:\n\n```bash\nnpm run build\n```\n\nA production build includes:\n\n* Minified code bundles\n* Generated Service workers\n* App manifest\n\n## Hosting\n\nApps should be hosted on through HTTPS, and if possible, through a provider that supports HTTP2.\nOne provider that does support this is [Firebase Hosting](https://firebase.google.com/docs/hosting/).\n\n## H2 Push\n\nWe recommend setting up HTTP2 Push on Firebase. H2 Push may sound complicated, but it's actually a simple concept. To learn about it, take a look at this [article](https://en.wikipedia.org/wiki/HTTP/2_Server_Push).\n\nTo set this up for `my-app`:\n\n* Do a production build of the app: `npm run build`\n* Serve your WWW folder locally using a local http server and open in your browser.\n  * https://www.npmjs.com/package/http-server works pretty well for this. You can serve your www folder by running `http-server www`.\n* Open the DevTools and look at the network tab.\n  * Reload the page and you should see all of your files show up in the network tab. Excluding the `sw.js` file, these are the files you want to H2 push.\n* List these files in the link headers of your firebase.json file. For a syntax reference, review this [article](https://w3c.github.io/preload/#server-push-http-2)\n\n## Service Workers\n\nService workers are generated via the Stencil build tool. For more information on how they can be configured, see the [Service Worker docs](https://stenciljs.com/docs/service-workers).\n\n## Developing with a Service Worker\n\nFor most cases, you'll want to develop your app without generating a Service Worker. But if you'd like to test out Web Push Notifications or Background Sync, you'll need to have one generated. To generate a Service Worker during dev builds, we've added the npm script:\n\n```\nnpm run start.sw\n```\n\nThis will start a dev build and generate a Service Worker as well.\n\n## Unit Tests\n\nTo run the unit tests once, run:\n\n```bash\nnpm test\n```\n\nTo run the unit tests and watch for file changes during development, run:\n\n```bash\nnpm run test.watch\n```\n\n## Testing your PWA's performance\n\nWe recommend using https://www.webpagetest.org/easy with the `Run Lighthouse Audit` option turned on.\nThis will give you an in depth look into your app's load performance on the average device connected to the average network.\nFor more info on how to use webpagetest check out [this article](https://zoompf.com/blog/2015/07/the-seo-experts-guide-to-web-performance-using-webpagetest-2)\n","funding_links":[],"categories":["TypeScript","Starter Kits \u0026 Templates"],"sub_categories":["Ionic Official"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionic-team%2Fionic-pwa-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fionic-team%2Fionic-pwa-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionic-team%2Fionic-pwa-toolkit/lists"}