PWA start_url constent issue

Gitlab repo: https://gitlab.com/ferreiraf/313plc.git
Netlify link: https://gracious-thompson-788a4a.netlify.app

Hi,

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 everything is there:

  • HTTPS
  • webmanifest
  • service-worker registration (layout default.njk)

Lastly i have configured the service-worker via the webpack.mix.js file
following these steps: https://medium.com/codefield-community/laravel-pwa-from-webpack-mix-js-11c313d5d918

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
:dizzy_face:

I’m a little bit lost… :flushed:
Could you help me.

Thank you

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.

1 Like

Thank you for your quick answer.

At this moment my SW regitration is in the head of my default layout.
I will try something else to include it in the main.min.js.
:thinking:

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?

So, now my registration script is not anymore in the head of my default layout.

i create in resources/ js/ modules/ register-serviceworker/ index.js file and import this register-serviceworker in the main.js

But still, don’t see any change in the Lighthouse audit :thinking:


I use Eleventy as SSG.

I think, you’ve made progress. The required code now exists in your main.min.js.

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.

1 Like

OK, i’ll try to do my best.
As i said in my profile i’m not a DEV.
So, yeah

it’s possible, sorry for that one :upside_down_face:
i’ll try to find out how to read the console results.

Did you try setting the environment variable as suggested above?

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. :face_with_monocle:

I’ve done that right now on the Netlify settings.
But still nothing in the Lighthouse audit.

Could you have a look at the console for me please?

Seems like somehow it’s still stuck on development mode.

Looking here: JavaScript Data Files | Eleventy, a simpler static site generator., 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.

In my package.json scripts, it seems that in “dev” mode it’s working through ELEVENTY_ENV.
But in production mode it is working through NODE_ENV. :thinking:

  "scripts": {
"dev": "ELEVENTY_ENV=development npx @11ty/eleventy --config=eleventy.config.js --serve & webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && npx @11ty/eleventy --config=eleventy.config.js"
  },

So, it’s working now? On your webpage, I can still see the same message in console, so I don’t think so.

Hi hrishikesh,
No not yet, try to working on it.

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?

No specific reason. Most of the repos that inspired me use this setup.

where do you mean?

In your register-serviceworker, you’ve code like:

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.

1 Like

yes i’m on it with something a little bit different:

    `// Register Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service worker registration failed, error:', error);
  });
}
`

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.

1 Like

I think we get it ! :heart_eyes:
Thank you very, very much @hrishikesh :+1: :100: :100: :100: :100: :dizzy:

Thank you!

1 Like