implement PWA

add service-worker.js and manifest.json
master
Peter Babič 3 years ago
parent bee5386783
commit b75ec497ae
Signed by: peter.babic
GPG Key ID: 4BB075BC1884BA40
  1. BIN
      public/favicon.png
  2. BIN
      public/icon/android-icon-192x192.png
  3. BIN
      public/icon/apple-icon-114x114.png
  4. BIN
      public/icon/apple-icon-120x120.png
  5. BIN
      public/icon/apple-icon-144x144.png
  6. BIN
      public/icon/apple-icon-152x152.png
  7. BIN
      public/icon/apple-icon-180x180.png
  8. BIN
      public/icon/apple-icon-57x57.png
  9. BIN
      public/icon/apple-icon-60x60.png
  10. BIN
      public/icon/apple-icon-72x72.png
  11. BIN
      public/icon/apple-icon-76x76.png
  12. BIN
      public/icon/favicon-16x16.png
  13. BIN
      public/icon/favicon-32x32.png
  14. BIN
      public/icon/favicon-96x96.png
  15. BIN
      public/icon/favicon.png
  16. 38
      public/index.html
  17. 86
      public/manifest.json
  18. 25
      public/service-worker.js
  19. 117
      scripts/setupTypeScript.js
  20. 5
      src/main.js

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 463 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

@ -1,18 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Svelte app</title>
<title>Triangles.fun</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/icon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/icon/favicon-16x16.png"
/>
<link rel="shortcut icon" type="image/png" href="/icon/favicon.png" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />
<link rel="manifest" href="/manifest.json" />
<meta
name="description"
content="Eliminate all the circles in the triangle by jumping them over"
/>
<script defer src='/build/bundle.js'></script>
</head>
<script defer src="/build/bundle.js"></script>
</head>
<body>
</body>
<body></body>
</html>

@ -0,0 +1,86 @@
{
"name": "Triangles.fun",
"short_name": "triangles",
"lang": "en",
"description": "Eliminate all the circles in the triangle by jumping them over",
"theme_color": "#bf616a",
"background_color": "#eceff4",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "/",
"manifest_version": 2,
"version": "0.0.1",
"icons": [
{
"src": "/icon/favicon.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/icon/android-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icon/apple-icon-180x180.png",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "/icon/apple-icon-152x152.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/icon/apple-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/icon/apple-icon-120x120.png",
"type": "image/png",
"sizes": "120x120"
},
{
"src": "/icon/apple-icon-114x114.png",
"type": "image/png",
"sizes": "114x114"
},
{
"src": "/icon/favicon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/icon/apple-icon-76x76.png",
"type": "image/png",
"sizes": "76x76"
},
{
"src": "/icon/apple-icon-72x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/icon/apple-icon-60x60.png",
"type": "image/png",
"sizes": "60x60"
},
{
"src": "/icon/apple-icon-57x57.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/icon/favicon-32x32.png",
"type": "image/png",
"sizes": "32x32"
},
{
"src": "/icon/favicon-16x16.png",
"type": "image/png",
"sizes": "16x16"
}
]
}

@ -0,0 +1,25 @@
const cacheName = "stale-with-revalidate"
// import workbox
importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
)
const { routing, strategies } = workbox
// implements staleWhileRevalidate to all routes
routing.registerRoute(
() => true,
new strategies.StaleWhileRevalidate({ cacheName })
)
// removes all caches not named <cacheName>
const invalidateOldCache = async () => {
const keys = await caches.keys()
const isOldCache = key => key !== cacheName
const oldKeys = keys.filter(isOldCache)
return Promise.all(oldKeys.map(key => caches.delete(key)))
}
// runs invalidateOldCache on activation
self.addEventListener("activate", e => e.waitUntil(invalidateOldCache()))

@ -1,117 +0,0 @@
// @ts-check
/** This script modifies the project to support TS code in .svelte files like:
<script lang="ts">
export let name: string;
</script>
As well as validating the code for CI.
*/
/** To work on this script:
rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
*/
const fs = require("fs")
const path = require("path")
const { argv } = require("process")
const projectRoot = argv[2] || path.join(__dirname, "..")
// Add deps to pkg.json
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.0.0",
"@rollup/plugin-typescript": "^6.0.0",
"typescript": "^3.9.3",
"tslib": "^2.0.0",
"@tsconfig/svelte": "^1.0.0"
})
// Add script for checking
packageJSON.scripts = Object.assign(packageJSON.scripts, {
"validate": "svelte-check"
})
// Write the package JSON
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
fs.renameSync(beforeMainJSPath, afterMainTSPath)
// Switch the app.svelte file to use TS
const appSveltePath = path.join(projectRoot, "src", "App.svelte")
let appFile = fs.readFileSync(appSveltePath, "utf8")
appFile = appFile.replace("<script>", '<script lang="ts">')
appFile = appFile.replace("export let name;", 'export let name: string;')
fs.writeFileSync(appSveltePath, appFile)
// Edit rollup config
const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
// Edit imports
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';`)
// Replace name of entry point
rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
// Add preprocessor
rollupConfig = rollupConfig.replace(
'compilerOptions:',
'preprocess: sveltePreprocess(),\n\t\t\tcompilerOptions:'
);
// Add TypeScript
rollupConfig = rollupConfig.replace(
'commonjs(),',
'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
);
fs.writeFileSync(rollupConfigPath, rollupConfig)
// Add TSConfig
const tsconfig = `{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}`
const tsconfigPath = path.join(projectRoot, "tsconfig.json")
fs.writeFileSync(tsconfigPath, tsconfig)
// Delete this script, but not during testing
if (!argv[2]) {
// Remove the script
fs.unlinkSync(path.join(__filename))
// Check for Mac's DS_store file, and if it's the only one left remove it
const remainingFiles = fs.readdirSync(path.join(__dirname))
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
fs.unlinkSync(path.join(__dirname, '.DS_store'))
}
// Check if the scripts folder is empty
if (fs.readdirSync(path.join(__dirname)).length === 0) {
// Remove the scripts folder
fs.rmdirSync(path.join(__dirname))
}
}
// Adds the extension recommendation
fs.mkdirSync(path.join(projectRoot, ".vscode"))
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
"recommendations": ["svelte.svelte-vscode"]
}
`)
console.log("Converted to TypeScript.")
if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
console.log("\nYou will need to re-run your dependency manager to get started.")
}

@ -4,5 +4,8 @@ const app = new App({
target: document.body,
})
export default app
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js")
}
export default app

Loading…
Cancel
Save