kevinmarrec / nuxt-pwa-module Goto Github PK

View Code? Open in Web Editor NEW

338.0 338.0 32.0 730 KB

⚠️ DEPRECATED ⚠️ Zero config PWA solution for Nuxt 3

License: MIT License

Vue 1.19% TypeScript 85.91% JavaScript 12.91%

nuxt-pwa-module's People

Contributors

Stargazers

Watchers

nuxt-pwa-module's Issues

OneSignal

Is there a way to to use '@nuxtjs/onesignal' with this pwa module?

If I add one signal to modules as such...

 modules: [
    '@nuxtjs/onesignal',
    "@kevinmarrec/nuxt-pwa",
  ],
  oneSignal: {
    init: {
      appId: "****",     
    },
  },
  pwa: {
    workbox: {
      enabled: true,
    },
    manifest: {
      name: "...",
      short_name: "...",
      lang: "en",
    },
  },

It triggers a build error (npm run dev).

Cannot start nuxt:  url.indexOf is not a function
  at isUrl (node_modules\@nuxtjs\pwa-utils\index.js:8:14)
  at getRouteParams (node_modules\@nuxtjs\pwa-utils\index.js:21:7)
  at Object.addOneSignal (node_modules\@nuxtjs\onesignal\index.js:28:26)
  at hook (node_modules\@nuxtjs\onesignal\index.js:13:18)

Stepping into that fn node_modules\@nuxtjs\pwa-utils\index.js:isUrl

function isUrl (url) {
  return url.indexOf('http') === 0 || url.indexOf('//') === 0
}

... reveals that url is undefined.

Is there something I'm doing wrong here, as the documentation here:
https://pwa.nuxtjs.org/onesignal points to the old repo.

Thank you.

Manifest could not be fetched, is empty or could not be parsed

Icon gets cropped

The auto-generated icon gets cropped on Android (Chrome) and iOS (Safari). Chrome desktop seems to work fine. Maybe an issue with the maskable option, which I think is missing.

Icon size is 512x512, is that too small? I have another app with the @nuxtjs/pwa where 512x512 works fine. If that is the issue and x1024 is required or so I think it would not be a problem and would be happy to create a PR mentioning that in the README.

I have PWA in wappalyzer but in lighthouse I have some issue , how can I fix them ?

issue 1 : Web app manifest or service worker do not meet the installability requirements .
No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest .

issue 2 : Downloaded icon was empty or corrupted.

how can i fix them im new in vue and nuxt and still learning

Issue with nuxi generate

Hello,
first of all, thank you for this module !
I would like to use it with static generation and this does not seem to work.

In your repo, when I run pnpm nuxi generate example, I get the following error :

ℹ Prerendering 1 initial routes with crawler
  ├─ / (43ms)
  ├─ /manifest.f92523ca.json (undefinedms) (Error: EEXIST: file already exists, mkdir '/path/to/nuxt-pwa-module/example/.output/public/manifest.f92523ca.json')

The build output seems to be fine. However, when I move the app.vue file into a pages folder and rename it to index.vue (closer to a real world configuration), with the same command I get this error :

ℹ Prerendering 1 initial routes with crawler
  ├─ / (48ms)
  ├─ /manifest.f92523ca.json (4ms) (Error: [404] Page not found: /manifest.f92523ca.json)

In this case, the content of the manifest file is corrupted, so the app is not installable.
Maybe the manifest file should be moved into the assets folder ? or ignored during the prerendering somehow ?

I am OK to contribute if it helps you and if you give me some indications :)

Per page manifest settings

Is it possible to use a different start_url and scope parameters per page? A web-games website does this so that each game can be installed separately. Is this possible to do with this plugin?

Thanks in advance.

PWA does not seem to work with rc-7 (Vite 3)

Reproduction steps

npx nuxi init nuxt-app
cd nuxt-app
yarn add @kevinmarrec/nuxt-pwa
yarn build && yarn preview

Lighthouse

Upon upgrading to rc-7, my pwa is lo longer installable. This might be because Vite was updated to version 3.

update assets route entry to include webmanifest

You should add manifest destination (for webmanifest) in the workbox template:

  // Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
  registerRoute(
    ({ request }) =>
      request.destination === 'style'
        || request.destination === 'manifest' // <== ADD THIS LINE
        || request.destination === 'script'
        || request.destination === 'worker',
    new StaleWhileRevalidate({
      cacheName: 'assets',
      plugins: [
        new CacheableResponsePlugin({ statuses: [200] }),
      ],
    }),
  )

Cache generated PWA images

Hey 👋🏻

If possible, could we cache the generated PWA images, ideally via node_modules/.cache/MODULENAME/<contenthash-of-icon>/ or so? This would reduce build time in case the icon did not change 😋

Icons purposes improvement

Hi,
[Suggestion]
It would be great to have the possibility to use another image file other than icon.png, for example, icon-maskable.png, if it exists, for icons with purpose maskable

disable javascript show credential in url

im use with nuxt3rc.9
nuxt.config set to ssr = true

im disable js with web developer extension.
and then im try to field the form and the click button submit.

why the field in form is pushed to url like this:

Configuration of meta module

Hello @kevinmarrec, as you suggested, I am creating a new issue to discuss about the configuration of the meta module.

I would like to input the following parameters into the meta option in the nuxt.config.ts file :

    htmlAttrs: {
      'xmlns:og': 'http://ogp.me/ns#' 
    },
    meta: [
      {
        name: 'keywords',
        content:
          'some, random, keywords'
      },
      {
        name: 'theme-color',
        content: '#FFFFFF',
        media: '(prefers-color-scheme: light)'
      },
      {
        name: 'theme-color',
        content: '#2A2A2A',
        media: '(prefers-color-scheme: dark)'
      },
      { name: 'apple-mobile-web-app-title', content: 'Short name' },
      { property: 'image', content: '/banner.jpg' },
      { name: 'msapplication-TileColor', content: '#2a2a2a' }

Thank you in advance for your help ! 🙏

Improve icon generation to reduce cutoff

Follow-up of #40
Thanks to 8c1f8e2, the generation is running through now but the icon is cut off when height > width.

It'd be ideal to termine whether height > width, then running sharp(input).resize(undefined, Math.floor(size)) and else running ``sharp(input).resize(Math.floor(size))`

Result with current state:

Result with (harcoded) patch:

taliwind css module stops working

i tried to add this module on a project that had the tailwind css module on it, then all the tailwind classes stopped working. any idea? sorry if its not clear

runtimeCaching option

Hi there, I'm using the runtimeCaching option with workbox because my images are from a different domain.
I can see that workbox extra options are not supported for this module, could I use this module and still cache images from different domain ?

Missing properties in manifest interface

The following keys (and maybe others) are missing from the manifest interface: orientation, id, scope, crossorigin, screenshots, shortcuts, categories, related_applications.

manifest file generate wrong content on nuxi generate

environment

Operating System: Darwin
Node Version: v16.15.1
Nuxt Version: 3.0.0-rc.4
Package Manager: [email protected]
Builder: vite
User Config: css, tailwindcss, modules, pwa, buildModules, storyblok, build
Runtime Modules: @kevinmarrec/[email protected]
Build Modules: @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @storyblok/[email protected]

reproduction

https://github.com/jamaluddinrumi/getanah.v3

problem

both in local & live, when i do nuxi generate, manifest file is generating wrong content.

however, manifest file content is fine when i do nuxi build.

i'm looking the content inside of manifest file, it's shown below

and devtools returning error as shown below

and i tried to run with nuxt generate it shows an error when Initializing prerenderer

iOS Splash Screen Generator

Hi @kevinmarrec

I am @xlanex6 as Alex , french dev

I notice // TODO: Launch Screen Image (IOS) in meta.ts

As Nuxt user on my daily job, I will love this feature
I already done some work on my previous missions ( Nuxt 2 + PWA) but exited to build it for nuxt3.
Also I'm really rookie on OS project, but I already make nuxt3 module (meilisearch) and I would like to work on this feature.
Can I fork and make PR to this project ?
Is there some guide lines ? where I can find it ?

You can also DM on twitter at @xlanex6, discord (NuxtJS)...

Regards

Refer to assets using baseURL

sw, manifest, icons etc prefixing with baseURL seems to be better.

my nuxt sources files are not at root, and no manifest.json found

Hi,
in my nuxt.config.ts file, I set
srcDir: 'src',

and no manifest is found

how can I configure the pwa module for that?

[Bug] No service worker detected

Hey,

Thanks for this module!

I have a question regarding the service worker as it does not seem to be registered by default.

My nuxt.config.ts

  pwa: {
    manifest: {
      name: 'Test',
      short_name: 'Test'
    },
    workbox: {
      enabled: true
    }
  },

Add icon generation

Find a way to get rid of `any maskable` Lighthouse warnings

Warnings to fix :

How Can I precache and route custom folder, or public folder for example?

Hi,
when online, cached assets or assets in public folder are available
but when offline it's not anymore.
How can I tell the sw.js to precacheAndRoute specific files/folder?

Caching script requests breaks auth

I'm using the Nuxt Supabase module for auth and it doesn't work properly due to the following block in templates/workbox/sw.js

// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
registerRoute(
  ({ request }) =>
    request.destination === 'style' ||
    request.destination === 'script' ||
    request.destination === 'worker',
  new StaleWhileRevalidate({
    cacheName: 'assets',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] })
    ]
  })
)

Specifically, the request.destination === 'script' line is the cause -- if I comment out this line things work correctly.

The usual login sequence is that after being sent off to the auth provider (for example Azure) it redirects to something like:

http://localhost:8080/#access_token=xxx&expires_in=3600&provider_token=xxx&refresh_token=xxx&token_type=bearer

These token params usually get processed by the Supabase module, user is logged in, and URL becomes http://localhost:8080/

But the script caching prevents this from happening and things get stuck at the URL with the token params still showing.

Likewise if the user was already logged in before enabling this PWA module, the usual logout functionality doesn't work either.

Assuming when more workbox options are available via config this caching strategy and its destinations can be overridden?

For now the workaround is to comment out the line for script requests.

Meta: add `key`s to favicons

To be able to override the favicon, it would be nice to pass a key to the meta added ☺️

Do you have features like `auto update` or at least some api to detect when the page needs refresh.

I use vite-plugin-pwa in other projects and they provide a way to detect when the page needs an update.

How can we do the same with this plugin?

Thanks!

Want to add ` SVGA ` and ` SVG` format

urlPattern: /.(png|jpg|jpeg|svg|svga)./,

thank you

Title is always "Nuxt PWA"

The title of the PWA seems to be always "Nuxt PWA".

Config:

manifest: {
    name: 'RepoTracker',
    short_name: 'RepoTracker',
    description: 'Better GitHub Repository Stats and Insights',
    display: 'standalone',
    orientation: 'any',
    lang: 'en',
    start_url: '/track?standalone=true',
    scope: '/',
    crossorigin: 'use-credentials', // Required to make basic auth work.
    categories: [
      'productivity',
      'utilities',
    ],
},
pwa: {
  meta: {
    mobileAppIOS: true,
  },
}

Access generated icon via composable

Hey 👋🏻

it'd be amazing to be able to access the generated PWA icons via composable 😋(e.g. usePwaIcon(<SIZE>)), provide/inject or import 👏🏻

Similar to the plugin feature of the Nuxt2 part https://pwa.nuxtjs.org/icon

How to cache cdn images & API response

I don't know if there is support for cache images cdn & get api response, if so, how to use it?

Thank in advance

Allow registering more service workers

I'm trying to register another service worker on top of the workbox one... however, its been proven difficult

support of crossorigin="use-credentials" for basic auth

Thanks for your awesome work so far!

It would be great if we could have support for applications behind basic auth.

I think this should be possible by simply adding crossorigin: 'use-credentials' to the manifest.json link:

nuxt-pwa-module/src/parts/manifest/index.ts

Lines 29 to 32 in bdd4b4f

    
           pwa._manifestMeta = { 
        
             rel: 'manifest', 
        
             href: joinURL(nuxt.options.app.baseURL, 'manifest.json'), 
        
           }

(Souce: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)

as far as i can tell it is possible in the pwa-module for nuxt2. (https://pwa.nuxtjs.org/workbox#basic-auth)
(nuxt-community/pwa-module#94 (comment))

relates to #54

Fonts are not available offline

I have a PWA that mostly works offline except that the fonts only work when there is an internet connection. I'm not sure if there is something to add to the manifest and I'm not sure if there is a way to debug exactly what is happening. I tried the following in nuxt.config.ts:

export default defineNuxtConfig({
   // other stuff. etc...
  pwa: {
    manifest: {
      name: "My Name",
      lang: 'en'
    },
    workbox: {
      offlineAssets: [ "/fonts/*.ttf", "/fonts/*.woff", "/fonts/*.svg" ]
    }
},

But that doesn't help.

The fonts are in /public/fonts/*.ttf

As I said, the fonts work when the app starts up with an internet connection.

Error when installing 0.4.1

I get an error installing 0.4.1 via pnpm:

❯ pnpm install --shamefully-hoist
Packages: +18 -15
++++++++++++++++++---------------
Progress: resolved 1721, reused 1198, downloaded 0, added 0, done
node_modules/.pnpm/@[email protected]/node_modules/@kevinmarrec/nuxt-pwa: Running postinstall script...
 ELIFECYCLE  Command failed.

0.3.1 installs and works fine.

Icon generation breaks on (e.g.) 917x1188

Hey 👋🏻

When using e.g. this image for icon generation (as icon.png), the generation will fail during the masked icon generation with [Error: Image to composite must have same dimensions or smaller].

Page title Nuxt PWA

Hello @kevinmarrec, I'd like to ask a question regarding these two lines in the modules.ts file :

nuxt-pwa-module/src/module.ts

Line 24 in 4ac0c2f

name: process.env.npm_package_name! || 'Nuxt PWA',

nuxt-pwa-module/src/module.ts

Line 35 in 4ac0c2f

name: process.env.npm_package_name! || 'Nuxt PWA',

My question is : Can I change Nuxt PWA to undefined without regressions or side effect ? 🧐

I am asking you this because I have a bug during page transition (I opened an issue here) which lead to an undefined title during page transition. I can manage this problem with this option in my app.vue :

<script setup>
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk
      ? `${titleChunk} | Title website`
      : 'Title Website'
  }
})
</script>

The thing is the Nuxt PWA title is popping when I have no title.

Sans.titre.mov

Icons folder generated twice at build time

Hello @kevinmarrec !

I have a question regarding the generation of PWA icons during build. Do you know why icons are generated twice in the .output folder ?

I have a first folder icons under : .output/public/_nuxt/icons
and a second one under : .output/public/assets/icons

Is it actually something intended ? Is it possible to remove the second one as it is not used by the generated manifest.json file ?

Thank you in advance for your response ! 🙏

CSS not loading

Error:

Reproduce the error:

Install @kevinmarrec/nuxt-pwa on this repo vitesse-nuxt3
Add config as in Official example
Reload pages to see the error

Error when trying to update the ServiceWorker

I'm using this plugin and it does works nicely.

But my Sentry report is getting spammed with a lot of errors that comes as Unhandled

Failed to update a ServiceWorker for scope ('https://app....') with script ('https://app.../sw.js'): An unknown error occurred when fetching the script.

I can't manage to find the root cause. I've already set the base, scope urls but still the same.

export const pwaConfig: Partial<VitePWAOptions> = {
    registerType: 'prompt',
    minify: true,
    scope: '/',
    base: '/',
    manifest: {
        scope: '/',

One thing I noticed is that if you are deploying your application and your UI request the sw.js file it will failed also with unhandled so maybe this is something that can be managed differently.

This is my configuration:

<script lang="ts" setup>
    import { useRegisterSW } from 'virtual:pwa-register/vue';
    import { ref } from 'vue';

    const isLoading = ref(false);
    const intervalMS = 45 * 1000;
    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
        onRegistered(r) {
            r &&
                setInterval(() => {
                    r.update();
                }, intervalMS);
        },
    });

    const handleUpdate = () => {
        isLoading.value = true;
        updateServiceWorker();
    };

    const close = async () => {
        offlineReady.value = false;
        needRefresh.value = false;
    };
</script>

Any help is more than welcome since the amount of errors is pilling up and I may have to consider stop using the plugin or look into another solution.

Thanks!

`useNuxt().options.runtimeConfig.public.pwaManifest` is undefined

When I run nuxi dev/generate/build, I always encounter this error.

 ERROR  Cannot set properties of undefined (setting 'pwaManifest')                                                                                                                                   21:50:41  

  at manifest (/node_modules/@kevinmarrec/nuxt-pwa/dist/module.mjs:160:49)
  at setup (/node_modules/@kevinmarrec/nuxt-pwa/dist/module.mjs:379:13)
  at async normalizedModule (/node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async installModule (/node_modules/@nuxt/kit/dist/index.mjs:416:3)
  at async initNuxt (/node_modules/nuxt/dist/index.mjs:1827:7)
  at async loadNuxt (/node_modules/nuxt/dist/index.mjs:1859:5)
  at async loadNuxt (/node_modules/@nuxt/kit/dist/index.mjs:493:19)
  at async Object.invoke (/node_modules/nuxi/dist/chunks/build.mjs:34:18)
  at async _main (/node_modules/nuxi/dist/cli.mjs:50:20)

The code that throw error.

Code

const manifest = (pwa) => {
  if (!pwa.manifest)
    return;
  const nuxt = useNuxt();
  nuxt.options.runtimeConfig.public.pwaManifest = pwa.manifest;
  if (nuxt.options.ssr) {
    addServerHandler({
      route: "/manifest.json",
      handler: pwa._resolver.resolve("./runtime/server/manifest")
    });
  } else {
    addTemplate({
      filename: "manifest.json",
      getContents: () => JSON.stringify(pwa.manifest),
      dst: join(pwa._buildDir, "manifest.json"),
      write: true
    });
  }
  pwa._manifestMeta = {
    rel: "manifest",
    href: joinURL(nuxt.options.app.baseURL, "manifest.json")
  };
};

Ouput of nuxt info.

Details

Operating System: Windows_NT
Node Version: v18.12.1
Nuxt Version: 3.0.0-rc.14
Nitro Version: 1.0.0
Package Manager: [email protected]
Builder: vite
User Config: build, css, typescript, modules, colorMode, unocss, vueuse, vite
Runtime Modules: @kevinmarrec/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @unocss/[email protected], @vueuse/[email protected]
Build Modules: -

Lighthouse Indexeddb Warning

Hi, how To Fix Lighthouse Indexeddb Warning :
"There may be stored data affecting loading performance in this location: IndexedDB"

Add tests

I should add some tests in a near future, for stability.

Using https://github.com/vitest-dev/vitest of course :)

Manifest default 'theme_color' gets injected as duplicate meta 'theme-color'

The default for theme_color in the manifest is set to #000000. This gets somehow injected as a duplicate theme-color meta tag in the header and overrides the normal theme-color from meta. You can see this, when adding this in nuxt.config.ts:

app: {
  head: {
    meta: [
      { name: 'theme-color', content: '#FFFFFF' },
    }
  }
}

and opening the app in Chrome mobile. The theme will be black.

Here's the HTML output:

A note on setting meta tags automatically from manifest... I think that is not a good idea at all, or at least they should not override existing meta tags because the meta tags can be controlled dynamically in the code whereas manifest can not.

In my app for instance, I want to set the theme-color dynamically from the theme the app uses, which works perfectly if they are set and updated as meta tags in Nuxt 2.

Demo: https://pwa.journalisticapp.com

Start_url issue and custom splash screen does not have name

Steps to reproduce

add this module to project (nuxt 3 + vuetify3 + pinia is present in project) cloudflare preset is used
run npm run build
run this command to serve npx miniflare .output/server/index.mjs --site .output/public
open dev tool and generate report on lighthouse

No service worker and start_url are registered

Hello!
I've update the module to 0.6.1 and I've always the same error of #32 issue...

It's strange because when I look at the services workers in the browser, it appears well...

I was able to install the application on a mobile but the installation time was very long and not natural...

I didn't get the notification either, I had to install it manually.

Here are some screenshots of the worker service in the browser and the return of Lighthouse:

Disabling auto-registration?

The Nuxt 2 PWA module has an autoRegister setting which determines if the Service Worker should auto-magically be registered or not. This also appears to be the default behavior in this module, but as far as I can tell, there's no option to turn it off and register manually.

Cannot find modules on nuxt dev command causing 503 Server Unavailable

Hello @kevinmarrec, Thank you for the update of v0.4.0!!

However, I can see this warning when building the app with nuxt build command :

 WARN  '/Users/User/Documents/Nuxt_App/node_modules/@kevinmarrec/nuxt-pwa/dist/parts/manifest/handler' is imported by virtual:#internal/nitro/virtual/server-handlers, but could not be resolved – treating it as an external dependency

and I have a fatal error on nuxt dev command :

 ERROR  [worker reload] [worker init] Cannot find module '/Users/User/@kevinmarrec/nuxt-pwa/dist/parts/manifest/handler' imported from /Users/User/Documents/Nuxt_App/.nuxt/dev/index.mjs

  at new NodeError (node:internal/errors:372:5)
  at finalizeResolution (node:internal/modules/esm/resolve:437:11)
  at moduleResolve (node:internal/modules/esm/resolve:1009:10)
  at defaultResolve (node:internal/modules/esm/resolve:1218:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
  at link (node:internal/modules/esm/module_job:78:36)

Manifest and SW not working properly

Hello @kevinmarrec, I have a new issue with the PWA module (I promise it's not against you 😅). It's quite similar to this issue. When starting a fresh nuxt project and building the app, I don't have the manifest.[hash].json created under the .output/publicdirectory.

I created this public repository with reproduction

My config :

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.0.0-rc.6`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `pwa`
- Runtime Modules:  `@kevinmarrec/[email protected]`
- Build Modules:    `-`
------------------------------

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: [
        '@kevinmarrec/nuxt-pwa'
    ],
    pwa: {
        workbox: {
          enabled: true
        },
        icon: {
          source: './assets/pwa-512x512.png'
        },
        meta: {
          /* meta options */
        },
        manifest: {
          name: 'A name',
          short_name: 'Short Name',
          description: 'A random description',
          theme_color: '#ffffff',
          background_color: '#ffffff',
          display: 'standalone',
          lang: 'fr'
        }
      },
})