astro with astrowind installing AstroPWA | Astro Lounge | Page 1

fleet nacelle Jun 14, 2025, 11:26 PM

#

I'm trying to install AstroPWA with the lastest astro 5.9 version and the latest AstroWind template.

I've installed "@vite-pwa/astro" and in my astro.config added the following

import AstroPWA from "@vite-pwa/astro";

AstroPWA({
mode: 'development',
registerType: 'autoUpdate',
injectRegister: 'auto',
includeAssets: ['favicon.svg'],
workbox: {
navigateFallback: '/',
globDirectory: 'dist',
globPatterns: [
'**/*.{js,css,html,svg,png,ico,json,woff2}'
],
runtimeCaching: [
{
urlPattern: ({ request }) => request.destination === 'document',
handler: 'NetworkFirst',
},
{
urlPattern: ({ request }) =>
['style', 'script', 'image', 'font'].includes(request.destination),
handler: 'CacheFirst',
},
],
},
manifest: {
name: 'Name of site',
short_name: 'SHORT',
description: 'Description of site',
theme_color: '#0f172a',
background_color: '#0f172a',
display: 'standalone',
start_url: '/',
icons: [
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
]
},
experimental: { directoryAndTrailingSlashHandler: true }
})
]

I then created a component called ProgressiveWebApp.astro
import { pwaInfo } from 'virtual:pwa-info';

{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
<script type="module" src="/src/pwa.ts"></script>

created ReloadPrompt.astro and placed that in components

And referenced both in our Layout.astro

import ProgressiveWebApp from '@components/common/ProgressiveWebApp.astro';

<ReloadPrompt />

</body>
We also created our pwa.ts in the same directory
import { registerSW } from 'virtual:pwa-register';

dim roverBOT Jun 14, 2025, 11:26 PM

#

Hi @fleet nacelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

fleet nacelle Jun 14, 2025, 11:26 PM

#

const pwaToast = document.querySelector<HTMLDivElement>('#pwa-toast');
const pwaToastMessage = pwaToast?.querySelector<HTMLDivElement>('#toast-message');
const pwaCloseBtn = pwaToast?.querySelector<HTMLButtonElement>('#pwa-close');
const pwaRefreshBtn = pwaToast?.querySelector<HTMLButtonElement>('#pwa-refresh');

if (pwaToast && pwaToastMessage && pwaCloseBtn && pwaRefreshBtn) {
let refreshSW;

const refreshCallback = () => refreshSW?.(true);

const hidePwaToast = () => {
    if (pwaToast.classList.contains('refresh'))
        pwaRefreshBtn.removeEventListener('click', refreshCallback);
    pwaToast.classList.remove('show', 'refresh');
};

const showPwaToast = (offline: boolean) => {
    if (!offline) pwaRefreshBtn.addEventListener('click', refreshCallback);
    hidePwaToast();
    if (!offline) pwaToast.classList.add('refresh');
    pwaToast.classList.add('show');
};

pwaCloseBtn.addEventListener('click', () => hidePwaToast());

refreshSW = registerSW({
    immediate: true,
    onOfflineReady() {
        pwaToastMessage.innerHTML = 'App ready to work offline';
        showPwaToast(true);
    },
    onNeedRefresh() {
        pwaToastMessage.innerHTML = 'New content available, click on reload button to update';
        showPwaToast(false);
    },
    onRegisteredSW(swUrl) {
        console.log('Service Worker registered at:', swUrl);
    }
});

}

However when running dev we do not see the manifest or injection

dim roverBOT Jun 14, 2025, 11:26 PM

#

Based on the information in the provided knowledge sources, you are following the correct general approach for installing and configuring the @vite-pwa/astro (AstroPWA) integration with Astro 5.9 and the AstroWind template.

Here are the key points from the official documentation and integration listings:

Installation:
You should install the integration using your package manager:
```
npm install @vite-pwa/astro
```
or
```
pnpm add @vite-pwa/astro
```
or
```
yarn add @vite-pwa/astro
```
This matches your setup.
Configuration in astro.config.mjs:
The integration should be imported and added to the integrations array in your astro.config.mjs file. Your usage of AstroPWA({...}) in the config is consistent with how integrations are typically added in Astro:
```
import { defineConfig } from "astro/config";
import AstroPWA from "@vite-pwa/astro";

export default defineConfig({
  integrations: [
    AstroPWA({
      // ...your options
    })
  ]
});
```
This matches the standard pattern for Astro integrations as described in the configuration overview and project structure documentation [Configuration overview].
Manifest and Workbox Options:
Your manifest and workbox options are in line with typical PWA configurations. The knowledge sources do not provide the full set of options for @vite-pwa/astro, but your usage is consistent with common PWA setups.
Component Usage:
While the knowledge sources do not provide explicit details about using pwaInfo or the ProgressiveWebApp.astro component, your approach of referencing the PWA component in your layout and registering the service worker in pwa.ts is a standard PWA pattern.

#

AstroWind Compatibility:
The knowledge sources do not mention any incompatibility between AstroWind and @vite-pwa/astro. Since AstroWind is a template built on top of Astro, and @vite-pwa/astro is a Vite plugin wrapped for Astro, they should work together as long as you follow the integration steps.

Summary:
Your installation and configuration steps for @vite-pwa/astro with Astro 5.9 and AstroWind are consistent with the official Astro integration process. If you encounter specific errors or issues, please provide error messages or describe the problem in detail for more targeted troubleshooting. The knowledge sources do not provide further details or troubleshooting steps specific to @vite-pwa/astro or AstroWind, so for advanced issues, you may need to consult the integration's own documentation or GitHub repository [@vite-pwa/astro].

If you need more detailed, step-by-step instructions or run into a specific error, please let me know!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fleet nacelle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fleet nacelle Jun 14, 2025, 11:27 PM

#

However when running dev we do not see the manifest or injection

#

@dim rover const pwaToast = document.querySelector<HTMLDivElement>('#pwa-toast');
const pwaToastMessage = pwaToast?.querySelector<HTMLDivElement>('#toast-message');
const pwaCloseBtn = pwaToast?.querySelector<HTMLButtonElement>('#pwa-close');
const pwaRefreshBtn = pwaToast?.querySelector<HTMLButtonElement>('#pwa-refresh');

if (pwaToast && pwaToastMessage && pwaCloseBtn && pwaRefreshBtn) {
let refreshSW;

const refreshCallback = () => refreshSW?.(true);

const hidePwaToast = () => {
    if (pwaToast.classList.contains('refresh'))
        pwaRefreshBtn.removeEventListener('click', refreshCallback);
    pwaToast.classList.remove('show', 'refresh');
};

const showPwaToast = (offline: boolean) => {
    if (!offline) pwaRefreshBtn.addEventListener('click', refreshCallback);
    hidePwaToast();
    if (!offline) pwaToast.classList.add('refresh');
    pwaToast.classList.add('show');
};

pwaCloseBtn.addEventListener('click', () => hidePwaToast());

refreshSW = registerSW({
    immediate: true,
    onOfflineReady() {
        pwaToastMessage.innerHTML = 'App ready to work offline';
        showPwaToast(true);
    },
    onNeedRefresh() {
        pwaToastMessage.innerHTML = 'New content available, click on reload button to update';
        showPwaToast(false);
    },
    onRegisteredSW(swUrl) {
        console.log('Service Worker registered at:', swUrl);
    }
});

}

However when running dev we do not see the manifest or injection

dim roverBOT Jun 14, 2025, 11:29 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the knowledge sources provided, there is no official documentation or guidance about the behavior of the @vite-pwa/astro integration in development mode (i.e., when running astro dev). The Astro documentation does not mention the @vite-pwa/astro package or its manifest injection behavior specifically.

However, it is common for PWA integrations (especially those based on Vite plugins) to only inject the manifest and register the service worker during production builds, not during development. This is because service workers can interfere with the development server's hot module replacement and live reload features. The Astro documentation does mention that the dev server does not bundle assets and is intended for development, not for simulating the production environment [Astro dev server].

Summary:
If you do not see the manifest or service worker injection when running astro dev, this is likely expected behavior. To test PWA features, you should build your site with npm run build and then preview it with npm run preview, which serves the production build and should include the manifest and service worker registration [Build and preview your site].

If you need to confirm the integration's behavior in development, you may need to consult the `@vite-pwa/astro` documentation or its GitHub repository, as the official Astro documentation does not cover this integration in detail.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fleet nacelle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fleet nacelle Jun 14, 2025, 11:44 PM

#

Pushing it to a live production build was the correct answer it does not notify me to install as an app but now i need to figure out how to make the whole site available offline lol

fleet nacelle Jun 15, 2025, 7:41 AM

#

@dim rover how would I get it to precache my whole site for offline use with cloud flare?

dim roverBOT Jun 15, 2025, 7:41 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the knowledge sources provided do not contain explicit information about configuring @vite-pwa/astro (AstroPWA) to precache your entire site for offline use, specifically in combination with Cloudflare deployment. The official Astro documentation covers deploying to Cloudflare and using the Cloudflare adapter, but does not address PWA or service worker caching strategies in detail [Deploy your Astro Site to Cloudflare].

If you need to ensure your whole site is precached for offline use, you would typically configure your PWA integration (such as Workbox options in your AstroPWA config) to include all relevant assets and routes. However, the exact steps and compatibility with Cloudflare's environment are not documented in the provided sources.

For advanced PWA caching strategies or Cloudflare-specific service worker behavior, you may need to consult the documentation for `@vite-pwa/astro` or Cloudflare Workers directly, as the Astro docs do not cover this scenario.

#astro with astrowind installing AstroPWA

I then created a component called ProgressiveWebApp.astro import { pwaInfo } from 'virtual:pwa-info';

If you need more detailed, step-by-step instructions or run into a specific error, please let me know!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you need to confirm the integration's behavior in development, you may need to consult the @vite-pwa/astro documentation or its GitHub repository, as the official Astro documentation does not cover this integration in detail.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For advanced PWA caching strategies or Cloudflare-specific service worker behavior, you may need to consult the documentation for @vite-pwa/astro or Cloudflare Workers directly, as the Astro docs do not cover this scenario.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

I then created a component called ProgressiveWebApp.astro
import { pwaInfo } from 'virtual:pwa-info';

If you need to confirm the integration's behavior in development, you may need to consult the `@vite-pwa/astro` documentation or its GitHub repository, as the official Astro documentation does not cover this integration in detail.

For advanced PWA caching strategies or Cloudflare-specific service worker behavior, you may need to consult the documentation for `@vite-pwa/astro` or Cloudflare Workers directly, as the Astro docs do not cover this scenario.