Repository pwa-module

sebmor

sebmor posted a new question

pwa-module • a day ago

Splash screen on iOS

I noticed that @nuxt/pwa only adds something like this

<link data-n-head="true" rel="apple-touch-startup-image" href="/_nuxt/icons/icon_512.884ah64198A.png">

After some investigation why the splash screen didn't show up I came across this:
https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
and this
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

They explain that you need a splash screen per resolution.

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Is this maybe something we could integrate in @nuxt/pwa as well?

hemulin

hemulin posted a new question

pwa-module • 6 days ago

Can't remove pwa

This is really weird.

Couple of weeks ago I've added the PWA module to one of my projects.
Ever since then, EVERY project that uses nuxt is trying to call sw.js which clearly doesn't exists.

I thought it is something with caching on the browser and I've cleared it all but still every few seconds I see the following:

  nuxt:render Rendering url /sw.js +19s
{ statusCode: 404,
  path: '/sw.js',
  message: 'This page could not be found' }

How can I avoid this devilish behavior of the PWA?

haexhub

haexhub posted a new question

pwa-module • 9 days ago

How to configure offlineAssets?

Hi,
I try to get precache working and thought offlineAssets is there for. But nothing is prechached, so I guess I'm doing something wrong.

nuxt.config.js

workbox: {
offlineAssets: [
'/static/somefile'
, '/assets/all_subfolders/*'
]
},

But nothing from this folders is precached. The generated sw.js files has this:

sw.js

workbox.precaching.precacheAndRoute(['/static/somefile', '/assets/all_subfolders/*'])

But the precache stays empty.
What am I missing?

best regards

p1pchenk0

p1pchenk0 posted a new question

pwa-module • 19 days ago

Failed to load ServiceWorker: its route is recognized as 404

When I start application on localhost, my service worker is fetched correctly from localhost:3000/sw.js, but on production it fails to load from https://my.real.website.com/sw.js, as it is recongnized by Nuxt as non-existing route. Am I missing some configuration?

pimlie

pimlie posted a new feature request

pwa-module • 25 days ago

idea Destructure pwa module

What problem does this feature solve?

Would it be an idea to destructure the pwa module and list the separate modules in separate repos again (or probably nuxt/modules)? This makes the individual modules easier to find and makes it clearer that those modules are completely valid to use even without explicitly building a PWA app.

PWA is (at least to me) much more just of a concept then a technical solution, its a recommendation to use a combination of technologies. I think the PWA module supports that thinking as it doesnt implement anything on its own, eg pwa/index.js really just is a placeholder to automatically include the other modules.
But each technology has a purpose on its own, even if you dont want to explicitly build a PWA app. Maybe this is a bit of nitpicking, but there doesnt even appear to be a thing as a PWA specification, even the PWA checklist explicitly states that its a list what google thinks what it takes to have a baseline PWA.

Because of this I actually dont think the PWA module should exist in its current structure, it should just be a placeholder module. Especially modules like manifest, meta and icon really warrant to have their own repo as they are not only a subset of PWA specifications. Its confusing that the current module structure suggests that that is the case.

What does the proposed changes look like?

Move at least the meta, manifest and icon modules back to the nuxt/modules repo and let the pwa module just be a placeholder for combining certain technologies.

poyor7

poyor7 posted a new question

pwa-module • a month ago

deleted

a

poyor7

poyor7 posted a new question

pwa-module • a month ago

deleted

a

andrewbiang888

andrewbiang888 posted a new question

pwa-module • a month ago

Unable to Precache all visited pages, just home page

I've been messing with the Workbox feature for a few days and can't seem to get the precache option to work as I expect it to (probably user error). I made a restaurant review app for a Udacity class and could not get restaurant page to cache. The restaurant url would look like http://localhost:3333/restaurant?id=<number>. Not sure if that is what is causing my issue.

What I want to happen:
Load homepage (initial load), click on a restaurant page, disconnect form the internet, reload the page and see the same content.

What happens:
Load homepage (initial load), click on a restaurant page, disconnect form the internet, reload the page and get "This site can’t be reached" message.

What I've tried:

  • Adding cachingExtensions: 'http://localhost:3333/restaurant' to workbox object in nuxt.config.js
  • Adding this to runtimeCaching array:
     {
        urlPattern: new RegExp('^http://localhost:1337/restaurant'),
        handler: 'cacheFirst',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      }

Where I'm at now:

Here is my workbox object in nuxt.config.js.

workbox: {
    // importScripts: [
    //     'test-sw.js'
    // ],
    ignoreUrlParametersMatching: [/./],
    skipWaiting: true,
    cachingExtensions: 'http://localhost:3333/restaurant',
    runtimeCaching: [
      {
        // To match cross-origin requests, use a RegExp that matches
        // the start of the origin:
        urlPattern: new RegExp('^http://localhost:1337/.*'),
        handler: 'cacheFirst',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      },
      {
        urlPattern: new RegExp('^https:\/\/api\.tiles\.mapbox\.com\/.*'),
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      },
      {
        urlPattern: new RegExp('^http://localhost:3333/img/.*'),
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          cacheName: 'images',
          cacheableResponse: { statuses: [0, 200, 304] }
        }
      }
    ]
  }

Am I misunderstanding how this should work or is there a way to make it happen?

XanderLuciano

XanderLuciano posted a new bug report

pwa-module • a month ago

bug Basic Auth won't prompt for credentials due to service worker caching response

Affects: v2.4.0

Currently with a service worker caching pages, HTTP Basic Auth is broken. Upon initial load a user will be prompted for credentials, however, due to caching, this prompt will never be shown a second time unless the user clears their cache.

Originally filed as a chromium bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=623464
Though this appears to be an intentional "feature" to prevent random credential requests.

I am not sure what the proper solution to this is, though a possible workaround is outlined here: https://thatemil.com/blog/2018/02/21/pwa-basic-auth/

Additional workbox support is needed at this point before addressing this issue.

ishitatsuyuki

ishitatsuyuki posted a new feature request

pwa-module • a month ago

idea Use app shell as the primary response of the service worker

What problem does this feature solve?

App shell is described in https://developers.google.com/web/updates/2015/11/app-shell

After the initial load, SSR basically takes as much time as the client to just render them. Unless nuxtServerInit is used, we can just take the SPA file and respond with it. It can be cached longer and is network resource efficient.

What does the proposed changes look like?

  • Expose an endpoint (with middleware) to get the SPA template (only for SSR server, already handled by generate)
  • Cache the SPA template (need to mess with revision, I don't know how)
  • Configure workbox to respond with it.
pierreberchtold

pierreberchtold posted a new feature request

pwa-module • a month ago

idea [NUXT, PWA] Icons target Directory Option

What problem does this feature solve?

Some hosting providers (like godaddy) do not allow the "icons" directory in which the Nuxt PWA Icon module puts the icons. This results in a 404 error.
https://ch.godaddy.com/help/warum-werden-dateien-in-meinem-symbole-verzeichnis-nicht-angezeigt-261?lang=en

What does the proposed changes look like?

Let's define a targetDir with icons as a default value enabling a different directory name.

Following changes should make it:

File packages/icons/index.js
line 28: add const targetDir = options.targetDir || 'icons';
line 55: replace with const fileName = '${targetDir}/icon_${size}.${hash}.png'

File docs/modules/icon.md
line 21: add

**targetDir**
- Default: `icons`
tonylampada

tonylampada posted a new question

pwa-module • 2 months ago

Is there a recipe for using Chrome push notifications with firebase?

I have a Nuxt PWA at https://motorista.buser.com
And I got the basic Firebase + chrome example working: https://tonylampada.github.io/samples/push-messaging-and-notifications/index.html (cloned from google - https://github.com/GoogleChrome/samples)

I would like to integrate that same kind of setup into my Nuxt PWA and I'm wondering if there is a working recipe for doing that.

Firman95

Firman95 posted a new question

pwa-module • 2 months ago

Exclude specific page from precaching

Hi!
How to exclude specific page from precaching?
I tried to add this in nuxt.config.js, still not working:
workbox: { globIgnores: [ 'node_modules/**/*', 'pages/my-specific-page/*' ] }

shawndl

shawndl posted a new question

pwa-module • 2 months ago

Uncaught TypeError: self.WorkboxSW is not a constructor

I just installed the pwa-module and my service worker is not registering. I only the get error "Uncaught TypeError: self.WorkboxSW is not a constructor" and when I check the error using google development code it shows me this block of code. Can anyone tell me why I am getting this error?

const workboxSW = new self.WorkboxSW({
  "cacheId": "TestApp",
  "clientsClaim": true,
  "directoryIndex": "/"
})

This is my nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: TestApp',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },z
      { name: "apple-mobile-web-app-capable", content: 'yes'},
      { name: 'apple-mobile-web-app-title', content: 'TestApp},
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'}
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', href: 'images/static/compass-192x192', size: '192x192'}
    ],
    script: [

    ]
  },

  manifest: {
    name: 'Example App',
    short_name: "ExampleApp",
    description: "A test app!",
    background_color: "#1C8847",
    theme_color: "#6EB450",
    start_url: "/",
    scope: "/",
    display: "standalone",
    lang: "en-GB",
    orientation: "any",
    icons: [
      {
        src: "/images/icons/compass-48x48.png",
        sizes: "48x48",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-72x72.png",
        sizes: "72x72",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-96x96.png",
        sizes: "96x96",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-192x192.png",
        sizes: "192x192",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-512x512.png",
        sizes: "512x512",
        type: "image/png"
      }
    ]
  },

  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  /**
   *  External Libraries
   */
  modules: [
      '@nuxtjs/axios',
      '@nuxtjs/dotenv',
      '@nuxtjs/font-awesome',
      '@nuxtjs/bulma',
      'nuxt-buefy',
      ['@nuxtjs/pwa', { icon: false }]
  ],

  css: [
    'node_modules/bulma/bulma.sass',
    '@/assets/scss/main.scss'
  ],

  axios: {
      baseURL: process.env.BASE_URL
  },

  router: {
      middleware: [
        'clearValidationErrors',
        'clearImage',
        'clearForm'
      ]
  },

  plugins: [
    './plugins/mixins/user.js',
    './plugins/mixins/validation.js',
    './plugins/axios.js',
    './plugins/mixins/messages.js',
    './plugins/mixins/googlemaps.js',
    './plugins/mixins/vue-carousel.js',
    {src: '~/plugins/mixins/vue-hellojs.js', ssr: false},
    './plugins/init.js',
    './plugins/functions/axios/LocationAxiosFunctions.js',
    './plugins/functions/axios/ProfileAxiosFunction.js',
    './plugins/functions/axios/AdminLocationAxiosFunction.js'
  ],

  /*
  ** Build configuration
  */
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    },

    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

and my package.json file

{
  "name": "TestApp",
  "version": "1.0.0",
  "description": "At test",
  "private": true,
  "engines": {
    "node": "8.11.1",
    "npm": "5.6.0"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {},
  "devDependencies": {
    "@nuxtjs/auth": "^4.0.1",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/bulma": "^1.2.0",
    "@nuxtjs/dotenv": "^1.1.1",
    "@nuxtjs/font-awesome": "^1.0.3",
    "@nuxtjs/icon": "^2.1.0",
    "@nuxtjs/manifest": "^2.1.0",
    "@nuxtjs/meta": "^2.2.1",
    "@nuxtjs/pwa": "^2.0.8",
    "@nuxtjs/workbox": "^2.2.0",
    "axios": "^0.18.0",
    "babel-eslint": "^8.2.1",
    "body-parser": "^1.18.2",
    "bulma": "^0.7.1",
    "bulma-extensions": "^1.0.14",
    "clone": "^1.0.4",
    "cookie": "^0.3.1",
    "debug": "^3.1.0",
    "dotenv": "^5.0.1",
    "dotprop": "^1.0.2",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "font-awesome": "^4.7.0",
    "hash-sum": "^1.0.2",
    "hellojs": "^2.0.0-4",
    "hover.css": "^2.3.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.5",
    "moment": "^2.22.0",
    "node-sass": "^4.8.3",
    "nuxt": "latest",
    "nuxt-buefy": "0.0.4",
    "postcss-custom-properties": "^7.0.0",
    "sass-loader": "^7.0.1",
    "vue": "^2.5.17",
    "vue-carousel": "^0.7.3",
    "vue-hellojs": "0.0.4",
    "vue-meta": "^1.5.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.17",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17",
    "vue2-google-maps": "^0.8.12",
    "vuejs-datepicker": "^0.9.29",
    "vuex": "^3.0.1",
    "workbox-sw": "^3.4.1"
  }
}
Hiswe

Hiswe posted a new question

pwa-module • 2 months ago

WORKBOX – configuration concerns

Hi,

first of all thanks for this amazing library.

I've been updating the nuxt pwa module to its latest version and with this came the update from workbox 2 to workbox 3

I've set up a small repository to show you my config file.
The purpose of this configuration is to be able to test on my localhost many PWAs

So here are my questions about the configuration:

  • cacheId
    It seems that this isn't working anymore: it's always workbox-precache
    Per workbox documentation there should be a call to workbox.core.setCacheNameDetails({prefix: "my-custom-cache-name"}); right?
  • swDest
    If I want to change the name of service-worker, I have to put in the static folder instead of the dist folder for some reason… Seems strange
  • importWorkboxFrom
    with workbox-build 3 I should be able to have a local copy of the library, but that seems to be ignored…
  • skipWaiting and clientsClaim
    is there a reason about why the default are inverted from the workbox-build configuration?
  • dev
    I'm not sure the dev option really import the dev library of workbox or set workbox.setConfig({ debug: true })

Anyway thanks the efforts your putting in this library!

potato4d

potato4d resolved the question #c64

pwa-module • 2 months ago

how to test in localhost

@willin

The PWA module is enabled only when generate / build is executed.
This is a measure to prevent accidental caching in the development environment.
Please do the following as a test.

$ yarn build
$ yarn start
# access to localhost
aldarund

aldarund posted a new bug report

pwa-module • 2 months ago

bug PWA cause live site to stuck on loading files/api calls

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js

Steps to reproduce

Here some example screenshot https://i.imgur.com/hQe6ppA.png ( 5h for request xD ) https://i.imgur.com/575szHF.png https://i.imgur.com/OkF2uo9.png
File loading just stuck until that page manually opened in new tab. As soon as it opened - query finished. As long as it dont open - query in pending state and running.
Another fix is to open developer tools in chrome go to application and push sync button - then request will finish too. https://i.imgur.com/OCjjv3E.png
Same happens in FF.
Maybe somewhere race condition happens

What is expected ?

queries from service worker get stuck

What is actually happening?

queries finished without stucking

willin

willin posted a new question

pwa-module • 2 months ago

how to test in localhost

setup as doc.

WX20180903-161117@2x.png
WX20180903-161130@2x.png

but shows out no service workers were found

aldarund

aldarund posted a new bug report

pwa-module • 2 months ago

bug Hot Reload make page not load anything till restart of server

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js

Steps to reproduce

In chrome after some hot reloads page stop loading at all and only anonymous window work.
Terrible developing experience.

What is expected ?

No stuck page behaviour

What is actually happening?

stuck page behaviour

obj63mc

obj63mc posted a new question

pwa-module • 2 months ago

OneSignal Safari - JS error when in production mode and using internally supplied OneSignal SDK

Currently in the latest version of safari, nuxt and this pwa module, when I am using Workbox and Onesignal, I am getting the following error when running the site in production mode with - nuxt build && nuxt start

    Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'p.pushManager.getSubscription')

My setup for the PWA Module with OneSignal and Webpack is the following -

    modules:[
        '@nuxtjs/onesignal',
        '@nuxtjs/pwa',
        '@nuxtjs/browserconfig',
        '@nuxtjs/font-awesome',
        '@nuxtjs/redirect-module',
        'cookie-universal-nuxt',
        ['nuxt-sass-resources-loader', '@/assets/scss/layout.scss'],
    ],
    meta:{
        nativeUI:true,
        mobileAppIOS:false,
        favicon:true,
        ogHost: process.env.FACEBOOKHOST,
        ogImage: {
          path: '/fb-share.jpg',
          width:'1200',
          height:'630',
          type:'image/jpg'
        },
        twitterCard: 'summary_large_image',
        twitterCreator: '@',
        twitterSite: '@'
    },
    oneSignal: {
        init: {
          appId: process.env.ONESIGNALKEY,
          allowLocalhostAsSecureOrigin: true,
          welcomeNotification: {
              disable: true
          },
          autoRegister: false,
          promptOptions: {                
              actionMessage: "...",               
              acceptButtonText: "...",                
              cancelButtonText: "..."
          }
        }
    }
    build: {
        vendor:[
          'socket.io-client',
          'babel-polyfill',
          'vee-validate',
          '@xkeshi/vue-countdown',
          'vue-the-mask',
                'vue-flickity',
          'moment-timezone',
          'lottie-web',
          '~/static/svg-data/bell.json',
          '~/static/svg-data/bottle.json',
          '~/static/svg-data/building.json',
          '~/static/svg-data/clock.json',
        ],
        babel:{
          presets({server}) {
            return [
              ['vue-app',
                {
                  useBuiltIns: true,
                  targets: server ? { node: 'current' } : {ie: 11, uglify: true}
                }
              ]
            ];
          }
        },
        postcss: [
          require('postcss-fixie')(),
          require('postcss-utilities')(),
          require('postcss-aspect-ratio')(),
        ],
        extractCSS: {
          allChunks: true
        },
        extend (config, { isDev, isClient }) {
          if (isDev && isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules)/
            })
          }
        }
    },

Any idea how to resolve this error? If I set OneSignal to use their CDN SDK I don't get an error but then I am unable to test on localhost and it doesn't use my init configs.

Example of that config is -

    oneSignal: {
        cdn: true,
        OneSignalSDK: 'https://cdn.onesignal.com/sdks/OneSignalSDK.js',
        init: {
          appId: process.env.ONESIGNALKEY,
          allowLocalhostAsSecureOrigin: true,
          welcomeNotification: {
              disable: true
          },
          autoRegister: false,
          promptOptions: {                
              actionMessage: "...",               
              acceptButtonText: "...",                
              cancelButtonText: "..."
          }
        }
    }