【问题标题】:serviceworker-rails gem not intergrating with solidus eCommerce gemserviceworker-rails gem 未与solidus eCommerce gem 集成
【发布时间】:2018-09-17 13:09:39
【问题描述】:

我正在使用 serviceworker-rails gem 使我的电子商务应用程序成为一个渐进式 Web 应用程序。这是项目中的一个gem文件sn-p;

# progressive web application gem
gem 'serviceworker-rails'
# eCommerce gems
gem 'solidus'
gem 'solidus_auth_devise'
#base gems
gem 'rails', '~> 5.2.0'
ruby '2.5.1'

serviceworker-rails gem 依次生成使应用程序成为渐进式 Web 应用程序所需的清单文件;

app/assets/javascripts/serviceworker.js.erb

var CACHE_VERSION = 'v1';
var CACHE_NAME = CACHE_VERSION + ':sw-cache-';

function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([

        // make sure serviceworker.js is not required by application.js
        // if you want to reference application.js from here
        '<%#= asset_path "application.js" %>',

        '<%= asset_path "application.css" %>',

        '/offline.html',

      ]);
    })
  );
}

function onActivate(event) {
  console.log('[Serviceworker]', "Activating!", event);
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
          return cacheName.indexOf(CACHE_VERSION) !== 0;
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
}

// Borrowed from https://github.com/TalAter/UpUp
function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/offline.html');
        }
      })
    })
  );
}

self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);

app/assets/javascripts/serviceworker-companion.js

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js', { scope: './' })
    .then(function(reg) {
      console.log('[Companion]', 'Service worker registered!');
    });
}

应用程序不会引发任何错误;只是我碰巧注意到服务人员没有被注册。这是正在使用的清单;

app/assets/javascripts/manifest.json.erb

{
  "name": "My Progressive Rails App",
  "short_name": "Progressive",
  "start_url": "/"
}

...最后;

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Istore</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>

  <body>
    <%= yield %>
  </body>
</html>

公平地说;我以前用过这个设置,效果很好。当我将它与solidus_gem 一起使用时,有些东西会中断。至今;我调试问题的努力只使我集中在一组概率上。最强的存在;缺少根指令。

(gem 也不适用于默认的 rails 起始页)

但是在设置自定义根页面时;宝石有效。所以我做了一些猴子补丁并将solidus的根页面添加到我的项目中,然后附加应用程序路由以包含solidus主页。

config/routes.rb

Rails.application.routes.draw do
  root to: 'spree/home#index'

  mount Spree::Core::Engine, at: '/'    

end

这已被证明是不成功的。我正在使用 lighthouse 来审核应用程序,错误表明 serviceworker 没有被注册。

我错过了什么?有什么超出范围吗?

【问题讨论】:

  • 您的应用程序布局是否与该设置一起使用?我无法由此判断您的应用程序布局是否正在使用,或者 gem 的引擎是否提供了它自己的。如果是后者,那么您的应用程序 js 将不会加载并随后注册您的 serviceworker。
  • solidus gem 带有它的默认布局。我认为问题就在这里。将 gem 的文件添加到项目并修改它们似乎也不起作用。至今;宝石似乎覆盖了任何干扰宝石资产的东西。添加需要应用程序布局的自定义根页面可能会解决此问题。

标签: ruby-on-rails rubygems service-worker web-worker solidus


【解决方案1】:

我终于让它工作了:)。提供应用程序布局的 gem 是solidus,但问题是清单位于solidus 是gem 的本地应用程序中。

使其对宝石可见;我从

中删除了标签
app/views/layouts/application.html.erb

然后将它们放入 gems 布局文件中。您必须在本地下载它才能进行更改。撰写本文时的布局文件位于

app/views/spree/layouts/

但 head 部分包含 _head 部分的渲染

app/views/spree/shared/_head.html.erb

从哪里可以更有效地将这些标签放入其中以解决问题。

<%= javascript_include_tag "application" %>
<link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes">

【讨论】:

    猜你喜欢
    • 2013-08-08
    • 1970-01-01
    • 2013-02-20
    • 2013-11-11
    • 1970-01-01
    • 2023-04-02
    • 2013-11-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多