allanchain / gridsome-plugin-pwa Goto Github PK

I've tried to use this plugin with the InjectManifest option:

// gridsome.config.js

module.exports = {
  plugins: [
   {
      use: '@allanchain/gridsome-plugin-pwa',
      options: {
        name: 'timee',
        theme: '#424242',
        icon: './src/favicon.png',
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
          swSrc: './src/service-worker.js',
          /*exclude: [
            '_redirects',
            'netlify.toml',
            /^img\/.+\.svg$/
          ]*/
        },
      }
    }
  ]
}

// service-worker.js

import { registerRoute, NavigationRoute } from 'workbox-routing';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  new NavigationRoute(createHandlerBoundToURL('index.html'))
);

The build is successful, but I get this error in the browser console:

Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('http://localhost:5000/') with script ('http://localhost:5000/service-worker.js'): ServiceWorker script evaluation failed

And for some reason, index.html is not being precached.

Do you have a working example of how to configure the InjectManifest method?

i'll add maskable icon in manifest options, how i do it?
I'll have like in link below
https://web.dev/maskable-icon-audit/?utm_source=lighthouse&utm_medium=devtools

Ideally maskable icon can be specified separately to a regular icon.

While you can specify multiple space-separated purposes like "any maskable", in practice you shouldn't. Using "maskable" icons as "any" icons is suboptimal as the icon is going to be used as-is, resulting in excess padding and making the core icon content smaller. Ideally, icons for the "any" purpose should have transparent regions and no extra padding, like your site's favicons, since the browser isn't going to add that for them.

Source: Adaptive icon support in PWAs with maskable icons

I recently submitted a pull request to gridsome-plugin-pwa to achieve this, I think it would be great to have this added here too. It looks like it can be handled similarly here with no impact on existing use, whereby the 'maskable' property of defaultIconConfig.androidChrome is expanded to allow for either a boolean or a string:

• When maskable is false, the icons are generated with purpose 'any' (current behaviour)
• When maskable is true, the icons are generated with purpose 'maskable any' (current behaviour)
• When maskable is string, it is treated as a unique icon, to be generated with purpose 'maskable' (new feature)

This gives developers the freedom to have both 'regular' icons and 'maskable' icons generated and identified in the manifest, per recommendations for adaptive icon support in PWAs.

Hi @AllanChain
I have been trying to use the CacheFirst strategy for external image source i.e cloudinary. But getting:

The response for 'https://res.cloudinary.com/adapttive/image/upload/v1617880771/Unsolved_Mysteries_in_Magento2_Dark_2629a6feb5.png' is an opaque response. The caching strategy that you're using will not cache opaque responses by default.

Tried to add to service-worker.js , but same results.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.origin === 'https://third-party.example.com' &&
             url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      })
    ]
  })
);

as suggested in https://developers.google.com/web/tools/workbox/modules/workbox-cacheable-response

Any suggestions? Thanks for your efforts.

I created this plugin, in another way (different from gridsome/gridsome#167), for convenient and organized PWA config, and the support for serving manifest during development (rishabh3112/gridsome-plugin-pwa#21).

Many things still suck :

• config logic
• test coverage (I mean real coverage, not line coverage 😄 )
• it generates icons on every reload ( update: will be fixed in v0.4.0)

However, this plugin meets my own needs. And all over GitHub, no other repo depends on this plugin. I may fix some of problems, but I will no longer actively develop this plugin like this month.

And yes, feel free to create issues and PRs, and I will respond ASAP. I am glad that you like this plugin.

(Or leave a kind reaction / comment on this issue if you like this plugin)

Edit:

PWA for gridsome is harder than I thought. Plan to read gatsby-plugin-offline's source code and try creating app shell if I have time. Gridsome seems not support app shell because it reads query data from window.__INITIAL_STATE__...

#1 has done simple e2e testing. We need more unit testing to make the project more stable.

grisome.client.js is easy to test. just pass options and head = [ link: [], meta: [] ].

We need extract some functions to ease unit testing from server API code.

For example, generateManifest, getWorkboxOptions