lavas-project / jekyll-pwa Goto Github PK

View Code? Open in Web Editor NEW

103.0 7.0 19.0 563 KB

Jekyll plugin for PWA

License: MIT License

Ruby 100.00%

jekyll pwa ruby jekyll-plugin workbox

jekyll-pwa's People

Contributors

Stargazers

Watchers

Forkers

ashmaroli daniil-sokolov souldanger mathiasbynens bmeurer kalwalt borisschapira shamhaner isnicc dakutree julianrubisch sharpetronics rdy4ever andreaspappoutas bullwinkle nishu napipatrik

jekyll-pwa's Issues

jekyll-pwa-plugin.rb:161:in `block in <module:Jekyll>': undefined local

Since upgrading, I receive the following build error. Any guidance would be greatly appreciated?

/usr/gem/gems/jekyll-pwa-plugin-5.1.5/lib/jekyll-pwa-plugin.rb:161:in block in <module:Jekyll>': undefined local variable or method page' for Jekyll:Module (NameError)

from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/hooks.rb:103:in block in trigger' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/hooks.rb:102:in each'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/hooks.rb:102:in trigger' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/document.rb:392:in trigger_hooks'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:548:in render_regenerated' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:532:in block (2 levels) in render_docs'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:531:in each' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:531:in block in render_docs'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:530:in each_value' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:530:in render_docs'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:210:in render' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in process'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in process_site' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in build'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in process' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in block in process_with_graceful_fail'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in each' from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in process_with_graceful_fail'
from /usr/gem/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:18:in block (2 levels) in init_with_program' from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in block in execute'
from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in each' from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in execute'
from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in go' from /usr/gem/gems/mercenary-0.4.0/lib/mercenary.rb:21:in program'
from /usr/gem/gems/jekyll-4.2.0/exe/jekyll:15:in <top (required)>' from /usr/local/bundle/bin/jekyll:29:in load'
from /usr/local/bundle/bin/jekyll:29:in `

Trying to make cache fetch work

Hello!
I'm trying to get a grasp around PWAs and i'm using my personal website running with Jekyll to test that.
I stumbled upon your plugin it seems to work partly but i wonder: shouldn't it allow offline fetch of the content?
It does not seem to work. The service worker i manually wrote at first was not perfect but did that. I was looking for a way to generate the caching function automatically for all html files. Is this something that can be done with this tool?

Error during service worker registration: TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed

Using gem version 2.2.3
I have Error during service worker registration: TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed, sw-register.js?v=1557035608464:18

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js?v=1557035593').then(function(reg) {
                reg.onupdatefound = function() {
                    var installingWorker = reg.installing;
                    installingWorker.onstatechange = function() {
                        switch (installingWorker.state) {
                            case 'installed':
                                if (navigator.serviceWorker.controller) {
                                    var event = document.createEvent('Event');
                                    event.initEvent('sw.update', true, true);
                                    window.dispatchEvent(event);
                                }
                                break;
                        }
                    };
                };
            }).catch(function(e) {
                console.error('Error during service worker registration:', e);
            });
        }

Service worker don't have fetch handler

_config.yml

plugins_dir:
- jekyll-pwa-plugin
pwa:
  sw_src_filepath: service-worker.js # Optional
  sw_dest_filename: service-worker.js # Optional
  dest_js_directory: assets/js # Required
  precache_recent_posts_num: 5 # Optional
  precache_glob_directory: / # Optional
  precache_glob_patterns: # Optional
    - "{js,css,fonts}/**/*.{js,css,eot,svg,ttf,woff}"
    - index.html
  precache_glob_ignores: # Optional
    - sw-register.js
    - "fonts/**/*"

manifest.json

{
    "name": "test",
    "short_name": "Test",
    "icons": [{
        "src": "img/manifest/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    }, {
        "src": "img/manifest/apple-touch-icon.png",
        "sizes": "152x152",
        "type": "image/png"
    }, {
        "src": "img/manifest/ms-touch-icon-144x144-precomposed.png",
        "sizes": "144x144",
        "type": "image/png"
    }, {
        "src": "img/manifest/chrome-touch-icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "background_color": "#fdfdfd",
    "theme_color": "#4acaa8"
}

service-worker.js

importScripts("/assets/js/workbox-v3.6.2/workbox-sw.js");
            workbox.setConfig({modulePathPrefix: "/assets/js/workbox-v3.6.2"});

            self.__precacheManifest = [{"url":"/assets/js/collectives.min.js","revision":"939918cd847e4a6fd2842db465c3cc4e"},{"url":"/assets/js/glsl-canvas.min.js","revision":"029b8e76557372b169ecf6c04fc327e3"},{"url":"/assets/js/Imager.min.js","revision":"2312fa2358b9a93688ee61921e6edc68"},{"url":"/assets/js/imagesloaded.pkgd.min.js","revision":"e2c1a80b99251b7b94726b41312fb160"},{"url":"/assets/js/index.min.js","revision":"5a6e69e509277b7df6fc874ca6b6f3cc"},{"url":"/assets/js/jquery.nav.js","revision":"161fb6357601a77f0b608e0d472c4b2c"},{"url":"/assets/js/prism.min.js","revision":"c9e8dad2751189d09b90a4a81957f6da"},{"url":"/assets/js/social-share.min.js","revision":"54dcc9d7bf7f775c7b844c02babe93d5"},{"url":"/assets/js/TweenMax.min.js","revision":"4b0d7645edfb6f68c4aa331835960f86"},{"url":"/assets/css/app.min.css","revision":"08802b971ef39ab3661fe1b48d9ea55b"},{"url":"/assets/css/collectives.min.css","revision":"430607535d425954111ca81d12beba78"},{"url":"/assets/css/github-markdown.css","revision":"6797a54b2e0026174985ab06ad94326f"},{"url":"/assets/css/post.min.css","revision":"ff43276965b4f02c78f5736cbaa726f1"},{"url":"/assets/css/prism.css","revision":"0e08edd4d4f9739c7d8375ef43b467f4"},{"url":"/assets/css/share.min.css","revision":"a5d28161d70468ec2378da676284a34f"},{"url":"/assets/fonts/iconfont.eot","revision":"e83ffaa95463f987abe5db5bbbe303cc"},{"url":"/assets/fonts/iconfont.svg","revision":"eb5d36236b96681900e300ab19c620b6"},{"url":"/assets/fonts/iconfont.ttf","revision":"9ac2cc5ae8616eb50c033525dc14a5eb"},{"url":"/assets/fonts/Merriweather-Black.ttf","revision":"c9d1110e70e6caaaef00cb2e0e81f245"},{"url":"/assets/fonts/Merriweather-Light.ttf","revision":"ce9dd9123c54a9389f37084bfd780db9"},{"url":"/assets/fonts/iconfont.woff","revision":"bf0fc2ec6e2a614635e0ab6e81d059ef"},{"url":"/index.html","revision":"8aea3669afcb9fb459d402af30472d0f"},{"url":"/coding/2019/02/07/Bloom.html","revision":"b686c0e58040e3ce89ac85570d2b1617"},{"url":"/coding/2019/02/06/Lensflare.html","revision":"16b46fffb5f5fd6fc105a5c26084bec9"},{"url":"/coding/2019/02/05/HDR-Tone-Mapping.html","revision":"d95a6a6d10d102fbe8b92f48d5735910"}];
            workbox.core.setCacheNameDetails({
    prefix: 'xiaop-blog',
    suffix: 'v1',
    precache: 'precache',
    runtime: 'runtime-cache'
});

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute(self.__precacheManifest);

workbox.routing.registerRoute(
    /\.html$/,
    workbox.strategies.networkFirst()
);

workbox.routing.registerRoute(
    /assets\/(img|icons)/,
    workbox.strategies.cacheFirst()
);

workbox.routing.registerRoute(
    /^https?:\/\/cloud.netlifyusercontent.com/,
    workbox.strategies.staleWhileRevalidate()
);

workbox.routing.registerRoute(
    /^https?:\/\/cdn.staticfile.org/,
    workbox.strategies.staleWhileRevalidate()
);

workbox.routing.registerRoute(
    /^https?:\/\/at.alicdn.com/,
    workbox.strategies.staleWhileRevalidate()
);

gemfile

group :jekyll_plugins do
   gem 'jekyll-pwa-plugin', '~> 2.2.2'
end

My site
My repo

Event.initEvent() has been deprecated

Trying to learn how to capture the sw.update custom event, I found out the method used to initialize the value of the event by jekyll-pwa in sw-register.js has been deprecated.

https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

I wish i could help you address it, but the paragraph above should be fairly explicit about my level with these things...

If this is known or by any other means irrelevant to you, please excuse me for the noise.

Adding plugins

Thanks for the great work on this!

It would be helpful to be able to configure the use of plugins to, for example, set expiration and limit the number of files that are cached.

Migrate from Workbox v2 to v3

Hi,

Do you intend to update the Workbox version used in this plugin?

Migration guide: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v2

AMP support?

How to integrate this for AMP pages?

CSP: feature request

Hello
I have done some testing with various Content-Security-Policies.
The problem is the 'starter' script snippet that is injected on the bottom of each html page.
Even serving this snippet with a nonce or hash still makes xss attacks possible.

The only solution to avoid 'unsafe-inline' in the CSP is to add the snippet manually to i.e. an existing js file instead of the injection.
However, as 98% of admins do not pay too much attention to CSP attributes, I was wondering, if we could add a 'switch' to _config.yml, that turns off the injection of the snippet - in jekyll-pwa-plugin.rb line 132-148.
What do you think???
Thanks!

Add support for showing a prebuilt offline.html when we miss both precache and runtimecache.

Now this plugin precaches the recent N posts and some other static pages like index.html and tags.html so that they are offline available. But when a visitor opens the No.N+1 post or some other pages not in precache, it's better to show a offline.html instead of the default browser 404 page.

How to clear cache?

Hi @souldanger,

How can I automatic clear cache after deploy?

Consolidate settings in _config.yml?

I have been playing with the latest release, which brings a lot of great improvements. One thing I miss from the previous version, however, is being to manage all my settings directly from _config.yml. The previous implementation seemed more elegant in that regard, and I was wondering if it might be possible to implement that again. I realize doing so would limit the options available, but perhaps focusing on a few core features (e.g. expiring caches, offline analytics, custom offline page) would be sufficient.

Thoughts?

Service worker not being injected

I have followed the installations instructions of Option 1 and the plugin is installed

However, when I load any page, the service worker is simply not injected into it. There is no service worker at all <script> tag to be found. However, the sw-register.js file is produced as is workman in assets/js.

Any thoughts? If it is relevant, I am using the dactl theme

No need to set the cache header for the service worker since Chrome 68

Starting in Chrome 68, HTTP requests that check for updates to the service worker script will no longer be fulfilled by the HTTP cache by default.

https://developers.google.com/web/updates/2018/06/fresher-sw

undefined method `+' for nil :NilClass

Unfortunately, I am getting an error when I try to run this plugin. Below is the output from --trace.

C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-pwa-plugin-1.0.1/lib/jekyll-pwa-pl
ugin.rb:89:in `block in generate_workbox_precache': undefined method `+' for nil
:NilClass (NoMethodError)
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-pwa-plugin-1.0.1/lib/
jekyll-pwa-plugin.rb:80:in `each'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-pwa-plugin-1.0.1/lib/
jekyll-pwa-plugin.rb:80:in `generate_workbox_precache'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-pwa-plugin-1.0.1/lib/
jekyll-pwa-plugin.rb:186:in `block in <module:Jekyll>'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/hook
s.rb:103:in `call'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/hook
s.rb:103:in `block in trigger'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/hook
s.rb:102:in `each'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/hook
s.rb:102:in `trigger'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/site
.rb:212:in `write'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/site
.rb:73:in `process'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
and.rb:28:in `process_site'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/build.rb:65:in `build'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/build.rb:36:in `process'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/serve.rb:93:in `block in start'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/serve.rb:93:in `each'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/serve.rb:93:in `start'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/lib/jekyll/comm
ands/serve.rb:75:in `block (2 levels) in init_with_program'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y/command.rb:220:in `call'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y/command.rb:220:in `block in execute'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y/command.rb:220:in `each'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y/command.rb:220:in `execute'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y/program.rb:42:in `go'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/mercenary-0.3.6/lib/mercenar
y.rb:19:in `program'
        from C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/jekyll-3.8.2/exe/jekyll:15:i
n `<top (required)>'
        from C:/Ruby22-x64/bin/jekyll:23:in `load'
        from C:/Ruby22-x64/bin/jekyll:23:in `<main>'

Content Security Policy

Hi,
any chance of serving the registering process in a file rather than 'unsafe-inline' so the Content Security Policy for Cross Site Attacks (XSS) does not break?

Images Not Caching

Great plugin, this is exactly what I need for my use case!

Everything is working as designed, however the Service Worker does not cache images embedded within the posts (it does cache heading images).

Is this by design or am I missing something? Any help would be greatly appreciated?

How to add html pages to runtime cache

I'd like the html of pages that are visited to be added to the runtime cache; however, I am unsure about how to do this. The example below does a good job of caching all images, but does not catch the html pages.

runtime_cache: - route: /.*\.(?:png|jpg|jpeg|svg|gif|html)/ strategy: cacheFirst

Please check my installation

Hi,
Thanks for this plugin. I am a newbie.
I tried to add this plugin in my website here. Repo is this. I can't see the pwa notification. Which step I am missing.

How to listen for sw.update?

Hi. I'm using your plugin for a Jekyll project. Everything works OK, but I'm not able to listen for the sw.update event.
I tried to test the event like this:

window.addEventListener("sw.update", function() {
    console.log("Site has updated");
});

... but no message is generated in the console when I regenerate the site and the service worker changes.

Thanks

gh-pages support

Will this gem support gh-pages hosting? Thanks.

undefined local variable or method `page' for Jekyll:Module

I've configured the plugin exactly as laid out in the README.md and I'm getting the error above. Site works fine when I disable it.

Here's my _config.yml

# Setup
title:            Chris F. Nicholson
tagline:          'A place for the things I enjoy.'
description:      'Recipes and some writings by Chris F. Nicholson'
url:              https://www.chrisfnicholson.com
baseurl:          ''
                  # the optional subpath of your site, e.g. "/blog"
                  # NB: This applies to all pages in your Jekyll site.
                  # If you want to move just the blog index pages but keep
                  # other pages at root, see the paginate_path and
                  # sidebar_blog_link below.

author:
  name:           'Chris F. Nicholson'
  url:            https://www.chrisfnicholson.com

paginate:         5
# paginate_path:    '/page:num'
                    # Or '/blog/page:num' if you want to move your index pages

# Layout

show_social: false          # show site description and social links in the footer
show_excerpts: false       # show article excerpts on the home page
show_frame: false          # adds a gray frame to the site
sidebar: false        # show a sidebar instead of the usual header

# Theme
style: default
# dark_theme: true
# dark_nav: true

# Menu
navigation:
  - {title: Home, file: "index.html", icon: home}
  - {title: Recipes, url: "/recipes", icon: utensils}
  - {title: Cocktails, url: "/drinks", icon: glass-martini}

plugins:
  - jekyll-feed
  - jekyll-gist
  - jekyll-paginate
  - jekyll-remote-theme
  - jekyll-datapage-generator
  - jekyll-responsive-image
  - jekyll-webp
  - jekyll-sitemap
  - jekyll-seo-tag
  - Jekyll-pwa-plugin

exclude:
  - Gemfile
  - Gemfile.lock
  - Makefile
  - README.md
  - .gitignore
  - vendor

remote_theme: niklasbuschmann/[email protected]

page_gen:
  - data: recipes
    template: recipe
    name: name
    dir: recipes
    extension: html

  - data: drinks
    template: drink
    name: name
    title: name
    dir: drinks
    extension: html

responsive_image:
  template: _includes/responsive-image.html
  base_path: assets
  sizes:
    - width: 320
    - width: 480
    - width: 800

pwa:
  enabled: true # Optional
  sw_src_filepath: service-worker.js # Optional
  sw_dest_filename: service-worker.js # Optional
  dest_js_directory: /js # Required
  precache_recent_posts_num: 5 # Optional
  precache_glob_directory: / # Optional
  precache_glob_patterns: # Optional
    - "{js,css,fonts}/**/*.{js,css,eot,svg,ttf,woff}"
    - index.html
    - "recipes/*"
  precache_glob_ignores: # Optional
    - sw-register.js
    - "fonts/**/*"

# google_analytics: G-QTJ2YPCJSC
google_analytics: UA-387663-5

############################################################
# Site configuration for the WebP Generator Plugin
# The values here represent the defaults if nothing is set
webp:
  enabled: true

  # The quality of the webp conversion 0 to 100 (where 100 is least lossy)
  quality: 75

  # List of directories containing images to optimize, nested directories will only be checked if `nested` is true
  # By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there.
  img_dir: ["assets/images/recipes", "assets/images/drinks"]

  # Whether to search in nested directories or not
  nested: no

  # add ".gif" to the format list to generate webp for animated gifs as well
  formats: [".jpeg", ".jpg", ".png", ".tiff"]

  # File extensions for animated gif files
  gifs: [".gif"]

  # Set to true to always regenerate existing webp files
  regenerate: false

  # Local path to the WebP utilities to use (relative or absolute)
  # Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install
  webp_path: nil

  # List of files or directories to exclude
  # e.g. custom or hand generated webp conversion files
  exclude: []

  # append '.webp' to filename after original extension rather than replacing it.
  # Default transforms `image.png` to `image.webp`, while changing to true transforms `image.png` to `image.png.webp`
  append_ext: false
############################################################

Errors out during preliminary testing

Hi, 👋
Running bundle exec jekyll serve after adding the gem and config block to a test site errors out with the following message

jekyll 3.6.2 | Error:  No such file or directory @ rb_sysopen - ~/js/broadcast-channel-polyfill.js

Copying the contents of vendor from the gem seems to resolve this.
Edit: Having a <source>/js/something.js before-hand does not raise an error.