rishabh3112 / gridsome-plugin-pwa Goto Github PK

If it changes anything, just want to mention that a new update is out :)

Sorry, I don't know really where to ask this question except for here.

When I upload a new build to my server, and I visit for example https://example.com/imprint, the result is that the CSS is missing, since the CSS file got a newly generated hash name but the service-worker returns the old HTML build with the old CSS hash name.

The only solution is to refresh with "shift+cmd+4", to delete all cache and to restart the service worker. Obviously, this is not what normal users would do.

How can I fix this? Any idea? 🙈

Here is a short gif for you to see the problem in action

At the very last second, I'm hard-refreshing the page and only then I see the correct imprint page.

It'd be nice if this plugin automatically configured the express server to serve up the manifest.json file

The thing is that my page is in a subfolder. That means that everything won't work when the paths are not prefixed.

For example, my gridsome page is in https://example.com/blog. But my main page is on example.com. That means if the browser is looking for the precacheManifest from the ServiceWorker it won't find the files in via the url or even the manfifest.json file it self won't be found because it is set to <link data-vue-tag="ssr" rel="manifest" href="/manifest.json">and not <link data-vue-tag="ssr" rel="manifest" href="/blog/manifest.json">

I hope you understand me. I try to look at your code, maybe I find a solution that I could pull into here

I am seeing FID issue: longer than 100ms (mobile) in Google Search Console as of around the 0.0.20 release. I suspect it has something to do with the service worker registration however I have been unable to pin down the exact cause. When I attempt to run Chrome Lighthouse to verify it fails entirely, I believe because of GoogleChrome/lighthouse#13396 - I am trying to determine whether the issue lies with lighthouse or with gridsome-plugin-pwa.

Can anyone else confirm whether they are also seeing this issue?

There is a bit of code that sets head meta tags for msapplication by reading options

But the dont get exposed publicly, can't be set and don't have defaults

which results in undefined values being output

Hi,

I have installed this plugin in my gridsome app, and have configured. But when I run the command gridsome develop, I site starter blank and I receive this message

If I run gridsome build, this error message appears at the end of the process

this is my plugin configuration:

plugins: [
    {
      use: 'gridsome-plugin-pwa',
      options: {
        title: 'Digital Factory',
        startUrl: '/',
        display: 'standalone',
        statusBarStyle: 'default',
        manifestPath: 'manifest.json',
        serviceWorkerPath: 'service-worker.js',
        shortName: 'Digital Factory',
        themeColor: '#000',
        backgroundColor: '#fdd348',
        icon: 'lgo.png'
      }
    }
  ]

I have created a service-worker,js and manifest.json in the static folder

Thanks

When I run a gridsome build, I get:

Initializing plugins...
Error:
Something went wrong installing the "sharp" module

The specified procedure could not be found.
\\?\C:\GitHub\rehansaeed.github.io\node_modules\gridsome-plugin-pwa\node_modules\sharp\build\Release\sharp.node

- Remove the "node_modules/sharp" directory then run
  "npm install --ignore-scripts=false --verbose" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/install
- Search for this error at https://github.com/lovell/sharp/issues

    at Object.<anonymous> (C:\GitHub\rehansaeed.github.io\node_modules\gridsome-plugin-pwa\node_modules\sharp\lib\const
ructor.js:34:9)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\GitHub\rehansaeed.github.io\node_modules\gridsome-plugin-pwa\node_modules\sharp\lib\index
.js:3:15)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\GitHub\rehansaeed.github.io\node_modules\gridsome-plugin-pwa\files\manifest.js:12:37)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gridsome build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The real favicon generator has a page that can check your site configuration. Here is mine:

https://realfavicongenerator.net/favicon_checker?protocol=https&site=preview.rehansaeed.com

You can see that there are a few missing images for iOS, MacOS and Windows 10. It would be nice if these were also included.

Hey its me again!

After implementing the fix for #48 I noticed that even if the generation of the pages during build time went fine and gave the proper results, when the javascript loads in the browser it didn't work.

That is due to the NodeJS methods I used.

They need to be replaced with native javascript so browsers can run the code to.

I wasnt aware of that. I prepare another MR to fix it in its entirety :)

Hi,

I have implemented PWA plugin on my gridsome site, but splash screen does not work on iPhone while it works well on android phones.
Please let me know if there is any solution for this.
Thanks

While checking for broken links with hyperlink after I build my website, I noticed that the path for the msapplication-TileImage is broken no matter the configuration.

hyperlink output

...
not ok 2 load dist/assets/static/favicon.png-144x144.png
  ---
    operator: load
    expected:
      "200 dist/assets/static/favicon.png-144x144.png"
    actual:
      "ENOENT: no such file or directory, open '[HIDDEN]/dist/assets/static/favicon.png-144x144.png'"
    at: dist/index.html:4:987 <meta data-vue-tag="ssr" name="msapplication-TileImage" content="/assets/static/favicon.png-144x144.png">
...

The generated path is dist/assets/static/favicon.png-144x144.png but it should be dist/assets/static/favicon-144x144.png.

I looked up the code that generates the path and found what is wrong with it:

  const iconsDir = 'assets/static/';
  const iconName = options.icon.split('/').slice(-1)[0]; // <-- Here the whole filename is taken (i.e. "favicon.png")
  const msTileImage = `/${iconsDir}${iconName}-144x144.png`; // Which then results in "/assets/static/favicon.png-144x144.png", instead of "/assets/static/favicon-144x144.png"

source

Is it possible to make the backgroundColor field value vary based on the value of a CSS variable I'm using?

    {
      // pwa plugin
      use: 'gridsome-plugin-pwa',
      options: {
        title: 'The Ninja Blog',
        startUrl: '/',
        display: 'standalone',
        startusBarStyle: 'default',
        manifestPath: 'manifest.json',
        serviceWorkerPath: 'service-worker.js',
        shortName: 'The Ninja Blog',
        themeColor: '#ff6363',
        backgroundColor: 'var(--bg-color)',
        icon: '/static/icon.png'
      }
    }

I have dark mode implemented so I want to make the background also black.

Dynamic routes created programmatically (see https://gridsome.org/docs/dynamic-routing/#programmatic-dynamic-routes) result into service-worker.js file not generated validly.
This is causing an error in chrome dev console:

Uncaught (in promise) bad-precaching-response: The precaching request for 'http://localhost:8080/some-slug/:some-param?__WB_REVISION__=...

The item generated in service-worker.js looks like e. g.:

{
  "url": "/some-slug/:some-param",
  "revision": "..."
},

Making a new issue for this comment

Not sure what it does or is supposed to do... Mine looks like this:

addEventListener('message', event => {
  const replyPort = event.ports[0]
  const message = event.data
  if (replyPort && message && message.type === 'skip-waiting') {
    event.waitUntil(
      self.skipWaiting().then(
        () => replyPort.postMessage({ error: null }),
        error => replyPort.postMessage({ error })
      )
    )
  }
})

This service worker is in addition to the one generated in dist which appears to be working correctly

Hi,

When hosting in production I receive the following error below during the service-worker setup.

Here is the repo.

https://github.com/Matthew-Kanderka/hummingbird-Airsoft-Web/tree/develop

Before I got this issue I was receiving a DOMException. This is what my gridsome.config.js file looks like,

I also have a question about customizing the service worker, are we able to configure it or is it only auto generated?

Thanks

Need to test and review up the things before first releasev0.0.1
cc @sendilkumarn

I like this plugin really much and it is working great.

One Problem is that the Cache gets never cleared even when changing something and a full page reload. (Of course only in Production)

Would it be possible to supply the service worker with a version number or anything like that so the browser clears the cache and downloads all changed files?

I have the following error message in the console:

.../node_modules/register-service-worker/index.js:18
export function register (swUrl, hooks) {
^^^^^^

The export is not understood by const { register } = require('register-service-worker') in gridsome.client.js

Just moving the code as follow solved the issue for me:

from

const { register } = require('register-service-worker');
const clientConfig = function (Vue, options, context) {
  let {head, isClient} = context;
  if (process.env.NODE_ENV === 'production' && isClient) {

to

const clientConfig = function (Vue, options, context) {
  let {head, isClient} = context;
  if (process.env.NODE_ENV === 'production' && isClient) {
    const { register } = require('register-service-worker');

I ran gridsome build to see how the directories look after building for production because I noticed that I don't get the dialog to 'add to homescreen', An array of all images in src is what's passed as icons instead of the one I put in /static

sample of manifest.json file

what i specified in gridsome.config.js

I also changed how I linked to the icon but that still gave the same result.

How could I override the service worker to do something like:

/* eslint-disable no-console */

import { register } from "register-service-worker";
import store from "./store";

if (process.env.NODE_ENV === "production") {
  register(`${process.env.VUE_APP_DOMAIN}/service-worker.js`, {
    ready() {
      console.log("App is being served from cache by a service worker.\n" + "For more details, visit https://goo.gl/AFskqB");
    },
    registered() {
      console.log("Service worker has been registered.");
    },
    cached() {
      console.log("Content has been cached for offline use.");
    },
    updatefound() {
      console.log("New content is downloading.");
    },
    updated() {
      console.log("New content is available; please refresh.");
    },
    offline() {
      store.dispatch("base/setOffline");
      console.log("No internet connection found. App is running in offline mode.");
    },
    error(error) {
      console.error("Error during service worker registration:", error);
    }
  });
}

service-worker.js hardcodes *.json in swConfig.globPatterns regardless of whether it is set in options.cachedFileTypes.

This forces clients to download every single page of the site, which can be a problem for sites with many pages.

Hey thanks for writing this plugin. I noticed the code for resizing the favicon is already there, but it doesn't yet work in the version on npm.

Would it be possible to release the next version soon?

Thanks.

Hello there, I got following issue after npm installing this and adding to the config.

This is the result

Scaffolding PWA assets
 - manifest.json..TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.join (path.js:427:7)
    at createManifest (X:\_tim\vuetest\timweidner.de\node_modules\gridsome-plugin-pwa\files\manifest.js:17:38)
    at Plugin.api.afterBuild (X:\_tim\vuetest\timweidner.de\node_modules\gridsome-plugin-pwa\index.js:23:40)
    at Plugins.run (X:\_tim\vuetest\timweidner.de\node_modules\gridsome\lib\app\Plugins.js:141:17)

This is my config

module.exports = {
  siteName: "Tims Blog",
  siteDescription:
    "100% Meinung zu Filmen, Gitarren, Spielen, Cosplay und mehr",

  templates: {
    Post: "/:title",
    Tag: "/tag/:id"
  },

  plugins: [
    {
      // Create posts from markdown files
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/*.md",
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: "Tag",
            create: true
          }
        }
      }
    },
    {
      use: "gridsome-plugin-pwa",
      options: {
        title: "Tims Blog",
        startUrl: "/",
        display: "standalone",
        statusBarStyle: "default",
        manifestPath: "manifest.json",
        serviceWorkerPath: "service-worker.js",
        cachedFileTypes: "js,json,css,html,png,jpg,jpeg,svg,webp,gif",
        shortName: "Tims Blog",
        themeColor: "#353b48",
        backgroundColor: "#2f3640",
        icon: "src/favicon.png", // must be provided
        msTileImage: "src/favicon.png",
        msTileColor: "#353b48"
      }
    }
  ],

  transformers: {
    //Add markdown support to all file-system sources
    remark: {
      externalLinksTarget: "_blank",
      externalLinksRel: ["nofollow", "noopener", "noreferrer"],
      anchorClassName: "icon icon-link",
      plugins: ["@gridsome/remark-prismjs"]
    }
  }
};

I did pretty much the same thing as
#8 (comment)

How can I force the app to download the content and reload the page?
now I see the message "New content is available; please refresh." and refreshing the page wont affect that.

Is it possible to specify an icon as 'maskable' in the current version?

It looks like the plugin will take the image specified as 'icon' and use that to generate an array of icons, all with purpose 'any'.

Now we will need to have an icon which has purpose 'maskable' or 'maskable any'. See Maskable Icon Audit for more info.

I noticed that after not including the serviceWorkerPath in the plugin configuration, a service worker file is still generated in the root directory.

It would be nice to have an option where one can choose to use a service worker or not.

We ran into a production issue with this plugin that appears to be caused by the issue first reported in #36:

1. Deployed an update introducing this plugin
2. Deployed an update that introduced localizations with the gridsome-plugin-i18n

The i18n plugin was configured with the enablePathRewrite set to true, so that old URLs would automatically redirect to their locale-prefixed versions (ex: /about -> /en/about).

As soon as the second deploy went out we received reports of users getting blank and un-styled pages. We were able to reproduce by visiting pages that had the service worker registered from 1 active. If you visited a page without the trailing slash it would break, as a cached version fo the page was being served by the service worker that referenced static assets that no longer existed.

We traced it down to the bug reported in #36 and were able to resolve it by setting disableTemplatedURLs to true.

My question is -- what is the use case that led to the templatedURLs logic in https://github.com/rishabh3112/gridsome-plugin-pwa/blob/master/src/files/service-worker.js#L22-L32?

Workbox Build will automatically find all of the pages that need to be pre-cached using the glob options, and AFAICT templatedURLs is only needed for server-rendered URLs:

If a URL is rendered based on some server-side logic, its contents may depend on multiple files or on some other unique string value. The keys in this object are server-rendered URLs. If the values are an array of strings, they will be interpreted as glob patterns, and the contents of any files matching the patterns will be used to uniquely version the URL. If used with a single string, it will be interpreted as unique versioning information that you've generated for a given URL.

See https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW

I don't think this applies to a static site generated with a tool like Gridsome, and worst case leads to stale cache entries that can break in ways that are hard to recover from without having users clear the cache storage.

I keep getting service worker errors in the console when I first load the service worker (You have to unregister the service worker in the debug menu and also clear the browser cache to see it). This stops the service worker from being installed. The second time you refresh the page, the service worker installs successfully. This is what I'm seeing in the console:

service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

You can see this behaviour on my temporary site https://preview.rehansaeed.com. Or you can look at my repo at https://github.com/RehanSaeed/rehansaeed.github.io.