search

vite-pwa / astro

Zero-config PWA Integration for Astro
https://vite-pwa-org.netlify.app/frameworks/astro
MIT License
170 stars 5 forks source link

Issues on cloudflare #35

Open Knaackee opened 6 months ago

Knaackee commented 6 months ago

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?

stefanmaric commented 4 months ago

I'm facing the same issue. Did you find a workaround @Knaackee?

Knaackee commented 4 months ago

@stefanmaric not really.

I had different things to do and hoped it's getting fixed in the meantime.

Does the problem still exist in the latest version?

stefanmaric commented 4 months ago

@stefanmaric not really.

Bummer 😢

Does the problem still exist in the latest version?

Unfortunately, it's still broken.

stefanmaric commented 4 months ago

For the sake of completeness, here's a minimal reproduction:

https://stackblitz.com/edit/withastro-astro-cz8era

Hard to actually test without deploying, but to confirm the issue:

  1. Open a new terminal tab
  2. Run npm run build
  3. Globally search for registerSW.js, it will be referenced at dist/sw.js and dist/_worker.js
  4. Inspect the dist/ folder tree
  5. No registerSW.js file to be found

The reproduction follows closely the Astro guide (https://vite-pwa-org.netlify.app/frameworks/astro.html) and copies some of the code from the Astro simple example (https://stackblitz.com/edit/vite-pwa-astro-pu12pn?file=package.json,astro.config.mjs) but adds the Cloudflare adapter via npx astro add cloudflare

Hope this helps!

userquin commented 4 months ago

can you add injectRegister: false to your pwa options? maybe there is a race condition and the registerSW.js generation, that file shouldn't be generated if using virtual pwa modules (the plugin will not remove that file once generated, that's weird since the file is missing in the dist folder).

I have no idea about the _worker.js file, maybe CF stuff?

I'm going to check the reproduction on my local.

userquin commented 4 months ago

It seems we need to review the Astro integration, the file is generated in the server folder, that file shouldn't be on the sw.js precaching manifest: $server_build/registerSW.js

userquin commented 4 months ago

Once injectRegister: false added to my fork, the file not being generated and the sw.js should be fine now.

I'll check changes in Astro next weekend.

userquin commented 4 months ago

So, $server_build is CF stuff: where is the dist/index.html file?

stefanmaric commented 4 months ago

So, $server_build is CF stuff: where is the dist/index.html file?

I guess there's none because it is being server-rendered on the fly. 🤔

userquin commented 4 months ago

uhmm, you need navigate fallback there, at least 1 html page to use it for the offline handler

userquin commented 4 months ago

so, output: 'server' is for SSR app (?), that's new for me, we need to prerender some html page

userquin commented 4 months ago

we can use export const prerender = true; in the index.astro page (ala sveltekit):

https://stackblitz.com/edit/withastro-astro-covosb?file=astro.config.mjs,src%2Fpages%2Findex.astro

https://docs.astro.build/en/guides/server-side-rendering/#configure-server-or-hybrid

stefanmaric commented 4 months ago

@userquin I confirmed that switching to output: 'hybrid' (which makes pre-rendering the default, to be opt-out via export const prerender = false) everything works.

It makes total sense that if you're going to pre-cache the whole site/app, of course you need all paths to be listed in the pre-cache manifest.

Astro knows all the paths (or at least path patterns, when using path params) that are server-rendered. Would it be possible to somehow emit these to be passed to workbox's pre-cache manifest? 🤔

userquin commented 4 months ago

Any SSR page or api calls must be excluded from sw interception via navigateFallbackDenylist (array of regex) adding also a custom handler (NetworkFirst or NetworkOnly) for those entries to redirect to the fallback page when no response from server.

You can use the runtime caching (NetworkFirst only) to cache ssr pages or api calls: check this issue https://github.com/vite-pwa/sveltekit/issues/65

zanhk commented 2 months ago

Getting a similar error as well using output: 'hybrid' and all static pages (I use output hybrid only for the admin ui, which is excluded with navigateFallbackDenylist)

https://antares-ajj.pages.dev/

workbox-7cfec069.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://1f83db54.antares-ajj.pages.dev/_worker.js/index.js","status":404}]
    at E.O (https://1f83db54.antares-ajj.pages.dev/workbox-7cfec069.js:1:10472)
    at async E._ (https://1f83db54.antares-ajj.pages.dev/workbox-7cfec069.js:1:10024)
    at async E.U (https://1f83db54.antares-ajj.pages.dev/workbox-7cfec069.js:1:9148)
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,
    },
}),

Service worker is trying to precache the file

_worker.js/index.js

if (!self.define) {
    let e,
        i = {};
    const r = (r, n) => (
        (r = new URL(r + ".js", n).href),
        i[r] ||
            new Promise((i) => {
                if ("document" in self) {
                    const e = document.createElement("script");
                    (e.src = r), (e.onload = i), document.head.appendChild(e);
                } else (e = r), importScripts(r), i();
            }).then(() => {
                let e = i[r];
                if (!e) throw new Error(`Module ${r} didn’t register its module`);
                return e;
            })
    );
    self.define = (n, o) => {
        const s =
            e ||
            ("document" in self ? document.currentScript.src : "") ||
            location.href;
        if (i[s]) return;
        let a = {};
        const l = (e) => r(e, s),
            d = {
                module: {
                    uri: s,
                },
                exports: a,
                require: l,
            };
        i[s] = Promise.all(n.map((e) => d[e] || l(e))).then((e) => (o(...e), a));
    };
}
define(["./workbox-7cfec069"], function (e) {
    "use strict";
    self.skipWaiting(),
        e.precacheAndRoute(
            [
                {
                    url: "_astro/_slug_.Cde6an2G.css",
                    revision: null,
                },
                {
                    url: "_astro/client.DWoRQa5Q.js",
                    revision: null,
                },
                {
                    url: "_astro/cover.BdKIT5TF_853z.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.BdKIT5TF.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.CGTzvcyc_1r0W35.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.CGTzvcyc.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.CpMCnsuV_Z1Fjueq.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.CpMCnsuV.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.Cw7VWPk8.png",
                    revision: null,
                },
                {
                    url: "_astro/cover.D1iqTLTc_2bkcxW.svg",
                    revision: null,
                },
                {
                    url: "_astro/cover.D1iqTLTc.svg",
                    revision: null,
                },
                {
                    url: "_astro/Hero.astro_astro_type_script_index_0_lang.r2T_yKjW.js",
                    revision: null,
                },
                {
                    url: "_astro/Highlights.astro_astro_type_script_index_0_lang.BaCW6DQl.js",
                    revision: null,
                },
                {
                    url: "_astro/hoisted.B_gY8znj.js",
                    revision: null,
                },
                {
                    url: "_astro/hoisted.Bd2Fo4VE.js",
                    revision: null,
                },
                {
                    url: "_astro/index.ClJOJl_Y.js",
                    revision: null,
                },
                {
                    url: "_astro/index.ZORhgBxb.js",
                    revision: null,
                },
                {
                    url: "_astro/keystatic-page.DeFKh_T3.js",
                    revision: null,
                },
                {
                    url: "_astro/page.BIe0mclZ.js",
                    revision: null,
                },
                {
                    url: "_astro/ScrollTrigger.BS49OFpx.js",
                    revision: null,
                },
                {
                    url: "_astro/Testimonials.astro_astro_type_script_index_0_lang.CL6AE6rR.js",
                    revision: null,
                },
                {
                    url: "_astro/workbox-window.prod.es5.DFjpnwFp.js",
                    revision: null,
                },
                {
                    url: "_worker.js/index.js",
                    revision: "d8b0d90558f335be0d6e7bab4c83a57c",
                },
                {
                    url: "404",
                    revision: "d03080907a49fa1d36507b268164a35f",
                },
                {
                    url: "apple-splash-landscape-dark-2048x1536.png",
                    revision: "b7931e4f19e992daf4b7c5dd3d9d7040",
                },
                {
                    url: "apple-splash-landscape-light-2048x1536.png",
                    revision: "905b7bcabd0edb29f8c1e8201ead83a4",
                },
                {
                    url: "apple-splash-portrait-dark-1536x2048.png",
                    revision: "06aeb87629d33fe6a35a21e3970ed2ca",
                },
                {
                    url: "apple-splash-portrait-light-1536x2048.png",
                    revision: "25e638e6242323c525c95eb1566647e8",
                },
                {
                    url: "apple-touch-icon-180x180.png",
                    revision: "504617f70e1429d8169a7dbe7e29e964",
                },
                {
                    url: "assets/js/squircle.js",
                    revision: "55b5c47e7ea184a69b82773f4875e9ed",
                },
                {
                    url: "blog/index.html",
                    revision: "db8e0fc1ed6d96bb6bca380c27a1e40d",
                },
                {
                    url: "chisiamo/index.html",
                    revision: "36feb2e8593188e11d27bab0ff9c47d1",
                },
                {
                    url: "contatti/index.html",
                    revision: "814dee91966fffb2226b41428fa1fa9c",
                },
                {
                    url: "convenzioni/index.html",
                    revision: "d6891b29e74da445d3094e59c3f9d32d",
                },
                {
                    url: "favicon.ico",
                    revision: "21591a66f8436363b21958a4efc5f6ef",
                },
                {
                    url: "favicon.svg",
                    revision: "be70d577c3675201316f69bb7d638c93",
                },
                {
                    url: "feedback/index.html",
                    revision: "b6ba36868f325e2601e677c3cf642c7e",
                },
                {
                    url: "index.html",
                    revision: "d44ad5271d824a11000c21667810a77a",
                },
                {
                    url: "listino/index.html",
                    revision: "be62499a2ecdf8e8f4ea994c14bd2aa7",
                },
                {
                    url: "maskable-icon-512x512.png",
                    revision: "78e61de871b7db96e06b70f96a744022",
                },
                {
                    url: "post/alimenti-amici-e-nemici-dei-tuoi-denti/index.html",
                    revision: "602a9b980917c37a576431f3d9c683f9",
                },
                {
                    url: "post/come-prevenire-la-carie-nei-bambini-consigli-pratici-per-i-genitori/index.html",
                    revision: "8b46beabf4e013c996381505b16a7f69",
                },
                {
                    url: "post/ortodonzia-invisibile-vantaggi-e-considerazioni/index.html",
                    revision: "749df4d4489b6963601e30ed0aae0aec",
                },
                {
                    url: "post/tecnologie-avanzate-in-odontoiatria-cosa-c-e-di-nuovo-nel-2024/index.html",
                    revision: "f5bfddf416f13149527fe3df840ae4f0",
                },
                {
                    url: "prenota/index.html",
                    revision: "fbabe5782e1ab0065d6569086e445e0c",
                },
                {
                    url: "pwa-192x192.png",
                    revision: "fec60c8f8d7d8c69a275d222e2b2b08b",
                },
                {
                    url: "pwa-512x512.png",
                    revision: "4b8b04f0380ead96b81704526bb16684",
                },
                {
                    url: "pwa-64x64.png",
                    revision: "9f9e27aa926a829306c6ebc62b1203af",
                },
                {
                    url: "robots.txt",
                    revision: "ee674a6951f4d321ff7f9bd1e1027d1a",
                },
                {
                    url: "servizi/index.html",
                    revision: "2eb9c352e7fe22fee9db0e8a2d20592f",
                },
                {
                    url: "terms/index.html",
                    revision: "d212bcc9bc304d624f260be187db48e4",
                },
                {
                    revision: "db8e0fc1ed6d96bb6bca380c27a1e40d",
                    url: "blog",
                },
                {
                    revision: "36feb2e8593188e11d27bab0ff9c47d1",
                    url: "chisiamo",
                },
                {
                    revision: "814dee91966fffb2226b41428fa1fa9c",
                    url: "contatti",
                },
                {
                    revision: "d6891b29e74da445d3094e59c3f9d32d",
                    url: "convenzioni",
                },
                {
                    revision: "b6ba36868f325e2601e677c3cf642c7e",
                    url: "feedback",
                },
                {
                    revision: "d44ad5271d824a11000c21667810a77a",
                    url: "/",
                },
                {
                    revision: "be62499a2ecdf8e8f4ea994c14bd2aa7",
                    url: "listino",
                },
                {
                    revision: "602a9b980917c37a576431f3d9c683f9",
                    url: "post/alimenti-amici-e-nemici-dei-tuoi-denti",
                },
                {
                    revision: "8b46beabf4e013c996381505b16a7f69",
                    url: "post/come-prevenire-la-carie-nei-bambini-consigli-pratici-per-i-genitori",
                },
                {
                    revision: "749df4d4489b6963601e30ed0aae0aec",
                    url: "post/ortodonzia-invisibile-vantaggi-e-considerazioni",
                },
                {
                    revision: "f5bfddf416f13149527fe3df840ae4f0",
                    url: "post/tecnologie-avanzate-in-odontoiatria-cosa-c-e-di-nuovo-nel-2024",
                },
                {
                    revision: "fbabe5782e1ab0065d6569086e445e0c",
                    url: "prenota",
                },
                {
                    revision: "2eb9c352e7fe22fee9db0e8a2d20592f",
                    url: "servizi",
                },
                {
                    revision: "d212bcc9bc304d624f260be187db48e4",
                    url: "terms",
                },
                {
                    url: "favicon.svg",
                    revision: "be70d577c3675201316f69bb7d638c93",
                },
                {
                    url: "manifest.webmanifest",
                    revision: "2e71caf2df5898a0638a1e9e1a803b8e",
                },
            ],
            {
                directoryIndex: "index.html",
            },
        ),
        e.cleanupOutdatedCaches(),
        e.registerRoute(
            new e.NavigationRoute(e.createHandlerBoundToURL("/"), {
                denylist: [/^\/keystatic/, /^\/api/],
            }),
        );
});

but that file is never uploaded, even if it's created with the build command,

Assets uploaded
98 Files uploaded

File name
404.html
apple-splash-landscape-dark-2048x1536.png
apple-splash-landscape-light-2048x1536.png
apple-splash-portrait-dark-1536x2048.png
apple-splash-portrait-light-1536x2048.png
apple-touch-icon-180x180.png
favicon.ico
favicon.svg
index.html
manifest.webmanifest
maskable-icon-512x512.png
og.jpg
pwa-192x192.png
pwa-512x512.png
pwa-64x64.png
robots.txt
sitemap-0.xml
sitemap-index.xml
sw.js
workbox-7cfec069.js

_astro
Hero.astro_astro_type_script_index_0_lang.r2T_yKjW.js
Highlights.astro_astro_type_script_index_0_lang.BaCW6DQl.js
ScrollTrigger.BS49OFpx.js
Testimonials.astro_astro_type_script_index_0_lang.CL6AE6rR.js
_slug_.Cde6an2G.css
about-picture-1.BJxtIhTP.jpg
about-picture-1.BJxtIhTP_Z26gcfw.webp
about-picture-2.DqBJYFy4.jpg
about-picture-2.DqBJYFy4_ZG4nfP.webp
about-picture-3.CgTnGfhT.jpg
about-picture-3.CgTnGfhT_Z290mGr.webp
about-us.BnkXi3ox.jpg
about-us.BnkXi3ox_Z1mMKBd.webp
background.x7SdbNqx.webp
background.x7SdbNqx_Z1tR8KA.webp
check-up.CMktRjNV.jpg
checkup.GXJZ2ypV.jpg
checkup.GXJZ2ypV_ZLYrav.webp
client.DWoRQa5Q.js
cover.BdKIT5TF.svg
cover.BdKIT5TF_853z.svg
cover.CGTzvcyc.svg
cover.CGTzvcyc_1r0W35.svg
cover.CZBYxG6d.jpg
cover.CZBYxG6d_ZluzTE.webp
cover.CZBYxG6d_rEdEk.webp
cover.CpMCnsuV.svg
cover.CpMCnsuV_Z1Fjueq.svg
cover.Ctfop-R5.jpg
cover.Ctfop-R5_2ccPyj.webp
cover.Ctfop-R5_Z3JMed.webp
cover.Ctfop-R5_gOKcH.webp
cover.Ctfop-R5_pLYEo.webp
cover.Cw7VWPk8.png
cover.Cw7VWPk8_1HowWx.webp
cover.D1iqTLTc.svg
cover.D1iqTLTc_2bkcxW.svg
dentist-1.D_t2RP6X.jpg
dentist-1.D_t2RP6X_tTBC.webp
dentist-2.DB9rQAIK.jpeg
dentist-2.DB9rQAIK_ZcxFHi.webp
dentist-3.DoQldaX5.jpg
dentist-3.DoQldaX5_Z1k4KkB.webp
dentist-price.CeUTUh4f.jpg
dentist-price.CeUTUh4f_2qzdPu.webp
dentist-saving.DM1g022P.jpg
dentist-saving.DM1g022P_hhIL8.webp
estetica-dentale.CEKdLU7j.jpg
hero.BG53eDNs.jpg
hoisted.B_gY8znj.js
hoisted.Bd2Fo4VE.js
index.ClJOJl_Y.js
index.ZORhgBxb.js
keystatic-page.DeFKh_T3.js
orthodontics.C1llijSB.jpg
orthodontics.C1llijSB_nlLNI.webp
ortodonzia.C1vwwqPW.jpg
page.BIe0mclZ.js
promo.Bldu9k9S.jpg
shutterstock_2182538863.DEKqqcdz.jpg
shutterstock_2182538863.DEKqqcdz_2hfRr9.webp
shutterstock_2285143617.CvtnyURn.jpg
shutterstock_2285143617.CvtnyURn_ZRKDpv.webp
workbox-window.prod.es5.DFjpnwFp.js

assets

js

blog
    index.html

chisiamo
    index.html

contatti
    index.html

convenzioni
    index.html

feedback
    index.html

listino
    index.html

post
    alimenti-amici-e-nemici-dei-tuoi-denti
    come-prevenire-la-carie-nei-bambini-consigli-pratici-per-i-genitori
    ortodonzia-invisibile-vantaggi-e-considerazioni
    tecnologie-avanzate-in-odontoiatria-cosa-c-e-di-nuovo-nel-2024

prenota
    index.html

servizi
    index.html

terms
    index.html

In fact going to https://antares-ajj.pages.dev/_worker.js/index.js result in a 404

On cloudflare I see this https://developers.cloudflare.com/pages/functions/advanced-mode/ not sure if there is something I have to activate.

On the functions tab of the build log I see this

image

Invocation routes
Invocation routes determine when your Functions script is executed. This file is generated based on the files present in the /functions directory.
[Using billable routes](https://developers.cloudflare.com/pages/platform/functions/routing/)

{
  "version": 1,
  "include": [
    "/_image",
    "/api/keystatic/*",
    "/keystatic/*"
  ],
  "exclude": [
    "/",
    "/_astro/*",
    "/assets/js/squircle.js",
    "/favicon.svg",
    "/og.jpg",
    "/robots.txt",
    "/rss.xml",
    "/admin",
    "/404",
    "/post/alimenti-amici-e-nemici-dei-tuoi-denti",
    "/post/come-prevenire-la-carie-nei-bambini-consigli-pratici-per-i-genitori",
    "/post/ortodonzia-invisibile-vantaggi-e-considerazioni",
    "/post/tecnologie-avanzate-in-odontoiatria-cosa-c-e-di-nuovo-nel-2024",
    "/blog",
    "/chisiamo",
    "/contatti",
    "/convenzioni",
    "/feedback",
    "/listino",
    "/prenota",
    "/servizi",
    "/terms"
  ]
}

Are the files under _worker.js supposed to be cloudflare functions? should they be precached?

Thanks

userquin commented 2 months ago

is the _worker.js in the output folder (maybe it is there but the adapter doesn't expose that entry when requested)? or maybe it is something generated to build the distro and removed after client/server build.

Anyway, you can add workbox.globIgnores excluding that file: globIgnores: ['**/_worker.js']

zanhk commented 2 months ago

is the _worker.js in the output folder (maybe it is there but the adapter doesn't expose that entry when requested)?

When I build the package I see it in the relative folder, but I don't see it when on the uploaded files on cloudflare

image

Anyway, you can add workbox.globIgnores excluding that file: globIgnores: ['**/_worker.js']

Ok, that's not something that this package use correct?

Using

globIgnores: ["**/_worker.js/**/*", "_worker.js"]

Fix the problem

Thanks

userquin commented 2 months ago

workbox-build will traverse the dist folder (any integration: Vite, Remix, SvelteKit, Nuxt...), if the adapter or Astro generating content in the client or server build that's not included in the final distro, we should collect any input and add proper exclusions for that inputs.

For example, SvelteKit generates a dist folder with the client (client folder) SSG pages (prerendered folder ) and server (server folder): pwa kit integration will include only client and prerendered folders and will exclude server folder (globPatterns and globIgnores respectively): check https://github.com/vite-pwa/sveltekit/blob/main/src/config.ts#L159-L185

SvelteKit generates always that structure, independent from the adapter, the adapter will use the SvelteKit output folder.

If Astro or any Astro adapter using same folder it will be hard to fix the problem, we will need in Astro PWA integration the adapter to update the workbox/injectManifest options properly.

zanhk commented 2 months ago

Ok thanks

mbcod3 commented 2 weeks ago

Using official astro vite-pwa integration with cloudflare ssr adapter, only this pattern for globIgnores works for me

globIgnores: ['**/_worker.js/**/*']