Git Product home page Git Product logo

astro's Introduction

@vite-pwa/astro - Zero-config PWA Integration for Astro
Zero-config PWA Integration for Astro

NPM version NPM Downloads Docs & Guides
GitHub stars


๐Ÿš€ Features

  • ๐Ÿ“– Documentation & guides
  • ๐Ÿ‘Œ Zero-Config: sensible built-in default configs for common use cases
  • ๐Ÿ”ฉ Extensible: expose the full ability to customize the behavior of the plugin
  • ๐Ÿฆพ Type Strong: written in TypeScript
  • ๐Ÿ”Œ Offline Support: generate service worker with offline support (via Workbox)
  • โšก Fully tree shakable: auto inject Web App Manifest
  • ๐Ÿ’ฌ Prompt for new content: built-in support for Vanilla JavaScript, Vue 3, React, Svelte, SolidJS and Preact
  • โš™๏ธ Stale-while-revalidate: automatic reload when new content is available
  • โœจ Static assets handling: configure static assets for offline support
  • ๐Ÿž Development Support: debug your custom service worker logic as you develop your application
  • ๐Ÿ› ๏ธ Versatile: integration with meta frameworks: รฎles, SvelteKit, VitePress, Astro, Nuxt 3 and Remix
  • ๐Ÿ’ฅ PWA Assets Generator: generate all the PWA assets from a single command and a single source image
  • ๐Ÿš€ PWA Assets Integration: serving, generating and injecting PWA Assets on the fly in your application

๐Ÿ“ฆ Install

From v0.2.0, @vite-pwa/astro requires Vite 5 and Astro 4.0.0 or above.

Using any version older than v0.2.0 requires Vite 3.1.0+.

npm i @vite-pwa/astro -D 

# yarn 
yarn add @vite-pwa/astro -D

# pnpm 
pnpm add @vite-pwa/astro -D

๐Ÿฆ„ Usage

Add @vite-pwa/astro integration to astro.config.mjs and configure it:

// astro.config.mjs
import { defineConfig } from 'astro/config'
import AstroPWA from '@vite-pwa/astro'

// https://astro.build/config
export default defineConfig({
  integrations: [AstroPWA()]
})

Read the ๐Ÿ“– documentation for a complete guide on how to configure and use this plugin.

โšก๏ธ Examples

You need to stop the dev server once started and then run npm run build && npm run preview to see the PWA in action.

Example Source Playground
Auto Update PWA GitHub Open in StackBlitz
Prompt for Update PWA GitHub Open in StackBlitz

๐Ÿ‘€ Full config

Check out the following links for more details:

๐Ÿ“„ License

MIT License ยฉ 2022-PRESENT Anthony Fu

astro's People

Contributors

leomp12 avatar userquin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

astro's Issues

pwa-assets-generator build failed

Error
npx pwa-assets-generator 
C:\Users\felfel\Desktop\dev\fruitUI\node_modules.pnpm\s[email protected]\node_modules\sharp\lib\sharp.js:114
  throw new Error(help.join('\n'));
        ^

Error: Could not load the "sharp" module using the win32-x64 runtime
ERR_DLOPEN_FAILED: The specified procedure could not be found.
\?\C:\Users\felfel\Desktop\dev\fruitUI\node_modules.pnpm@[email protected]\node_modules@img\sharp-win32-x64\lib\sharp-win32-x64.node
Possible solutions:
Ensure optional dependencies can be installed:
  npm install --include=optional sharp
  yarn add sharp --ignore-engines
Ensure your package manager supports multi-platform installation:
  See https://sharp.pixelplumbing.com/install#cross-platform
Add platform-specific dependencies:
  npm install --os=win32 --cpu=x64 sharp
Using the canvas package on Windows?
  See https://sharp.pixelplumbing.com/install#canvas-and-windows
Check for outdated versions of sharp in the dependency tree:
  npm ls sharp
Consult the installation documentation:
  See https://sharp.pixelplumbing.com/install
  at Object.<anonymous> (C:\Users\felfel\Desktop\dev\fruitUI\node_modules.pnpm\s[email protected]\node_modules\sharp\lib\sharp.js:114:9)
  at Module._compile (node:internal/modules/cjs/loader:1376:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
  at Module.load (node:internal/modules/cjs/loader:1207:32)
  at Module._load (node:internal/modules/cjs/loader:1023:12)
  at Module.require (node:internal/modules/cjs/loader:1235:19)
  at require (node:internal/modules/helpers:176:18)
  at Object.<anonymous> (C:\Users\felfel\Desktop\dev\fruitUI\node_modules.pnpm\s[email protected]\node_modules\sharp\lib\constnode_modules\sharp\lib\constructor.js:10:1)
  at Module._compile (node:internal/modules/cjs/loader:1376:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)

https://vscode.dev/github/spices-solutions/fruitUI/tree/refactor

image

Issues on cloudflare

At first, thanks for the great work!

I am playing around with an empty astro project, but I have issues using @vite-pwa/astro.
Everything works locally, but online I get the following error (registerSW.js).

Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]
    at O.createHandlerBoundToURL (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:13245)
    at Object.createHandlerBoundToURL (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:14916)
    at https://my-astro-project.***.workers.dev/sw.js:1:3208
    at https://my-astro-project.***.workers.dev/sw.js:1:565


Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://my-astro-project.***.workers.dev/$server_build/registerSW.js","status":500}]
    at E.O (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:10472)
    at async E._ (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:10024)
    at async E.U (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:9148)
O @ workbox-72ec71a1.js:1
setTimeout (async)
(anonymous) @ workbox-72ec71a1.js:1
cachePut @ workbox-72ec71a1.js:1
O @ workbox-72ec71a1.js:1
await in O (async)
_ @ workbox-72ec71a1.js:1
await in _ (async)
U @ workbox-72ec71a1.js:1
await in U (async)
handleAll @ workbox-72ec71a1.js:1
(anonymous) @ workbox-72ec71a1.js:1
await in (anonymous) (async)
d @ workbox-72ec71a1.js:1
install @ workbox-72ec71a1.js:1

Any Idea?

change image title

the hero image should be for Astro, like the title: Zero-config PWA Plugin for Astro

@antfu do you like that change? If so, can you change/provide the hero image?

Issues on cloudflare

At first, thanks for the great work!

I am playing around with an empty astro project, but I have issues using @vite-pwa/astro.
Everything works locally, but online I get the following error (registerSW.js).

Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]
    at O.createHandlerBoundToURL (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:13245)
    at Object.createHandlerBoundToURL (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:14916)
    at https://my-astro-project.***.workers.dev/sw.js:1:3208
    at https://my-astro-project.***.workers.dev/sw.js:1:565


Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://my-astro-project.***.workers.dev/$server_build/registerSW.js","status":500}]
    at E.O (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:10472)
    at async E._ (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:10024)
    at async E.U (https://my-astro-project.***.workers.dev/workbox-72ec71a1.js:1:9148)
O @ workbox-72ec71a1.js:1
setTimeout (async)
(anonymous) @ workbox-72ec71a1.js:1
cachePut @ workbox-72ec71a1.js:1
O @ workbox-72ec71a1.js:1
await in O (async)
_ @ workbox-72ec71a1.js:1
await in _ (async)
U @ workbox-72ec71a1.js:1
await in U (async)
handleAll @ workbox-72ec71a1.js:1
(anonymous) @ workbox-72ec71a1.js:1
await in (anonymous) (async)
d @ workbox-72ec71a1.js:1
install @ workbox-72ec71a1.js:1

Any Idea?

Always show 404 page on all pages except root

All links no longer work
After clicking on any link if developer console closed I see a 404 page, if open noting happens

My config

AstroPWA({
  mode: 'development',
  base: '/',
  scope: '/',
  registerType: 'autoUpdate',
  manifest,
  includeAssets: ['**/favicons/*.{png,svg,ico,xml}'],
  workbox: {
    navigateFallback: '/404',
    globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
  },
  devOptions: {
    enabled: true,
    navigateFallbackAllowlist: [/^\/404$/],
  },
}),

Click on /help/ link
image

`@vite-pwa/[email protected]` breaks the asset generator

Hi,
After updating @vite-pwa/astro to 0.3.1 from 0.3.0, the asset generator doesn't work properly.
It still generates the artifacts, but specifically, import { pwaAssetsHead } from 'virtual:pwa-assets/head' does not work as expected anymore, as the links array inside of it is empty so it can't be used to render any of the required links or the theme-color meta tag.
Reverting it back to 0.3.0 fixed the problem for now.

Astro 2.0.x has not been supported yet?

Hi, developers. Thank you for this awesome astro integration.

I tried to configure my project that depends on [email protected] to integrate this pwa plugin , but the following error was occurred.

02:47:00โ€ฏPM [astro] Unable to load /workspaces/takpedia/astro.config.mjs

 error   Cannot read properties of undefined (reading 'default')
  File:
    /workspaces/takpedia/node_modules/vite/dist/node/chunks/dep-3007b26d.js:52400:9
  Code:
    52399 |         const initModule = new AsyncFunction(`global`, ssrModuleExportsKey, ssrImportMetaKey, ssrImportKey, ssrDynamicImportKey, ssrExportAllKey, '"use strict";' + result.code + `\n//# sourceURL=${mod.url}`);
    > 52400 |         await initModule(context.global, ssrModule, ssrImportMeta, ssrImport, ssrDynamicImport, ssrExportAll);
            |         ^
      52401 |     }
      52402 |     catch (e) {
      52403 |         mod.ssrError = e;
  Stacktrace:
TypeError: Cannot read properties of undefined (reading 'default')
    at eval (/workspaces/takpedia/astro.config.mjs:21:172)
    at async instantiateModule (file:///workspaces/takpedia/node_modules/vite/dist/node/chunks/dep-3007b26d.js:52400:9)

After that, I also tried to reproduce it with creating new clean project with npm create astro command. Same error was occurred at the project too.

The clean project's astro.config.mjs is simply the below. (They were generated by create astro and were added only configurations for pwa integration.)

{
	"name": "nebulous-neutron",
	"type": "module",
	"version": "0.0.1",
	"scripts": {
		"dev": "astro dev",
		"start": "astro dev",
		"build": "astro build",
		"preview": "astro preview",
		"astro": "astro"
	},
	"dependencies": {
		"astro": "^2.0.14"
	},
	"devDependencies": {
		"@vite-pwa/astro": "^0.0.1"
	}
}
import AstroPWA from "@vite-pwa/astro"

// https://astro.build/config
export default defineConfig({
    integrations: [
        AstroPWA()
    ]
});

No cached compile metadata found [...]

Hello, there is any fix for PWA in dev mode? It works okay on production, but during the testing all the time I need to force refresh the pages few times, because of this error:

[ERROR] [vite] Internal server error: No cached compile metadata found for "/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/components/ViewTransitions.astro?astro&type=style&index=0&lang.css". The main Astro module "C:/www/sds/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/components/ViewTransitions.astro" should have compiled and filled the metadata first, before its virtual modules can be requested.

I'm using "astro": "^4.5.6", and pnpm (on Windows).

image

Mutilanguage support

Hello, thx for this PWA integration, it's great!

BTW. I have one issue with config second language. I have a page like mydomain.com and mydomain.com/pl/ with static pages generated by Astro.

It will be great to configure it like method 2 here:
https://dev.to/progressier/how-to-translate-a-pwa-app-manifest-2e7i

with Accept-Language, what do you think?

Or it will be better to make some workaround to detect system language and switch?

Trailing slash resolves in 404

Hi,
The pwa works great but I would like to know how to redirect
/blog/post/ to blog/post trailing slashes in the url are not resolving.

It is a static build

build: {
    format: "file"
  },
AstroPWA({
      mode: "production",
      base: "/",
      scope: "/",
      includeAssets: [`icons/${process.env.THEME}/favicon.svg`],
      registerType: "autoUpdate",
      manifest: manifest,
      workbox: {
        navigateFallback: "/404",
        globPatterns: ["**/*.{js,css,html,txt,json,svg,woff,woff2,ico,xml}"],
      },
      devOptions: {
        enabled: false,
        navigateFallbackAllowlist: [/^\/404$/],
      },
    }),

Hotreloading dev throws [postcss] ...: Unknown word error

Hi!

I'm trying to create a PWA using astro, but during development, when hot reloading the project I always get the following error:

warnings
  One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "/Users/christianag/projects/mur/dev-dist",
  "globPattern": "**/*.{css,js,html,svg,png,ico,txt}",
  "globIgnores": [
    "**/node_modules/**/*",
    "sw.js",
    "workbox-*.js"
  ]
}

01:27:39 AM [astro] update /dev-dist/sw.js
01:27:39 AM [astro] update /dev-dist/workbox-ab7aa862.js
01:27:49 AM [astro] reload /src/pages/index.astro
1:27:49 AM [vite] Internal server error: [postcss] /Users/christianag/projects/mur/src/pages/index.astro?astro&type=style&index=0&lang.css:1:1: Unknown word
  Plugin: vite:css
  File: /Users/christianag/projects/mur/src/pages/index.astro?astro&type=style&index=0&lang.css:1:1
  1  |  ---
     |   ^
  2  |  import Layout from "../layouts/Layout.astro";
  3  |  import Card from "../components/Card.astro";
      at Input.error (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/input.js:106:16)
      at Parser.unknownWord (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:594:22)
      at Parser.other (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:436:12)
      at Parser.parse (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:471:16)
      at parse (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/processor.js:53:14)
      at compileCSS (file:///Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:38898:63)
      at async TransformContext.transform (file:///Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:38295:56)
      at async Object.transform (file:///Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:44345:30)
      at async loadAndTransform (file:///Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:55015:29)
      at async viteTransformMiddleware (file:///Users/christianag/projects/mur/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:64417:32)

The hotreloading always work up until the top warning is posted in the terminal, and then it gives me the error.

These are my deps:

    "@astrojs/tailwind": "^5.0.2",
    "@astrojs/vercel": "^5.0.2",
    "@vercel/analytics": "^1.1.1",
    "astro": "^3.3.0",
    "tailwindcss": "^3.0.24",
    "@vite-pwa/astro": "^0.1.3",
    "prettier": "^3.0.3",
    "prettier-plugin-astro": "^0.12.0",
    "vite-plugin-pwa": "^0.16.5"

I've tried downgrading Astro to version 2 and matched the peer deps accordingly, but I have the same issue there.

AstroPWA config:

export default defineConfig({
  integrations: [
    tailwind(),
    AstroPWA({
      base: "/",
      scope: "/",
      includeAssets: ["favicon.svg"],
      registerType: "autoUpdate",
      manifest: {
        name: "...",
        short_name: "...",
        theme_color: "#ffffff",
        display: "fullscreen",
        orientation: "landscape",
        icons: [
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any maskable",
          },
        ],
      },
      workbox: {
        navigateFallback: null,
        globPatterns: ["**/*.{css,js,html,svg,png,ico,txt}"],
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],
  output: "server",
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
    speedInsights: {
      enabled: true,
    },
    imageService: true,
  }),
});

I've tried replicating both examples here in the example directory with the same outcome.
Any insights for me? It seems I can't get around this issue.

Feature: i18n manifest.json generation

I maintain astro-i18n-aut, an internalization (i18n) framework for Astro. Astro itself is preparing to support i18n in core.

It is possible to localize a PWA web manifest, but the current config assumes only one language.

There are issues in other vite-pwa packages describing similar functionality:

It would be wonderful to support i18n in @vite-pwa/astro


In the meantime, would I be able to add it myself if I:

  • disable the manifest with manifest: false, and includeManifestIcons: false,
  • create my own i18n webmanifest files using Astro endpoints
  • use the cli to generate icons

Cannot find module 'virtual:pwa-assets/head' or its corresponding type declarations.

Hi,

I tried downloading the new added example pwa-simple-assets-generator

and I got the following error

"Cannot find module 'virtual:pwa-assets/head' or its corresponding type declarations."

on the DefaultLayout.astro file

https://codesandbox.io/p/github/zanhk/astro-pwa-simple-assets-generator

Am i missing something?

also i think the example is missing the package dependency

"@vite-pwa/assets-generator"

as the terminal give the error

WARNING: you must install the following dev dependencies to use the PWA assets generator:
- "@vite-pwa/assets-generator"
- "sharp" (should be installed when installing @vite-pwa/assets-generator)
- "sharp-ico" (should be installed when installing @vite-pwa/assets-generator)

Thanks

npm audit report vulnerability of a dependency

โฏ npm audit                  
# npm audit report

trim  <0.0.3
Severity: high
Regular Expression Denial of Service in trim - https://github.com/advisories/GHSA-w5p7-h5w8-2hfq
No fix available
node_modules/trim
  mdast-util-to-hast  <=6.0.2
  Depends on vulnerable versions of trim
  node_modules/decap-cms-widget-markdown/node_modules/mdast-util-to-hast
    remark-rehype  <=5.0.0
    Depends on vulnerable versions of mdast-util-to-hast
    node_modules/decap-cms-widget-markdown/node_modules/remark-rehype
  remark-parse  <=8.0.3
  Depends on vulnerable versions of trim
  node_modules/decap-cms-widget-markdown/node_modules/remark-parse
    decap-cms-widget-markdown  *
    Depends on vulnerable versions of remark-parse
    Depends on vulnerable versions of remark-rehype
    node_modules/decap-cms-widget-markdown
      decap-cms-app  *
      Depends on vulnerable versions of decap-cms-widget-markdown
      node_modules/decap-cms-app

While this may not be a bigger issue as dev dependency, but worth noting.

examples/pwa-prompt SW not registering in Brave for Offline support

Starting from the pwa-prompt example in this repo I successfully got it working on my desktop with the node server, pnpm preview, shut down if the PWA was installed first.

However when I try to do the same from my mobile phone the offline support isn't working

On my development computer I'm using Brave, and on my Android am also using brave. On my laptop I did have to set the service working offline setting to in Dev Tools (ctrl + J) > Application > Service Workers > Offline, and I also did this on my Android's Brave browser over usb debugging.

Oddly in the USB debugging menu inspecting the PWA shows no registered service worker.

Could this possibly have to do with laptop accessing the PWA from localhost while the mobile browser is receiving it from the laptop's ip in the search bar? Having offline support on a mobile device is key for what I'm trying to prototype but haven't yet been able to get any on the existing examples to work offline on mobile.

Uncaught ReferenceError: _page4 is not defined at bundledWorker-0.8194009624159182.mjs:2149:38

Not sure what I am missing but when I build the the project on the file

_worker.js/index.js

there is a missing declaration of _page4 and _page6 which are later used on pageMap

const _page0 = () => import('./chunks/image-endpoint_RvDj3-CK.mjs');
const _page1 = () => import('./chunks/keystatic-api_Bfk-cUm8.mjs');
const _page2 = () => import('./chunks/keystatic-astro-page_DIVZxRMu.mjs');
const pageMap = new Map([
    ["node_modules/@astrojs/cloudflare/dist/entrypoints/image-endpoint.js", _page0],
    ["node_modules/@keystatic/astro/internal/keystatic-api.js", _page1],
    ["node_modules/@keystatic/astro/internal/keystatic-astro-page.astro", _page2],
    
    ["src/pages/post/[...slug].astro", _page4],
    
    ["src/pages/[...slug].astro", _page6]
]);

Full build log:

E:\repositories\majestico\antares>bun run build
$ astro build
10:12:49 [WARN] The currently selected adapter `@astrojs/cloudflare` is not compatible with the image service "Sharp".
10:12:50 [build] output: "hybrid"
10:12:50 [build] directory: E:\repositories\majestico\antares\dist\
10:12:50 [build] adapter: @astrojs/cloudflare
10:12:50 [build] Collecting build info...
10:12:50 [build] โœ“ Completed in 639ms.
10:12:50 [build] Building hybrid entrypoints...
10:12:53 [astro-icon] Loaded icons from src/icons, ic, mdi, solar
Generated an empty chunk: "pages/image-endpoint.js".
10:12:59 [vite] โœ“ built in 8.70s
10:12:59 [build] โœ“ Completed in 8.74s.

 building client (vite) 
10:13:04 [vite] โœ“ 1183 modules transformed.
Generated an empty chunk: "hoisted".
10:13:06 [vite] dist/manifest.webmanifest                                                      0.45 kB
10:13:06 [vite] dist/_astro/Highlights.astro_astro_type_script_index_0_lang.BaCW6DQl.js        0.30 kB โ”‚ gzip:   0.23 kB
10:13:06 [vite] dist/_astro/hoisted.B_gY8znj.js                                                0.47 kB โ”‚ gzip:   0.29 kB
10:13:06 [vite] dist/_astro/Testimonials.astro_astro_type_script_index_0_lang.CL6AE6rR.js      0.69 kB โ”‚ gzip:   0.31 kB
10:13:06 [vite] dist/_astro/client.DWoRQa5Q.js                                                 1.56 kB โ”‚ gzip:   0.81 kB
10:13:06 [vite] dist/_astro/workbox-window.prod.es5.DFjpnwFp.js                                5.29 kB โ”‚ gzip:   2.19 kB
10:13:06 [vite] dist/_astro/hoisted.Bd2Fo4VE.js                                               14.96 kB โ”‚ gzip:   5.41 kB
10:13:06 [vite] dist/_astro/Hero.astro_astro_type_script_index_0_lang.r2T_yKjW.js             16.50 kB โ”‚ gzip:   5.72 kB
10:13:06 [vite] dist/_astro/ScrollTrigger.BS49OFpx.js                                         42.88 kB โ”‚ gzip:  17.91 kB
10:13:06 [vite] dist/_astro/page.BIe0mclZ.js                                                  43.67 kB โ”‚ gzip:  15.77 kB
10:13:06 [vite] dist/_astro/index.ZORhgBxb.js                                                 69.87 kB โ”‚ gzip:  27.65 kB
10:13:06 [vite] dist/_astro/index.ClJOJl_Y.js                                                141.89 kB โ”‚ gzip:  45.63 kB
10:13:06 [vite] dist/_astro/keystatic-page.DeFKh_T3.js                                     2,501.72 kB โ”‚ gzip: 774.46 kB
10:13:06 [WARN] [vite]
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
10:13:06 [vite] โœ“ built in 6.93s

PWA v0.19.8
mode      generateSW
precache  34 entries (3847.74 KiB)
files generated
  dist/sw.js
  dist/workbox-7cfec069.js

 prerendering static routes 
10:13:08 โ–ถ src/pages/404.astro
10:13:08   โ””โ”€ /404.html (+20ms)
10:13:08 โ–ถ src/pages/post/[...slug].astro
10:13:08 ฮป src/pages/rss.xml.js
10:13:08   โ””โ”€ /rss.xml10:13:08 [WARN] [router] No API Route handler exists for the method "GET" for the route "/rss.xml".
Found handlers: "get"

 (+1ms)
10:13:08 โ–ถ src/pages/[...slug].astro
10:13:08   โ”œโ”€ /index.html (+40ms)
10:13:08   โ””โ”€ /prenota/index.html (+6ms)
10:13:08 โœ“ Completed in 351ms.

 generating optimized images 
10:13:08   โ–ถ /_astro/background.x7SdbNqx_Z1tR8KA.webp (reused cache entry) (+1ms) (1/7)
10:13:08   โ–ถ /_astro/cover.Ctfop-R5_Z3JMed.webp (reused cache entry) (+0ms) (2/7)
10:13:08   โ–ถ /_astro/shutterstock_2285143617.CvtnyURn_ZRKDpv.webp (reused cache entry) (+0ms) (3/7)
10:13:08   โ–ถ /_astro/shutterstock_2182538863.DEKqqcdz_2hfRr9.webp (reused cache entry) (+0ms) (4/7)
10:13:08   โ–ถ /_astro/orthodontics.C1llijSB_nlLNI.webp (reused cache entry) (+0ms) (5/7)
10:13:08   โ–ถ /_astro/checkup.GXJZ2ypV_ZLYrav.webp (reused cache entry) (+0ms) (6/7)
10:13:08   โ–ถ /_astro/cover.Cw7VWPk8_Z1RxFs9.webp (reused cache entry) (+0ms) (7/7)
10:13:08 โœ“ Completed in 7ms.

10:13:08 
 finalizing server assets 

10:13:08 [build] Rearranging server assets...
10:13:08 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`

PWA v0.19.8
mode      generateSW
precache  39 entries (4070.33 KiB)
files generated
  dist/sw.js
  dist/workbox-7cfec069.js
10:13:09 [build] Server built in 19.45s
10:13:09 [build] Complete!

My configuration:

import alpinejs from "@astrojs/alpinejs";
import cloudflare from "@astrojs/cloudflare";
import markdoc from "@astrojs/markdoc";
import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import keystatic from "@keystatic/astro";
import AstroPWA from "@vite-pwa/astro";
import icon from "astro-icon";
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
	site: "https://antares.majestico.it",
	output: "hybrid",
	adapter: cloudflare({
		imageService: "compile",
	}),
	markdown: {
		drafts: true,
		shikiConfig: {
			theme: "css-variables",
		},
	},
	i18n: {
		defaultLocale: "it",
		locales: ["en", "it"],
	},
	shikiConfig: {
		wrap: true,
		skipInline: false,
		drafts: true,
	},
	redirects: {
		"/admin": "/keystatic",
	},
	vite: {
		define: {
			__DATE__: `'${new Date().toISOString()}'`,
		},
	},
	integrations: [
		alpinejs(),
		tailwind({
			// Base style is applied on the file global.css
			applyBaseStyles: false,
		}),
		sitemap(),
		icon(),
		react(),
		markdoc(),
		keystatic(),
		AstroPWA({
			mode: import.meta.env.PROD ? "production" : "development",
			base: "/",
			scope: "/",
			includeAssets: ["favicon.svg"],
			registerType: "autoUpdate",
			injectRegister: false,
			manifest: {
				name: "Astro PWA",
				short_name: "Astro PWA",
				theme_color: "#ffffff",
			},
			pwaAssets: {
				config: true,
			},
			workbox: {
				navigateFallback: "/",
				globPatterns: ["**/*.{css,js,html,svg,png,ico,txt}"],
				navigateFallbackDenylist: [/^\/keystatic/, /^\/api/],
				skipWaiting: true,
				maximumFileSizeToCacheInBytes: 3 * 1024 * 1024,
			},
			devOptions: {
				enabled: false,
				navigateFallbackAllowlist: [/^\//],
			},
			experimental: {
				directoryAndTrailingSlashHandler: true,
			},
		}),
	],
});

output is hybrid but both slugs (pages/[...slug].astro and pages/post/[...slug].astro) are statically built.

import { registerSW } from "virtual:pwa-register";

registerSW({
	immediate: true,
	onRegisteredSW(swScriptUrl) {
		// eslint-disable-next-line no-console
		console.log("SW registered: ", swScriptUrl);
	},
	onOfflineReady() {
		// eslint-disable-next-line no-console
		console.log("PWA application ready to work offline");
	},
});
{
	"name": "@majesticostudio/altair",
	"type": "module",
	"version": "0.0.1",
	"private": true,
	"repository": {
		"type": "git",
		"url": "https://github.com/majesticostudio/altair.git"
	},
	"bugs": "https://github.com/majesticostudio/altair/issues",
	"homepage": "https://github.com/majesticostudio/altair",
	"scripts": {
		"dev": "astro dev",
		"start": "astro dev",
		"build": "astro build",
		"preview": "astro preview",
		"astro": "astro",
		"wrangler:dev": "wrangler pages dev",
		"pwa:generate-assets": "pwa-assets-generator --preset minimal public/logo.svg"
	},
	"dependencies": {
		"@astrojs/alpinejs": "^0.4.0",
		"@astrojs/cloudflare": "^10.2.0",
		"@astrojs/markdoc": "^0.10.0",
		"@astrojs/react": "^3.3.0",
		"@astrojs/rss": "^4.0.5",
		"@astrojs/sitemap": "^3.1.4",
		"@astrojs/tailwind": "^5.1.0",
		"@cloudflare/pages-plugin-mailchannels": "^0.1.3",
		"@keystatic/astro": "^5.0.0",
		"@keystatic/core": "^0.5.11",
		"alpinejs": "^3.13.8",
		"astro": "^4.6.3",
		"gsap": "npm:@gsap/business@^3.12.5",
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	},
	"devDependencies": {
		"@astrolib/seo": "1.0.0-beta.5",
		"@biomejs/biome": "1.7.0",
		"@cloudflare/workers-types": "^4.20240419.0",
		"@iconify-json/ic": "^1.1.17",
		"@iconify-json/mdi": "^1.1.66",
		"@iconify-json/solar": "^1.1.9",
		"@tailwindcss/aspect-ratio": "^0.4.2",
		"@tailwindcss/forms": "^0.5.7",
		"@tailwindcss/typography": "^0.5.12",
		"@types/alpinejs": "^3.13.10",
		"@types/react": "^18.2.79",
		"@types/react-dom": "^18.2.25",
		"@vite-pwa/assets-generator": "^0.2.4",
		"@vite-pwa/astro": "^0.3.1",
		"astro-icon": "^1.1.0",
		"tailwindcss": "^3.4.3",
		"workbox-window": "^7.0.0",
		"sharp": "0.33.3"
	},
	"overrides": {
		"gsap": "npm:@gsap/business@^3.12.5",
		"sharp": "0.33.3"
	}
}

I m using view transitions and all packages are updated to the latest version.

What am I missing?

Thanks

Cannot find module 'virtual:pwa-info' or its corresponding type declarations

I have a typescript astro pwa that i am adding this plugin into. I cannot get the ts compiler to find the virtual module type definition no matter what i try. I have tried the following:

Added this entry into env.d.ts:

/// <reference types="vite-plugin-pwa/client" />

Added this to my tsconfig.json:

"types": ["vite-plugin-pwa/client"],

Nothing seems to be working. FWIW: both of these solutions were suggestions for the base vite-plugin-pwa in a typescript project. (vite-pwa/vite-plugin-pwa#40)

I am running plugin version:

"node_modules/@vite-pwa/astro": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@vite-pwa/astro/-/astro-0.1.1.tgz",
      "integrity": "sha512-ZImC5fFMekgXyyCEsed5y6R9srFhNfFqwNrOhpi9klOn0nju1eCwHKGodJGK9B4gjxZo35dc5lS5FHFinTOBcw==",
      "dev": true,
      "dependencies": {
        "vite-plugin-pwa": ">=0.16.3 <1"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "astro": "^1.6.0 || ^2.0.0",
        "vite-plugin-pwa": ">=0.16.3 <1"
      }
    },

Astro version:

"node_modules/astro": {
      "version": "2.10.9",
      "resolved": "https://registry.npmjs.org/astro/-/astro-2.10.9.tgz",
      "integrity": "sha512-rtm/RHeJdAIAsziQaAGvbv2ALylNNOF1SUQ0zJaugu/ABUU62tNGNSxIR0LO5l4+dHhLbzRNo5uEnIPkmSRw+w==",
      ...
    },

And typescript version:

"node_modules/typescript": {
      "version": "5.1.6",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
      },
      "engines": {
        "node": ">=14.17"
      }
    },

Cannot find module 'virtual:pwa-info' or its corresponding type declarations.

Hello,

I'm following the Prompt for Update PWA Example

Already done this but I can't find a way to disable TS2307 error

tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "types": [
      "astro/client",
      "vite-plugin-pwa/info",
      "vite-plugin-pwa/vanillajs"
    ],
  }
}

=> I got error here : Cannot find type definition file for 'vite-plugin-pwa/info'. The file is in the program because: Entry point of type library 'vite-plugin-pwa/info' specified in compilerOptions

env.d.ts:

/// <reference types="astro/client" />
/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/vanillajs" />

package.json:

{
  "name": "tarifs-besancon",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@1055/ui": "workspace:^1.0.0",
    "@astrojs/check": "^0.3.2",
    "astro": "^4.0.4",
    "sharp": "^0.33.0",
    "typescript": "^5.3.3"
  },
  "devDependencies": {
    "@vite-pwa/astro": "^0.2.0",
    "workbox-window": "^7.0.0"
  }
}

Everywhere I try to import virtual:pwa-info or virtual:pwa-register I got the TS2307 error

There nothing specific to Astro for type declaration in the docs so I don't know what to do

Wrong environment prefix. It should be `PUBLIC_` instead of `VITE_`

If you have client environment variables which should be included in the client side scripts, in Astro projects, they should have the prefix PUBLIC_ but if you want to include them in a custom service worker, it won't work because VitePWA is ignoring them.
That's because VitePWA is expecting variables with the prefix VITE_.

The default value for the environment prefix in Vite is VITE_ but in Astro that prefix is PUBLIC_ instead.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.