[
{
"path": ".gitignore",
"content": "/node_modules/\n/public/build/\n\n.DS_Store\n"
},
{
"path": "README.md",
"content": "---\n\n# Svelte PWA\n\nThis is a Progressive Web App (PWA) template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/tretapey/svelte-pwa.\n\nTo create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpx degit tretapey/svelte-pwa my-svelte-pwa\ncd my-svelte-pwa\n```\n\n_Note that you will need to have [Node.js](https://nodejs.org) installed._\n\n## Get started\n\nInstall the dependencies...\n\n```bash\ncd my-svelte-pwa\nnpm install\n```\n\n...then start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\n\nNavigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\nBy default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.\n\n## PWA Configuration\n\n- The `service-worker.js` and `manifest.json` files are in the `public` folder.\n- You should update the icons in `/public/images/icons`\n- For an offline experience edit the `/public/offline.html` file.\n- This PWA is installable. For more information on how to use check [this repo](https://github.com/pwa-builder/pwa-install).\n Note: If you don't want to make the app installable you can remove the script from the `index.html` file in the `public` folder.\n\nFor more info, this template was made following this [tutorial](https://codelabs.developers.google.com/codelabs/your-first-pwapp)\n\n## Building and running in production mode\n\nTo create an optimised version of the app:\n\n```bash\nnpm run build\n```\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"svelte-pwa-template\",\n \"version\": \"1.0.4\",\n \"scripts\": {\n \"build\": \"rollup -c\",\n \"dev\": \"rollup -c -w\",\n \"start\": \"sirv public\",\n \"test\": \"echo test\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-commonjs\": \"11.0.2\",\n \"@rollup/plugin-node-resolve\": \"^7.0.0\",\n \"rollup\": \"^1.20.0\",\n \"rollup-plugin-livereload\": \"^1.0.0\",\n \"rollup-plugin-svelte\": \"^6.1.1\",\n \"rollup-plugin-terser\": \"^7.0.1\",\n \"svelte\": \"^3.49.0\"\n },\n \"dependencies\": {\n \"sirv-cli\": \"^0.4.4\"\n }\n}\n"
},
{
"path": "public/global.css",
"content": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: rgb(0,80,160);\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:disabled {\n\tcolor: #999;\n}\n\nbutton:not(:disabled):active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}\n"
},
{
"path": "public/index.html",
"content": "\n\n \n \n \n\n Svelte PWA\n\n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n"
},
{
"path": "public/manifest.json",
"content": "{\n \"name\": \"SVELTE-PWA\",\n \"short_name\": \"SVELTE-PWA\",\n \"icons\": [\n {\n \"src\": \"/images/icons/icon-128x128.png\",\n \"sizes\": \"128x128\",\n \"type\": \"image/png\"\n }, \n {\n \"src\": \"/images/icons/icon-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\"\n }, \n {\n \"src\": \"/images/icons/icon-152x152.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image/png\"\n }, \n {\n \"src\": \"/images/icons/icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n }, \n {\n \"src\": \"/images/icons/icon-256x256.png\",\n \"sizes\": \"256x256\",\n \"type\": \"image/png\"\n }, \n {\n \"src\": \"/images/icons/icon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/images/icons/maskable_icon.png\",\n \"sizes\": \"640x640\",\n \"type\": \"image/png\",\n \"purpose\": \"any maskable\"\n }\n ],\n \"start_url\": \"/index.html\",\n \"display\": \"standalone\",\n \"background_color\": \"#3E4EB8\",\n \"theme_color\": \"#2F3BA2\"\n}\n"
},
{
"path": "public/offline.html",
"content": "\n\n \n \n \n \n\n Svelte PWA\n\n \n \n \n \n\n \n
\n Oops, you appear to be offline, this app requires an internet\n connection.\n
\n \n\n"
},
{
"path": "public/service-worker.js",
"content": "'use strict';\n\n// Update cache names any time any of the cached files change.\nconst CACHE_NAME = 'static-cache-v1';\n\n// Add list of files to cache here.\nconst FILES_TO_CACHE = [\n '/offline.html',\n];\n\nself.addEventListener('install', (evt) => {\n console.log('[ServiceWorker] Install');\n\n evt.waitUntil(\n caches.open(CACHE_NAME).then((cache) => {\n console.log('[ServiceWorker] Pre-caching offline page');\n return cache.addAll(FILES_TO_CACHE);\n })\n );\n\n self.skipWaiting();\n});\n\nself.addEventListener('activate', (evt) => {\n console.log('[ServiceWorker] Activate');\n // Remove previous cached data from disk.\n evt.waitUntil(\n caches.keys().then((keyList) => {\n return Promise.all(keyList.map((key) => {\n if (key !== CACHE_NAME) {\n console.log('[ServiceWorker] Removing old cache', key);\n return caches.delete(key);\n }\n }));\n })\n );\n\n self.clients.claim();\n});\n\nself.addEventListener('fetch', (evt) => {\n console.log('[ServiceWorker] Fetch', evt.request.url);\n // Add fetch event handler here.\n if (evt.request.mode !== 'navigate') {\n // Not a page navigation, bail.\n return;\n }\n evt.respondWith(\n fetch(evt.request)\n .catch(() => {\n return caches.open(CACHE_NAME)\n .then((cache) => {\n return cache.match('offline.html');\n });\n })\n );\n});\n"
},
{
"path": "rollup.config.js",
"content": "import svelte from 'rollup-plugin-svelte';\nimport resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n\tinput: 'src/main.js',\n\toutput: {\n\t\tsourcemap: true,\n\t\tformat: 'iife',\n\t\tname: 'app',\n\t\tfile: 'public/build/bundle.js'\n\t},\n\tplugins: [\n\t\tsvelte({\n\t\t\t// enable run-time checks when not in production\n\t\t\tdev: !production,\n\t\t\t// we'll extract any component CSS out into\n\t\t\t// a separate file - better for performance\n\t\t\tcss: css => {\n\t\t\t\tcss.write('public/build/bundle.css');\n\t\t\t}\n\t\t}),\n\n\t\t// If you have external dependencies installed from\n\t\t// npm, you'll most likely need these plugins. In\n\t\t// some cases you'll need additional configuration -\n\t\t// consult the documentation for details:\n\t\t// https://github.com/rollup/plugins/tree/master/packages/commonjs\n\t\tresolve({\n\t\t\tbrowser: true,\n\t\t\tdedupe: ['svelte']\n\t\t}),\n\t\tcommonjs(),\n\n\t\t// In dev mode, call `npm run start` once\n\t\t// the bundle has been generated\n\t\t!production && serve(),\n\n\t\t// Watch the `public` directory and refresh the\n\t\t// browser on changes when not in production\n\t\t!production && livereload('public'),\n\n\t\t// If we're building for production (npm run build\n\t\t// instead of npm run dev), minify\n\t\tproduction && terser()\n\t],\n\twatch: {\n\t\tclearScreen: false\n\t}\n};\n\nfunction serve() {\n\tlet started = false;\n\n\treturn {\n\t\twriteBundle() {\n\t\t\tif (!started) {\n\t\t\t\tstarted = true;\n\n\t\t\t\trequire('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {\n\t\t\t\t\tstdio: ['ignore', 'inherit', 'inherit'],\n\t\t\t\t\tshell: true\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t};\n}\n"
},
{
"path": "src/App.svelte",
"content": "\n\n\n\t
Hello {name}!
\n\t
This is a starter template for a Svelte PWA, based in the Svelte template
\n\t
You will find the manifest.json file and the service-worker.js file in the public folder
\n\t
To update the proper icons for the PWA check /public/images/icons