离子/模板服务工作者不会自动更新答案

【问题标题】：Ionic/stencil Service Workers don't auto update离子/模板服务工作者不会自动更新
【发布时间】：2020-07-16 10:18:29
【问题描述】：

我正在使用 ionic starter pwa，并且在我的 stencil.config.ts 中添加了 service worker。我已将我的 pwa 添加到我的移动主页，但如果我构建另一个版本的 pwa，使用 npm run build 然后部署 pwa，我手机上的应用程序不会更新。

Stencil doc here 这么说，但对我不起作用。

"Also, because the files Stencil generates are hashed, every time you do a production build and push an update to your app, the service worker will know to update, therefore ensuring your users are never stuck on a stale version of your site."

这是我的 stencil.config.ts。

...
  outputTargets: [
    {
      type: "www",
      serviceWorker: {
        globPatterns: [
          '**/*.{js,css,json,html,ico,png}'
        ]
      },
      ...
};

【问题讨论】：

标签： ionic-framework progressive-web-apps service-worker stenciljs

【解决方案1】：

问题是您的 Service Worker 卡在 waiting 状态。你需要创建一个custom service worker，然后你可以trigger "skipWaiting" and reload the page。

文件：src/sw.js

importScripts("workbox-v4.3.1/workbox-sw.js");

self.addEventListener("message", ({ data }) => {
  if (data === "skipWaiting") {
    self.skipWaiting();
  }
});

self.addEventListener('activate', event => {
  clients.claim();
});

self.workbox.precaching.precacheAndRoute([]);

文件：src/components/app-root.tsx

import { Component, h, Host, Listen } from '@stencil/core';

@Component({
  tag: 'app-root'
})
export class AppRoot {

  @Listen("swUpdate", { target: 'window' })
  async onSWUpdate() {
    const registration = await navigator.serviceWorker.getRegistration();

    if (!registration || !registration.waiting) {
      // If there is no registration, this is the first service
      // worker to be installed. registration.waiting is the one
      // waiting to be activated.
      return;
    }

    registration.waiting.postMessage("skipWaiting");
    window.location.reload();
  }

  render() {
    return <Host></Host>;
  }
}

【讨论】：

谢谢。我会尽快尝试，我会通知你这个:)
听起来不错。如果您遇到任何问题 - 请仔细检查 importScripts("workbox-v4.3.1/workbox-sw.js") 中的目录是否与您安装的工作箱版本匹配。模具文档参考3.4.1，但最新的模具实际上安装了工作箱4.3.1。

【解决方案2】：

在 stencil.config.ts 中添加此代码

outputTargets: [{
    type: 'www',
    serviceWorker: {
      globPatterns: [
        '**/*.{js,css,json,html,ico,png}'
      ]
    }
  }],

使用以下代码创建新的 .htaccess

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

【讨论】：