I’ve been trying for several days to configure a PWA in my project. I’m almost there. According to the Lighthouse audit I still have to solve one issue:
But one more time my PWA is installable in Android and iOS devices but with no caching.
And always the same Lighthouse issue:
Does not register a service worker that controls page and start_url
Your main.min.js (or anywhere else), does not seem to have the service worker registration code. It should be something like: navigator.serviceWorker.register('/service-worker.js'). As I can see, https://gracious-thompson-788a4a.netlify.app/service-worker.js exists, which means, you already have a service worker, you’re just not telling the browser to register it.
You’re right, you do have the script in the repo, however, if you check your website, the script is not there. I can see, you’ve added it on a condition that the build is production.
Are you successfully using that condition somewhere else? Maybe, the environment is not being set when deploying on Netlify, thus, the script is not being added. In Hugo, I have to explicitly force the production environment by adding:
[build.environment]
HUGO_ENV = "production"
to my netlify.toml. Maybe, Eleventy has a similar config?
However, if you have a look at the console, you’ll know the reason why your SW isn’t working.
I think, you misunderstood my previous comment. When I said I need to set a environment in Hugo, I was giving an example and making a point. Since I don’t use Eleventy, I’m not sure about its perks. Thus, I said, you need to check how to set environment in your SSG.
Looks like, if you set an environment variable in Netlify with the name ELEVENTY_ENV and value as production you should be good to go. With this configuration, your previous code (the script in head) might work too.
I do not use Hugo.
But, with 11ty may be i could try to add something like that: const IS_PRODUCTION = process.env.ELEVENTY_ENV === 'production'
to my eleventy.config.js …
i’ll be back
===
Edit:
In Eleventy we could define shortcodes in that eleventy.config.js
I have to dig it deeper.
Seems like somehow it’s still stuck on development mode.
Looking here: JavaScript Data Files — Eleventy, it seems like you’ll have to add the environment to your module.exports too. Could you try that if you haven’t already? You can try adding it to your eleventy.config.js OR simply try changing your build command to ELEVENTY_ENV=production npx @11ty/eleventy.
A simpler solution would be to remove the condition and allow the PWA to be installable in development server too. Any specific reasons why it’s setup that way?
if ('serviceWorker' in navigator) {
if (process.env.ELEVENTY_ENV !== 'production') {
console.info('skipping service worker registration in development.')
} else {
/* register it */
}
}
You can simply change it to:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').catch((registrationError) => {
console.error('ServiceWorker registration failed: ', registrationError)
})
})
}
This will register the service worker in development environment too. If you still want to skip it being installed in development, you can check the repos you mentioned and see if they’re deploying on Netlify and how exactly they’re setting the production environment variable.
This would do the trick too, the only important part is navigator.serviceWorker.register('/service-worker.js'). You can literally ignore the rest. The stuff you’ve added it only useful to a developer and doesn’t really add or remove any functionality.
