PWA-ify

2024-09-28 16:00:52 +00:00 · 2023-02-27 15:44:05 -06:00 · 2023-02-27 15:44:05 -06:00 · 24b1588599
commit 24b1588599
parent 4e20de8fb5
42 changed files with 101 additions and 18 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,7 @@

 - [x] Improve paste support
 - [x] Add timestamps to messages
+- [x] Support installation as a PWA

 ## 0.2.13

--- a/ROADMAP.md
+++ b/ROADMAP.md
@ -1,13 +1,7 @@
 # Current

 - [ ] Fix iOS
- [ ] Fix likes, very few come up. Could be the parent timeout
 - [ ] Make the note relays button modal make sense, one relay with no explanation is not good
- [ ] Likes feed includes flag events, durr
- [ ] PWA
- [ ] Polls
-  - Find the best implementation https://github.com/nostr-protocol/nips/search?q=poll&type=issues
-  - Comment on all three nip drafts which one I implemented

 # Lightning

@ -24,6 +18,9 @@

 # More

+- [ ] Polls
+  - Find the best implementation https://github.com/nostr-protocol/nips/search?q=poll&type=issues
+  - Comment on all three nip drafts which one I implemented
 - [ ] Micro app DSL
 - [ ] Fix social share image, add description
 - [ ] Sort feeds by created date on profile page?
--- a/index.html
+++ b/index.html
@ -2,8 +2,31 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/images/favicon.png" />
+    <link rel="apple-touch-icon" sizes="57x57" href="/images/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/images/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/images/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+    <link rel="mask-icon" href="/images/logo.svg" color="#FFFFFF">
+    <meta name="msapplication-TileColor" content="#EB5E28">
+    <meta name="msapplication-TileImage" content="/images/favicon/ms-icon-144x144.png">
+    <meta name="theme-color" content="#EB5E28">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="description" content="Nostr, your way.">
+    <meta property="og:title" content="Coracle">
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="Nostr, your way.">
+    <meta property="og:image" content="/images/banner.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:url" content="https://coracle.social">
    <title>Coracle</title>
  </head>
  <body class="w-full">
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -51,6 +51,7 @@
    "svelte-routing": "^1.6.0",
    "svelte-switch": "^0.0.5",
    "throttle-debounce": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.5.0"
+    "vite-plugin-node-polyfills": "^0.5.0",
+    "vite-plugin-pwa": "^0.14.4"
  }
 }
--- a/public/images/banner.png
+++ b/public/images/banner.png
--- a/public/images/favicon/android-icon-144x144.png
+++ b/public/images/favicon/android-icon-144x144.png
--- a/public/images/favicon/android-icon-192x192.png
+++ b/public/images/favicon/android-icon-192x192.png
--- a/public/images/favicon/android-icon-36x36.png
+++ b/public/images/favicon/android-icon-36x36.png
--- a/public/images/favicon/android-icon-48x48.png
+++ b/public/images/favicon/android-icon-48x48.png
--- a/public/images/favicon/android-icon-512x512.png
+++ b/public/images/favicon/android-icon-512x512.png
--- a/public/images/favicon/android-icon-72x72.png
+++ b/public/images/favicon/android-icon-72x72.png
--- a/public/images/favicon/android-icon-96x96.png
+++ b/public/images/favicon/android-icon-96x96.png
--- a/public/images/favicon/apple-icon-114x114.png
+++ b/public/images/favicon/apple-icon-114x114.png
--- a/public/images/favicon/apple-icon-120x120.png
+++ b/public/images/favicon/apple-icon-120x120.png
--- a/public/images/favicon/apple-icon-144x144.png
+++ b/public/images/favicon/apple-icon-144x144.png
--- a/public/images/favicon/apple-icon-152x152.png
+++ b/public/images/favicon/apple-icon-152x152.png
--- a/public/images/favicon/apple-icon-180x180.png
+++ b/public/images/favicon/apple-icon-180x180.png
--- a/public/images/favicon/apple-icon-57x57.png
+++ b/public/images/favicon/apple-icon-57x57.png
--- a/public/images/favicon/apple-icon-60x60.png
+++ b/public/images/favicon/apple-icon-60x60.png
--- a/public/images/favicon/apple-icon-72x72.png
+++ b/public/images/favicon/apple-icon-72x72.png
--- a/public/images/favicon/apple-icon-76x76.png
+++ b/public/images/favicon/apple-icon-76x76.png
--- a/public/images/favicon/apple-icon-precomposed.png
+++ b/public/images/favicon/apple-icon-precomposed.png
--- a/public/images/favicon/apple-icon.png
+++ b/public/images/favicon/apple-icon.png
--- a/public/images/favicon/browserconfig.xml
+++ b/public/images/favicon/browserconfig.xml
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
--- a/public/images/favicon/favicon-16x16.png
+++ b/public/images/favicon/favicon-16x16.png
--- a/public/images/favicon/favicon-32x32.png
+++ b/public/images/favicon/favicon-32x32.png
--- a/public/images/favicon/favicon-96x96.png
+++ b/public/images/favicon/favicon-96x96.png
--- a/public/images/favicon/favicon.ico
+++ b/public/images/favicon/favicon.ico
--- a/public/images/favicon/ms-icon-144x144.png
+++ b/public/images/favicon/ms-icon-144x144.png
--- a/public/images/favicon/ms-icon-150x150.png
+++ b/public/images/favicon/ms-icon-150x150.png
--- a/public/images/favicon/ms-icon-310x310.png
+++ b/public/images/favicon/ms-icon-310x310.png
--- a/public/images/favicon/ms-icon-70x70.png
+++ b/public/images/favicon/ms-icon-70x70.png
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@ -0,0 +1,12 @@
+<svg width="189" height="189" viewBox="0 0 189 189" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_753_289)">
+<path d="M43.7937 12.5298C0.57938 44.8609 0.342815 92.8076 16.3236 126.458C33.6361 162.913 75.9226 184.525 117.769 173.613C156.42 163.534 183.82 122.549 182.358 95.8221" stroke="#EB5E28" stroke-width="12" stroke-linecap="round"/>
+<path d="M78.6923 75.6945C50.8177 86.6612 44.0155 112.559 47.9751 133.172C52.2646 155.502 72.1284 173.572 96.2818 173.985C118.59 174.366 139.116 156.332 142.045 141.655" stroke="#EB5E28" stroke-width="12" stroke-linecap="round"/>
+<path d="M43.5856 12.4047C17.9702 31.569 17.83 59.9895 27.3026 79.936C37.5646 101.545 62.6301 114.355 87.4348 107.887C110.345 101.913 126.587 77.6188 125.72 61.7764" stroke="#EB5E28" stroke-width="12" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_753_289">
+<rect width="189" height="189" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
--- a/src/agent/keys.ts
+++ b/src/agent/keys.ts
@ -1,4 +1,3 @@
-import {prop} from 'ramda'
 import {nip04, getPublicKey, getEventHash, signEvent} from 'nostr-tools'
 import {get} from 'svelte/store'
 import {error} from 'src/util/logger'
--- a/src/app/ui.ts
+++ b/src/app/ui.ts
@ -16,6 +16,10 @@ export const routes = {
  person: (pubkey, tab = 'notes') => `/people/${nip19.npubEncode(pubkey)}/${tab}`,
 }

+// Install prompt
+
+export const installPrompt = writable(null)
+
 // Toast

 export interface Toast<T> extends Writable<T> {
--- a/src/main.js
+++ b/src/main.js
@ -1,16 +1,22 @@
 import 'src/app.css'

 import Bugsnag from "@bugsnag/js"
+import App from 'src/App.svelte'
+import {installPrompt} from 'src/app/ui'

 Bugsnag.start({
  apiKey: "2ea412feabfe14dc9849c6f0b4fa7003",
  collectUserIp: false,
 })

-import App from 'src/App.svelte'
+window.addEventListener("beforeinstallprompt", e => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault()

-const app = new App({
-  target: document.getElementById('app')
+  // Stash the event so it can be triggered later.
+  installPrompt.set(e)
 })

-export default app
+export default new App({
+  target: document.getElementById('app')
+})
--- a/src/views/SideNav.svelte
+++ b/src/views/SideNav.svelte
@ -1,11 +1,25 @@
 <script lang="ts">
  import {displayPerson} from 'src/util/nostr'
  import user from 'src/agent/user'
-  import {menuIsOpen, routes} from 'src/app/ui'
+  import {menuIsOpen, installPrompt, routes} from 'src/app/ui'
  import {newAlerts, newDirectMessages, newChatMessages} from 'src/app/alerts'
  import {slowConnections} from 'src/app/connection'

  const {profile} = user
+
+  const install = () => {
+    $installPrompt.prompt()
+
+    $installPrompt.userChoice.then(result => {
+      if (result.outcome === "accepted") {
+        console.log("User accepted the A2HS prompt")
+      } else {
+        console.log("User dismissed the A2HS prompt")
+      }
+
+      installPrompt.set(null)
+    })
+  }
 </script>

 <ul
@ -98,5 +112,12 @@
    </a>
  </li>
  {/if}
+  {#if $installPrompt}
+  <li
+    class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
+    on:click={install}>
+    <i class="fa-solid fa-rocket mr-2" /> Install
+  </li>
+  {/if}
 </ul>

--- a/src/views/TopNav.svelte
+++ b/src/views/TopNav.svelte
@ -21,7 +21,7 @@
 >
  <button class="lg:hidden fa fa-bars fa-2xl cursor-pointer" on:click={toggleMenu} />
  <Anchor external type="unstyled" href="https://github.com/staab/coracle" class="flex items-center gap-2">
-    <img alt="Coracle Logo" src="/images/favicon.png" class="w-8" />
+    <img alt="Coracle Logo" src="/images/logo.png" class="w-8" />
    <h1 class="staatliches text-3xl">Coracle</h1>
  </Anchor>
  {#if $newAlerts}
--- a/vite.config.js
+++ b/vite.config.js
@ -1,9 +1,10 @@
 import * as path from 'path'
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
+import {VitePWA} from 'vite-plugin-pwa'
 import mkcert from 'vite-plugin-mkcert'
 import sveltePreprocess from 'svelte-preprocess'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import {svelte} from '@sveltejs/vite-plugin-svelte'
+import {nodePolyfills} from 'vite-plugin-node-polyfills'

 export default defineConfig({
  server: {
@ -22,6 +23,20 @@ export default defineConfig({
    nodePolyfills({
      protocolImports: true,
    }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      manifest: {
+        name: 'Coracle',
+        short_name: 'Coracle',
+        description: 'Nostr, your way.',
+        theme_color: '#EB5E28',
+        icons: [
+          {type: "image/png", sizes: "192x192", src: "/images/favicon/android-icon-192x192.png"},
+          {type: "image/png", sizes: "512x512", src: "/images/favicon/android-icon-512x512.png"},
+        ],
+      },
+    }),
    svelte({
      preprocess: sveltePreprocess(),
      onwarn: (warning, handler) => {