{"id":23088192,"url":"https://github.com/jrquick17/ng-speed-test","last_synced_at":"2025-07-07T02:33:06.169Z","repository":{"id":40658742,"uuid":"241514495","full_name":"jrquick17/ng-speed-test","owner":"jrquick17","description":"A light weight Angular 2+ library for checking internet speed","archived":false,"fork":false,"pushed_at":"2025-06-21T21:39:16.000Z","size":34904,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-21T21:46:11.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ng-speed-test.jrquick.com","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/jrquick17.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-02-19T02:28:11.000Z","updated_at":"2025-06-21T21:39:18.000Z","dependencies_parsed_at":"2025-05-22T19:09:33.493Z","dependency_job_id":null,"html_url":"https://github.com/jrquick17/ng-speed-test","commit_stats":{"total_commits":193,"total_committers":4,"mean_commits":48.25,"dds":0.3575129533678757,"last_synced_commit":"ea9d74406bb61ab7b2660c3c711c9d0369bca269"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/jrquick17/ng-speed-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrquick17%2Fng-speed-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrquick17%2Fng-speed-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrquick17%2Fng-speed-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrquick17%2Fng-speed-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jrquick17","download_url":"https://codeload.github.com/jrquick17/ng-speed-test/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrquick17%2Fng-speed-test/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264001970,"owners_count":23542355,"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-12-16T20:16:11.912Z","updated_at":"2025-07-07T02:33:06.163Z","avatar_url":"https://github.com/jrquick17.png","language":"TypeScript","readme":"# ng-speed-test\n\n[![npm version](https://img.shields.io/npm/v/ng-speed-test.svg)](https://www.npmjs.com/package/ng-speed-test)\n[![npm license](https://img.shields.io/npm/l/ng-speed-test.svg)](https://www.npmjs.com/package/ng-speed-test/)\n[![npm downloads](https://img.shields.io/npm/dt/ng-speed-test.svg)](https://www.npmjs.com/package/ng-speed-test)\n[![npm monthly downloads](https://img.shields.io/npm/dm/ng-speed-test.svg)](https://www.npmjs.com/package/ng-speed-test)\n[![Angular](https://img.shields.io/badge/Angular-16%2B-red.svg)](https://angular.io/)\n\nA modern, lightweight Angular library for testing internet connection speed with built-in network monitoring.\n\n🚀 **[Try the Live Demo](https://ng-speed-test.jrquick.com)**\n\n![Speed Test Demo](example.gif)\n\n## ✨ Features\n\n- 🎯 **Accurate Speed Testing** - Uses multiple iterations for reliable results\n- 🔄 **Network Status Monitoring** - Real-time online/offline detection\n- ⚡ **Modern Fetch API** - Better performance and error handling\n- 🎨 **TypeScript Support** - Full type definitions included\n- 📱 **Mobile Friendly** - Works on all devices and browsers\n- 🔧 **Highly Configurable** - Customize file sizes, iterations, and retry logic\n- 🆕 **Angular 16-20 Compatible** - Works with latest Angular versions\n\n## 📋 Table of Contents\n\n- [Installation](#-installation)\n- [Quick Start](#-quick-start)\n- [Configuration](#-configuration)\n- [API Reference](#-api-reference)\n- [Examples](#-examples)\n- [Browser Support](#-browser-support)\n- [Contributing](#-contributing)\n\n## 🚀 Installation\n\n```bash\nnpm install ng-speed-test --save\n```\n\n## ⚡ Quick Start\n\n### 1. Import the Module\n\nAdd `SpeedTestModule` to your app module:\n\n```typescript\nimport { SpeedTestModule } from 'ng-speed-test';\n\n@NgModule({\n  imports: [\n    SpeedTestModule\n  ],\n})\nexport class AppModule { }\n```\n\n### 2. Inject the Service\n\n```typescript\nimport { Component } from '@angular/core';\nimport { SpeedTestService } from 'ng-speed-test';\n\n@Component({\n  selector: 'app-speed-test',\n  template: `\n    \u003cdiv\u003e\n      \u003cbutton (click)=\"runSpeedTest()\" [disabled]=\"isLoading\"\u003e\n        {{ isLoading ? 'Testing...' : 'Test Speed' }}\n      \u003c/button\u003e\n      \u003cdiv *ngIf=\"speedResult\"\u003e\n        Your speed: {{ speedResult.mbps | number:'1.2-2' }} Mbps\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `\n})\nexport class SpeedTestComponent {\n  isLoading = false;\n  speedResult: any;\n\n  constructor(private speedTestService: SpeedTestService) {}\n\n  runSpeedTest() {\n    this.isLoading = true;\n    \n    this.speedTestService.getSpeedTestResult().subscribe({\n      next: (result) =\u003e {\n        this.speedResult = result;\n        this.isLoading = false;\n      },\n      error: (error) =\u003e {\n        console.error('Speed test failed:', error);\n        this.isLoading = false;\n      }\n    });\n  }\n}\n```\n\n## 🛠️ Configuration\n\n### Basic Configuration\n\n```typescript\nconst customSettings = {\n  iterations: 5,           // Run 5 tests for better accuracy\n  retryDelay: 1000,       // Wait 1 second between retries\n  file: {\n    path: 'https://example.com/test-file.jpg',\n    size: 1048576,        // 1MB in bytes\n    shouldBustCache: true // Prevent browser caching\n  }\n};\n\nthis.speedTestService.getMbps(customSettings).subscribe(speed =\u003e {\n  console.log(`Speed: ${speed} Mbps`);\n});\n```\n\n### Available Test Files\n\nPre-configured test files hosted on GitHub:\n\n| Size | Actual Size (bytes) | URL |\n|------|-------------------|-----|\n| 500KB | 408,949 | `https://raw.githubusercontent.com/jrquick17/ng-speed-test/.../500kb.jpg` |\n| 1MB | 1,197,292 | `https://raw.githubusercontent.com/jrquick17/ng-speed-test/.../1mb.jpg` |\n| **5MB** | 4,952,221 | `https://raw.githubusercontent.com/jrquick17/ng-speed-test/.../5mb.jpg` *(default)* |\n| 13MB | 13,848,150 | `https://raw.githubusercontent.com/jrquick17/ng-speed-test/.../13mb.jpg` |\n\n## 📚 API Reference\n\n### Core Methods\n\n#### `getSpeedTestResult(settings?)`\nReturns comprehensive speed test results with duration info.\n\n```typescript\nthis.speedTestService.getSpeedTestResult().subscribe(result =\u003e {\n  console.log('Speed:', result.mbps, 'Mbps');\n  console.log('Duration:', result.duration, 'seconds');\n  console.log('Bits per second:', result.bps);\n  console.log('Kilobits per second:', result.kbps);\n});\n```\n\n#### `getMbps(settings?)`\nGet speed in megabits per second.\n\n```typescript\nthis.speedTestService.getMbps().subscribe(speed =\u003e {\n  console.log('Speed:', speed, 'Mbps');\n});\n```\n\n#### `getKbps(settings?)`\nGet speed in kilobits per second.\n\n```typescript\nthis.speedTestService.getKbps().subscribe(speed =\u003e {\n  console.log('Speed:', speed, 'Kbps');\n});\n```\n\n#### `getBps(settings?)`\nGet speed in bits per second.\n\n```typescript\nthis.speedTestService.getBps().subscribe(speed =\u003e {\n  console.log('Speed:', speed, 'bps');\n});\n```\n\n### Network Monitoring\n\n#### `isOnline()`\nCheck network connectivity.\n\n```typescript\nthis.speedTestService.isOnline().subscribe(isOnline =\u003e {\n  if (!isOnline) {\n    console.log('No internet connection');\n  }\n});\n```\n\n#### `getNetworkStatus()`\nGet detailed network information (when available).\n\n```typescript\nthis.speedTestService.getNetworkStatus().subscribe(status =\u003e {\n  console.log('Online:', status.isOnline);\n  console.log('Connection type:', status.effectiveType); // '4g', 'wifi', etc.\n  console.log('Downlink speed:', status.downlink); // Estimated speed\n});\n```\n\n### Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `iterations` | number | 3 | Number of tests to run for averaging |\n| `retryDelay` | number | 500 | Milliseconds to wait between retries |\n| `file.path` | string | GitHub 5MB image | URL of test file |\n| `file.size` | number | 4,952,221 | File size in bytes |\n| `file.shouldBustCache` | boolean | true | Add cache-busting parameter |\n\n## 💡 Examples\n\n### Advanced Speed Test with Progress\n\n```typescript\nimport { Component } from '@angular/core';\nimport { SpeedTestService } from 'ng-speed-test';\n\n@Component({\n  template: `\n    \u003cdiv class=\"speed-test\"\u003e\n      \u003ch2\u003eInternet Speed Test\u003c/h2\u003e\n      \n      \u003c!-- Network Status --\u003e\n      \u003cdiv class=\"status\" [class.online]=\"isOnline\"\u003e\n        Status: {{ isOnline ? 'Online' : 'Offline' }}\n      \u003c/div\u003e\n      \n      \u003c!-- Test Controls --\u003e\n      \u003cdiv class=\"controls\"\u003e\n        \u003cselect [(ngModel)]=\"selectedSize\"\u003e\n          \u003coption value=\"500kb\"\u003e500 KB Test\u003c/option\u003e\n          \u003coption value=\"1mb\"\u003e1 MB Test\u003c/option\u003e\n          \u003coption value=\"5mb\" selected\u003e5 MB Test\u003c/option\u003e\n          \u003coption value=\"13mb\"\u003e13 MB Test\u003c/option\u003e\n        \u003c/select\u003e\n        \n        \u003cinput type=\"number\" [(ngModel)]=\"iterations\" \n               min=\"1\" max=\"10\" placeholder=\"Iterations\"\u003e\n        \n        \u003cbutton (click)=\"runTest()\" [disabled]=\"isRunning\"\u003e\n          {{ isRunning ? 'Testing...' : 'Start Test' }}\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \n      \u003c!-- Progress --\u003e\n      \u003cdiv *ngIf=\"isRunning\" class=\"progress\"\u003e\n        \u003cdiv class=\"progress-bar\"\u003e\n          \u003cdiv class=\"fill\" [style.width.%]=\"progress\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cp\u003e{{ progressText }}\u003c/p\u003e\n      \u003c/div\u003e\n      \n      \u003c!-- Results --\u003e\n      \u003cdiv *ngIf=\"lastResult\" class=\"results\"\u003e\n        \u003ch3\u003eResults\u003c/h3\u003e\n        \u003cdiv class=\"result-grid\"\u003e\n          \u003cdiv class=\"result-item\"\u003e\n            \u003cstrong\u003e{{ lastResult.mbps | number:'1.2-2' }}\u003c/strong\u003e\n            \u003cspan\u003eMbps\u003c/span\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"result-item\"\u003e\n            \u003cstrong\u003e{{ lastResult.kbps | number:'1.0-0' }}\u003c/strong\u003e\n            \u003cspan\u003eKbps\u003c/span\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"result-item\"\u003e\n            \u003cstrong\u003e{{ lastResult.duration | number:'1.2-2' }}\u003c/strong\u003e\n            \u003cspan\u003eseconds\u003c/span\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  styles: [`\n    .speed-test { max-width: 600px; margin: 0 auto; padding: 20px; }\n    .status { padding: 10px; border-radius: 5px; margin-bottom: 20px; }\n    .status.online { background: #d4edda; color: #155724; }\n    .controls { display: flex; gap: 10px; margin-bottom: 20px; }\n    .progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; }\n    .fill { height: 100%; background: #007bff; transition: width 0.3s; }\n    .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }\n    .result-item { text-align: center; padding: 15px; background: #f8f9fa; border-radius: 5px; }\n  `]\n})\nexport class AdvancedSpeedTestComponent {\n  isOnline = true;\n  isRunning = false;\n  progress = 0;\n  progressText = '';\n  lastResult: any = null;\n  selectedSize = '5mb';\n  iterations = 3;\n\n  private fileSizes = {\n    '500kb': { size: 408949, path: 'https://raw.githubusercontent.com/.../500kb.jpg' },\n    '1mb': { size: 1197292, path: 'https://raw.githubusercontent.com/.../1mb.jpg' },\n    '5mb': { size: 4952221, path: 'https://raw.githubusercontent.com/.../5mb.jpg' },\n    '13mb': { size: 13848150, path: 'https://raw.githubusercontent.com/.../13mb.jpg' }\n  };\n\n  constructor(private speedTestService: SpeedTestService) {\n    // Monitor network status\n    this.speedTestService.isOnline().subscribe(status =\u003e {\n      this.isOnline = status;\n    });\n  }\n\n  runTest() {\n    if (!this.isOnline) return;\n\n    this.isRunning = true;\n    this.progress = 0;\n    this.progressText = 'Initializing...';\n\n    const fileConfig = this.fileSizes[this.selectedSize];\n    const settings = {\n      iterations: this.iterations,\n      file: {\n        path: fileConfig.path,\n        size: fileConfig.size,\n        shouldBustCache: true\n      }\n    };\n\n    // Simulate progress\n    const progressInterval = setInterval(() =\u003e {\n      if (this.progress \u003c 90) {\n        this.progress += Math.random() * 10;\n        this.progressText = `Testing... ${Math.floor(this.progress)}%`;\n      }\n    }, 200);\n\n    this.speedTestService.getSpeedTestResult(settings).subscribe({\n      next: (result) =\u003e {\n        clearInterval(progressInterval);\n        this.progress = 100;\n        this.progressText = 'Complete!';\n        this.lastResult = result;\n        this.isRunning = false;\n      },\n      error: (error) =\u003e {\n        clearInterval(progressInterval);\n        console.error('Test failed:', error);\n        this.isRunning = false;\n      }\n    });\n  }\n}\n```\n\n### Simple Network Monitor\n\n```typescript\n@Component({\n  template: `\n    \u003cdiv [class]=\"networkStatus.isOnline ? 'online' : 'offline'\"\u003e\n      {{ networkStatus.isOnline ? 'Connected' : 'Disconnected' }}\n      \u003cspan *ngIf=\"networkStatus.effectiveType\"\u003e\n        ({{ networkStatus.effectiveType }})\n      \u003c/span\u003e\n    \u003c/div\u003e\n  `\n})\nexport class NetworkMonitorComponent {\n  networkStatus = { isOnline: true, effectiveType: null };\n\n  constructor(private speedTestService: SpeedTestService) {\n    this.speedTestService.getNetworkStatus().subscribe(status =\u003e {\n      this.networkStatus = status;\n    });\n  }\n}\n```\n\n## 🌐 Browser Support\n\n- **Chrome** 60+\n- **Firefox** 55+\n- **Safari** 12+\n- **Edge** 79+\n- **Mobile browsers** with Fetch API support\n\n## 🔧 Angular Compatibility\n\n| ng-speed-test | Angular |\n|---------------|---------|\n| 3.x | 16, 17, 18, 19, 20 |\n| 2.x | 12, 13, 14, 15 |\n| 1.x | 8, 9, 10, 11 |\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**CORS Errors**\n- Use the provided test files or ensure your custom files have proper CORS headers\n- GitHub-hosted test files are CORS-enabled\n\n**Inaccurate Results**\n- Increase `iterations` for better accuracy (recommended: 5-10)\n- Use appropriate file sizes (1-5MB for most connections)\n- Ensure stable network during testing\n\n**TypeScript Errors**\n- Make sure you're importing from `'ng-speed-test'`\n- Check that your Angular version is compatible\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/jrquick17/ng-speed-test.git\n\n# Install dependencies\nnpm install\n\n# Run the demo\nnpm run demo\n\n# Build the library\nnpm run build\n\n# Run tests\nnpm run test\n```\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Created by [Jeremy Quick](https://jrquick.com)\n- Inspired by the need for reliable network testing in Angular applications\n- Thanks to all [contributors](https://github.com/jrquick17/ng-speed-test/graphs/contributors)\n\n## 🔗 Links\n\n- [Live Demo](https://ng-speed-test.jrquick.com)\n- [GitHub Repository](https://github.com/jrquick17/ng-speed-test)\n- [NPM Package](https://www.npmjs.com/package/ng-speed-test)\n- [Issues \u0026 Support](https://github.com/jrquick17/ng-speed-test/issues)\n- [Jeremy's Website](https://jrquick.com)\n\n---\n\n**Made with ❤️ for the Angular community**\n","funding_links":[],"categories":["Architecture and Advanced Topics"],"sub_categories":["HTTP"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrquick17%2Fng-speed-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjrquick17%2Fng-speed-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrquick17%2Fng-speed-test/lists"}