Improve PWA support.

.github/workflows/ipfs-build.yml

@@ -0,0 +1,29 @@
+name: Build and Deploy
+
+on:
+  push:
+    paths-ignore:
+      - "**.md"
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.4.0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2.5.1
+        with:
+          cache: "yarn"
+      - run: yarn install --prefer-offline
+      - run: yarn build && sed -i 's/fonts.gstatic.com/fonts.kavin.rocks/g' dist/assets/*.css
+      - uses: aquiladev/ipfs-action@v0.1.6
+        id: ipfs-add
+        with:
+          path: ./dist
+          service: infura
+      - name: Update DNSLink
+        run: npx dnslink-cloudflare -d kavin.rocks -l /ipfs/${{ steps.ipfs-add.outputs.hash }} -r _dnslink.piped-ipfs
+        env:
+          CF_API_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}

vite.config.js

@@ -13,7 +13,34 @@ export default defineConfig({
         vueI18n({
             include: path.resolve(__dirname, "./src/locales/**"),
         }),
-        VitePWA({ registerType: "autoUpdate" }),
+        VitePWA({
+            registerType: "autoUpdate",
+            workbox: {
+                globPatterns: ["**/*.{js,css,html,ico,svg,png}", "manifest.webmanifest"],
+            },
+            manifest: {
+                name: "Piped",
+                short_name: "Piped",
+                background_color: "#000000",
+                theme_color: "#fa4b4b",
+                icons: [
+                    { src: "./img/icons/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
+                    { src: "./img/icons/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
+                    {
+                        src: "./img/icons/android-chrome-maskable-192x192.png",
+                        sizes: "192x192",
+                        type: "image/png",
+                        purpose: "maskable",
+                    },
+                    {
+                        src: "./img/icons/android-chrome-maskable-512x512.png",
+                        sizes: "512x512",
+                        type: "image/png",
+                        purpose: "maskable",
+                    },
+                ],
+            },
+        }),
     ],
     resolve: {
         alias: {

vue.config.js

@@ -1,37 +0,0 @@
-module.exports = {
-    pwa: {
-        name: "Piped",
-        themeColor: "#fa4b4b",
-        msTileColor: "#000000",
-        appleMobileWebAppCapable: "yes",
-        appleMobileWebAppStatusBarStyle: "black",
-        workboxPluginMode: "GenerateSW",
-        workboxOptions: {
-            navigateFallback: "index.html",
-            skipWaiting: true,
-            importWorkboxFrom: "local",
-            runtimeCaching: [
-                {
-                    urlPattern: /\.(?:png|svg|ico)$/,
-                    handler: "CacheFirst",
-                },
-            ],
-        },
-    },
-    configureWebpack: {
-        resolve: {
-            alias: {
-                "vue-i18n": "vue-i18n/dist/vue-i18n.runtime.esm-bundler.js",
-            },
-        },
-    },
-    pluginOptions: {
-        i18n: {
-            locale: "en",
-            fallbackLocale: "en",
-            localeDir: "locales",
-            fullInstall: true,
-            enableLegacy: false,
-        },
-    },
-};