Improve PWA capabilities

sissbruecker · Feb 26, 2024 · 21aead7 · 21aead7
1 parent 38204c8
commit 21aead7
Show file tree

Hide file tree

Showing 20 changed files with 701 additions and 109 deletions.
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -7,17 +7,18 @@ jobs:
     name: Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.10"
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          cache: 'npm'
       - name: Install Node dependencies
-        run: npm install
+        run: npm ci
       - name: Setup Python environment
         run: pip install -r requirements.txt -r requirements.dev.txt
       - name: Run tests
@@ -26,17 +27,18 @@ jobs:
     name: E2E Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.10"
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          cache: 'npm'
       - name: Install Node dependencies
-        run: npm install
+        run: npm ci
       - name: Setup Python environment
         run: |
           pip install -r requirements.txt -r requirements.dev.txt

diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ The name comes from:
 - Automatically provides titles, descriptions and icons of bookmarked websites
 - Automatically creates snapshots of bookmarked websites on [the Internet Archive Wayback Machine](https://archive.org/web/)
 - Import and export bookmarks in Netscape HTML format
+- Installable as a Progressive Web App (PWA)
 - Extensions for [Firefox](https://addons.mozilla.org/firefox/addon/linkding-extension/) and [Chrome](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe), as well as a bookmarklet
 - Light and dark themes
 - REST API for developing 3rd party apps

diff --git a/bookmarks/static/apple-touch-icon.png b/bookmarks/static/apple-touch-icon.png
diff --git a/bookmarks/static/favicon.ico b/bookmarks/static/favicon.ico
diff --git a/bookmarks/static/favicon.png b/bookmarks/static/favicon.png
diff --git a/bookmarks/static/favicon.svg b/bookmarks/static/favicon.svg
diff --git a/bookmarks/static/linkding-screenshot.png b/bookmarks/static/linkding-screenshot.png
diff --git a/bookmarks/static/logo-192.png b/bookmarks/static/logo-192.png
diff --git a/bookmarks/static/logo-512.png b/bookmarks/static/logo-512.png
diff --git a/bookmarks/static/logo.svg b/bookmarks/static/logo.svg
diff --git a/bookmarks/static/maskable-logo-192.png b/bookmarks/static/maskable-logo-192.png
diff --git a/bookmarks/static/maskable-logo-512.png b/bookmarks/static/maskable-logo-512.png
diff --git a/bookmarks/static/safari-pinned-tab.svg b/bookmarks/static/safari-pinned-tab.svg
diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html
@@ -6,8 +6,10 @@
 <html lang="en" data-api-base-url="{% url 'bookmarks:api-root' %}">
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="{% static 'favicon.png' %}"/>
-  <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
+  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
+  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
+  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
   <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
@@ -19,14 +21,18 @@
   {# Include specific theme variant based on user profile setting #}
   {% if request.user_profile.theme == 'light' %}
     <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#5856e0">
   {% elif request.user_profile.theme == 'dark' %}
     <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#161822">
   {% else %}
     {# Use auto theme as fallback #}
     <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
           media="(prefers-color-scheme: dark)"/>
     <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
           media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
   {% endif %}
 </head>
 <body ld-global-shortcuts>

diff --git a/bookmarks/tests/test_metadata_view.py b/bookmarks/tests/test_metadata_view.py
@@ -11,9 +11,84 @@ def test_default_manifest(self):
         response_body = response.json()
         expected_body = {
             "short_name": "linkding",
+            "name": "linkding",
+            "description": "Self-hosted bookmark service",
             "start_url": "bookmarks",
             "display": "standalone",
             "scope": "/",
+            "theme_color": "#5856e0",
+            "background_color": "#161822",
+            "icons": [
+                {
+                    "src": "/static/logo.svg",
+                    "type": "image/svg+xml",
+                    "sizes": "512x512",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/static/logo-512.png",
+                    "type": "image/png",
+                    "sizes": "512x512",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/static/logo-192.png",
+                    "type": "image/png",
+                    "sizes": "192x192",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/static/maskable-logo-512.png",
+                    "type": "image/png",
+                    "sizes": "512x512",
+                    "purpose": "maskable"
+                },
+                {
+                    "src": "/static/maskable-logo-192.png",
+                    "type": "image/png",
+                    "sizes": "192x192",
+                    "purpose": "maskable"
+                },
+            ],
+            "shortcuts": [
+                {
+                    "name": "Add bookmark",
+                    "url": "/bookmarks/new",
+                },
+                {
+                    "name": "Archived",
+                    "url": "/bookmarks/archived",
+                },
+                {
+                    "name": "Unread",
+                    "url": "/bookmarks?unread=yes",
+                },
+                {
+                    "name": "Untagged",
+                    "url": "/bookmarks?q=!untagged",
+                },
+                {
+                    "name": "Shared",
+                    "url": "/bookmarks/shared",
+                }
+            ],
+            "screenshots": [
+                {
+                    "src": "/static/linkding-screenshot.png",
+                    "type": "image/png",
+                    "sizes": "2158x1160",
+                    "form_factor": "wide"
+                }
+            ],
+            "share_target": {
+                "action": "/bookmarks/new",
+                "method": "GET",
+                "params": {
+                    "url": "url",
+                    "text": "url",
+                    "title": "title",
+                }
+            }
         }
         self.assertDictEqual(response_body, expected_body)
 
@@ -26,8 +101,83 @@ def test_manifest_respects_context_path(self):
         response_body = response.json()
         expected_body = {
             "short_name": "linkding",
+            "name": "linkding",
+            "description": "Self-hosted bookmark service",
             "start_url": "bookmarks",
             "display": "standalone",
             "scope": "/linkding/",
+            "theme_color": "#5856e0",
+            "background_color": "#161822",
+            "icons": [
+                {
+                    "src": "/linkding/static/logo.svg",
+                    "type": "image/svg+xml",
+                    "sizes": "512x512",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/linkding/static/logo-512.png",
+                    "type": "image/png",
+                    "sizes": "512x512",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/linkding/static/logo-192.png",
+                    "type": "image/png",
+                    "sizes": "192x192",
+                    "purpose": "any"
+                },
+                {
+                    "src": "/linkding/static/maskable-logo-512.png",
+                    "type": "image/png",
+                    "sizes": "512x512",
+                    "purpose": "maskable"
+                },
+                {
+                    "src": "/linkding/static/maskable-logo-192.png",
+                    "type": "image/png",
+                    "sizes": "192x192",
+                    "purpose": "maskable"
+                },
+            ],
+            "shortcuts": [
+                {
+                    "name": "Add bookmark",
+                    "url": "/linkding/bookmarks/new",
+                },
+                {
+                    "name": "Archived",
+                    "url": "/linkding/bookmarks/archived",
+                },
+                {
+                    "name": "Unread",
+                    "url": "/linkding/bookmarks?unread=yes",
+                },
+                {
+                    "name": "Untagged",
+                    "url": "/linkding/bookmarks?q=!untagged",
+                },
+                {
+                    "name": "Shared",
+                    "url": "/linkding/bookmarks/shared",
+                }
+            ],
+            "screenshots": [
+                {
+                    "src": "/linkding/static/linkding-screenshot.png",
+                    "type": "image/png",
+                    "sizes": "2158x1160",
+                    "form_factor": "wide"
+                }
+            ],
+            "share_target": {
+                "action": "/linkding/bookmarks/new",
+                "method": "GET",
+                "params": {
+                    "url": "url",
+                    "text": "url",
+                    "title": "title",
+                }
+            }
         }
         self.assertDictEqual(response_body, expected_body)
diff --git a/bookmarks/views/manifest.py b/bookmarks/views/manifest.py
@@ -5,9 +5,84 @@
 def manifest(request):
     response = {
         "short_name": "linkding",
+        "name": "linkding",
+        "description": "Self-hosted bookmark service",
         "start_url": "bookmarks",
         "display": "standalone",
         "scope": "/" + settings.LD_CONTEXT_PATH,
+        "theme_color": "#5856e0",
+        "background_color": "#ffffff" if request.user_profile.theme == "light" else "#161822",
+        "icons": [
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/logo.svg",
+                "type": "image/svg+xml",
+                "sizes": "512x512",
+                "purpose": "any"
+            },
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/logo-512.png",
+                "type": "image/png",
+                "sizes": "512x512",
+                "purpose": "any"
+            },
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/logo-192.png",
+                "type": "image/png",
+                "sizes": "192x192",
+                "purpose": "any"
+            },
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/maskable-logo-512.png",
+                "type": "image/png",
+                "sizes": "512x512",
+                "purpose": "maskable"
+            },
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/maskable-logo-192.png",
+                "type": "image/png",
+                "sizes": "192x192",
+                "purpose": "maskable"
+            },
+        ],
+        "shortcuts": [
+            {
+                "name": "Add bookmark",
+                "url": "/" + settings.LD_CONTEXT_PATH + "bookmarks/new",
+            },
+            {
+                "name": "Archived",
+                "url": "/" + settings.LD_CONTEXT_PATH + "bookmarks/archived",
+            },
+            {
+                "name": "Unread",
+                "url": "/" + settings.LD_CONTEXT_PATH + "bookmarks?unread=yes",
+            },
+            {
+                "name": "Untagged",
+                "url": "/" + settings.LD_CONTEXT_PATH + "bookmarks?q=!untagged",
+            },
+            {
+                "name": "Shared",
+                "url": "/" + settings.LD_CONTEXT_PATH + "bookmarks/shared",
+            }
+        ],
+        "screenshots": [
+            {
+                "src": "/" + settings.LD_CONTEXT_PATH + "static/linkding-screenshot.png",
+                "type": "image/png",
+                "sizes": "2158x1160",
+                "form_factor": "wide"
+            }
+        ],
+        "share_target": {
+            "action": "/" + settings.LD_CONTEXT_PATH + "bookmarks/new",
+            "method": "GET",
+            "params": {
+                "url": "url",
+                "text": "url",
+                "title": "title",
+            }
+        }
     }
 
     return JsonResponse(response, status=200)
diff --git a/docker/alpine.Dockerfile b/docker/alpine.Dockerfile
@@ -1,8 +1,8 @@
-FROM node:18.18.0-alpine AS node-build
+FROM node:20-alpine AS node-build
 WORKDIR /etc/linkding
 # install build dependencies
 COPY rollup.config.js package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 # copy files needed for JS build
 COPY bookmarks/frontend ./bookmarks/frontend
 # run build

diff --git a/docker/default.Dockerfile b/docker/default.Dockerfile
@@ -1,8 +1,8 @@
-FROM node:18.18.0-alpine AS node-build
+FROM node:20-alpine AS node-build
 WORKDIR /etc/linkding
 # install build dependencies
 COPY rollup.config.js package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 # copy files needed for JS build
 COPY bookmarks/frontend ./bookmarks/frontend
 # run build