将 WordPress 网站转换为 Progressive Web App

Converting WordPress website to Progressive Web App

我正在构建一个渐进式 Web 应用程序,但到目前为止在线文档和支持非常少。我在这封电子邮件中列出了我所有的问题。

  1. Service Worker目前支持什么API(离线模式) 桌面?我写了一个在离线模式下工作的小应用程序 移动设备 (Android-Chrome) 但不适用于我的桌面设备 (Chrome 42)。我们需要 为此配置开发环境,所以我们需要知道 我们需要什么来测试我们的应用程序。它不起作用 IOS-Safari/Chrome偶数。

  2. 服务工作广泛使用缓存,有很好的 在 Dekstop 上调试或未注册 Service Worker 内部结构的方法 Chrome;但是如果我 运行 我在移动设备上的应用程序,我将如何删除 服务工作者缓存?

  3. 如果我有一个响应式应用程序(一个 WordPress 站点)并且需要 将其转换为 PWA;我需要重写应用程序吗 手机版全部休息API? (阅读 PWA 的 App Shell)。在 PWA,应用程序 shell 与数据分开,但在 CMS 中 WordPress数据与UI.

  4. 没有分开

我一直在寻找这些答案,但一直找不到合适的支持。

What is the current support of Service Worker API (Offline Mode) for desktops? I wrote a small app which worked in offline mode for mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need to configure development environment for this so we need to know what will we be needing to test our apps. It doesn't work on IOS-Safari/Chrome even.

Safari 目前不支持服务人员,但 it should work in Chrome 42 尽管您应该考虑更新您的浏览器。无论如何,您可以在各种地方查看最新技术:

关于软件的更多信息:

The service work uses caches extensively and there is a very good way to debug or unregistered service worker internals on Dekstop Chrome; but if I run my application on Mobile how would I remove service worker cache?

你需要debug Chrome for Android from Desktop Chrome.

无论如何,URL chrome://serviceworkers-internals 在 Chrome 上可用 Android,尽管没有清除离线缓存的简单方法。

If I have a responsive application (A WordPress site) and need to convert it into PWA; would I need to rewrite the application with RestAPI for mobile version all again? (Read App Shell of PWA). In PWA, application shell is separate from data however in CMS like WordPress data is not separate from the UI.

没有。实际上,WP 有一个很好的架构来将内容与主题分离。 问题 是服务器上的 运行 但您不需要将您的站点 运行 连接到客户端才能成为 PWA。 Mozilla 支持 suite of WP plugins 以帮助 进步 您的 WordPress 安装:

它们都是非常年轻的插件,但您可以在 GitHub 上跟踪它们,如果您愿意,可以做出贡献!

@Salva 已经添加了一个非常好的和有用的答案,但我想让我添加一些可能有用的东西。

对于第 3 部分,我在一个自动渐进式 Web 应用程序转换器平台上工作,https://www.escalatingweb.com。我认为您可以使用此平台将 WordPress 上的 Web 应用程序转换为渐进式 Web 应用程序。您可以使用它在几分钟内将您的网络应用程序转换为 pwa。 我还写了一个非常好的教程来使用自动 pwa 转换器平台 http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/

对于第二部分, 只是添加到上面的答案,并且出于测试目的,您可以从站点设置中删除特定网站的所有缓存,这也会清除服务工作者的缓存。

对于第 1 部分,无需添加任何内容。

P.S。如果有人认为这是推广我的平台的廉价方式,请不要被冒犯。目的只是通过构建平台或让需要的受众了解它来帮助社区。 谢谢@McNab 的建议。 :)

我也在用一个Wordpress网站,有一个插件可以解决你的问题。您可以安装 Super Progressive Web Apps 插件(在插件安装中搜索),而不是安装大量 Mozilla 的插件,它可以完美运行。在 Android phone 和 IOS 上都试过了 https://wordpress.org/plugins/super-progressive-web-apps/