{"id":13510350,"url":"https://github.com/bahmutov/bottle-service","last_synced_at":"2025-08-30T23:32:32.367Z","repository":{"id":66012180,"uuid":"48397475","full_name":"bahmutov/bottle-service","owner":"bahmutov","description":"Instant web applications restored from ServiceWorker cache","archived":false,"fork":false,"pushed_at":"2016-01-29T03:11:15.000Z","size":215,"stargazers_count":332,"open_issues_count":7,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-12-17T15:48:27.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://glebbahmutov.com/bottle-service/","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/bahmutov.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":"2015-12-21T22:27:42.000Z","updated_at":"2024-02-29T14:06:28.000Z","dependencies_parsed_at":"2023-04-16T10:16:41.409Z","dependency_job_id":null,"html_url":"https://github.com/bahmutov/bottle-service","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"b44a23fbedcc845e452c74cd5cf19513c8cfc085"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fbottle-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fbottle-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fbottle-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fbottle-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/bottle-service/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231539699,"owners_count":18392334,"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-01T02:01:35.179Z","updated_at":"2024-12-27T20:50:36.995Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others","Tools"],"sub_categories":["Slides"],"readme":"# bottle-service\n\u003e Instant web applications restored from ServiceWorker cache\n\n[![NPM][bottle-service-icon] ][bottle-service-url]\n\n[![Build status][bottle-service-ci-image] ][bottle-service-ci-url]\n[![semantic-release][semantic-image] ][semantic-url]\n\n[Live demo](https://glebbahmutov.com/bottle-service/) - please use Chrome or Opera Desktop\n\n[Instant app demo](https://instant-todo.herokuapp.com/) - TodoMVC that is instant on\npage reload, hosted on free Heroku dyno, and needs Chrome browser for now\n\n![page source](page-source.png)\n\n## Browser support\n\n### Chrome \n\n* Nothing to do, `ServiceWorker` should be enabled by default\n\n### Firefox\n\n* Open `about:config`\n* Set the `dom.serviceWorkers.enabled` setting to **true**\n* Set the `dom.serviceWorkers.interception.enabled` setting to **true**\n\n## Api\n\nThis library attaches itself as `bottleService` object to the 'window'. Every time\nyou want to store HTML snapshot for an element with id 'myApp', call\n\n```js\n// \"my-app-name\" will be used in the future to allow separate parts of the\n// page to be saved separately\n// \u003cdiv id=\"myApp\"\u003e // controlled by the web app \u003c/div\u003e\n// application has been rendered\nbottleService.refill('my-app-name', 'myApp')\n```\n\nThere are a couple of secondary api calls\n\n```js\nbottleService.clear('my-app-name'); // delete whatever is stored in the ServiceWorker cache\nbottleService.print('my-app-name'); // prints the stored text to console\n```\n\n## Example\n\nSee [dist/index.html](dist/index.html) that includes the \"application\" code.\nEvery time the user clicks \"Add item\" button, the application code adds a new DOM node,\nthen tells the bottle service to store the new snapshot\n\n```js\nvar applicationName = 'bottle-demo'\ndocument.getElementById('add').addEventListener('click', function () {\n  var el = document.getElementById('app')\n  var div = document.createElement('div')\n  var text = document.createTextNode('hi there')\n  div.appendChild(text)\n  el.appendChild(div)\n  // store HTML snapshot\n  bottleService.refill(applicationName, 'app')\n})\n```\n\nWhen the page loads, the ServiceWorker will intercept `index.html` and will insert\nthe saved HTML snapshot into the page before returning it back to the browser for rendering.\nThus there is no page rewriting on load, no flicker, etc.\n\n## Related\n\n* Instant web apps without page flicker or loading screens, \n  [blog post](http://glebbahmutov.com/blog/instant-web-application/), \n  [source repo](https://github.com/bahmutov/instant-vdom-todo)\n* Dynamic page rewriting on start [hydrate-vue-todo](https://github.com/bahmutov/hydrate-vue-todo)\n* Fast application start from pre-rendered HTML \n  [hydrate-vdom-todo](https://github.com/bahmutov/hydrate-vdom-todo)\n\n## Related projects using ServiceWorkers\n\n* [express-service](https://github.com/bahmutov/express-service) - run ExpressJS server\n  inside ServiceWorker\n* [service-turtle](https://github.com/bahmutov/service-turtle) - Flexible http request \n  interception using ServiceWorker\n\n### Small print\n\nAuthor: Gleb Bahmutov \u0026copy; 2015\n\n* [@bahmutov](https://twitter.com/bahmutov)\n* [glebbahmutov.com](http://glebbahmutov.com)\n* [blog](http://glebbahmutov.com/blog/)\n\nLicense: MIT - do anything with the code, but don't blame me if it does not work.\n\nSpread the word: tweet, star on github, etc.\n\nSupport: if you find any problems with this module, email / tweet /\n[open issue](https://github.com/bahmutov/bottle-service/issues) on Github\n\n## MIT License\n\nCopyright (c) 2015 Gleb Bahmutov\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\n[bottle-service-icon]: https://nodei.co/npm/bottle-service.png?downloads=true\n[bottle-service-url]: https://npmjs.org/package/bottle-service\n[bottle-service-ci-image]: https://travis-ci.org/bahmutov/bottle-service.png?branch=master\n[bottle-service-ci-url]: https://travis-ci.org/bahmutov/bottle-service\n[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-url]: https://github.com/semantic-release/semantic-release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fbottle-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fbottle-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fbottle-service/lists"}