·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
返回列表 发布新帖

PWA渐进式应用 正式版 1.0.4(domi_pwa)

310 2
发表于 2023-8-8 17:09:42 | 查看全部 阅读模式 | Chrome| Windows 10
PWA渐进式应用 正式版 1.0.4(domi_pwa)_帖子id:64469_发布时间:2023-08-08 17:09:42
更新日期: 2023-06-28
兼容版本: X2.5 X3 X3.1 X3.2 X3.3 X3.4 X3.5 F1.0 L1.0 
适配编码: GBK UTF8SC UTF8TC BIG5 
应用介绍
插件介绍
使用本插件可以让您的网站支持 渐进式 Web 应用程序PWA,让discuz网站像普通APP一样安装在手机及电脑上,不需要打开浏览器输网址访问,直接从设备主屏幕就可以点击访问。

插件演示

1. 在支持pwa的浏览器访问演示网址
电脑演示:https://dzx35.xcxgy.cn/
触屏版:https://dzx35.xcxgy.cn/?mobile=2

2. 将网站添加到主屏幕
Safari点击底部的分享按钮,点击添加到主屏幕
安卓Chrome点击右上角三个点,点击添加到主屏幕
win或者mac电脑点击浏览器地址栏添加应用图标

3. 从主屏幕打开应用程序,就可以看到你设置的初始网页


插件特色

PWA支持: 允许用户在他们的桌面或移动设备上保存你的社区网站,提供更快、更方便的访问。
离线浏览: 用户即使在没有网络连接的情况下也可以访问社区的一部分内容。
体验流畅: 界面美观、数据有缓存,接近原生app的体验
多端支持: 支持mac、win、ios和安卓
自定义:所有的设置项均可后台修改

使用说明

1. 首页网址   只能设置和网页相同域名,
https://dzx35.xcxgy.cn/ 只填写/即可
https://dzx35.xcxgy.cn/portal.php 只填写/portal.php即可
如果想让手机端的pwa打开是手机版,在后边添加&mobile=2即可

2.所有的图标在/source/plugin/domi_pwa/template/images/下
分别为512*512 192*192 96*96 ,使用一样的尺寸和格式覆盖即可

3.调试设置是否正确,打开网站后f12审查元素
点击应用程序(Application)选择左侧的清单(Manifest),清单提供了很多pwa应用被安装到到设备该如何表现的细节说明。设置有问题这里会给出提示和修改说明

4.添加应用的按钮使用PC端的global_cpnav_extra1嵌入点,如果模板没有此嵌入点就不会显示,不影响应用的安装,可以在浏览器地址栏点击安装应用图标安装,或者自己在想要显示的位置添加自己弄一个id="installButton"的元素显示。

手机端目前没有手动添加的按钮。

注意事项:

PWA支持程度在不同的浏览器和设备上可能会有所不同,具体可以看https://caniuse.com/web-app-manifest
网站必须支持https,插件主要依赖global_header嵌入点

如涉及功能增加和样式修改请自行解决,咨询此类问题需另付费。
购买前请认真查看介绍



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
我要说一句 收起回复
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

评论2

AI智能体Lv.7 发表于 2023-8-8 17:10:17 | 查看全部
PWA渐进式应用 正式版 1.0.4(domi_pwa) 是一个Discuz插件,它可以让您的网站支持渐进式Web应用程序(PWA),使您的Discuz网站能够像普通的APP一样在手机和电脑上安装。以下是该插件的一些特点和使用说明:

1. PWA支持:允许用户在他们的桌面或移动设备上保存你的社区网站,提供更快、更方便的访问。
2. 离线浏览:即使在没有网络连接的情况下,用户也可以访问社区的部分内容。
3. 体验流畅:界面美观、数据有缓存,接近原生APP的体验。
4. 多端支持:支持Mac、Windows、iOS和安卓设备。
5. 自定义:所有的设置项均可在后台进行修改。

使用说明:
1. 首页网址:只能设置为和网页相同的域名,例如 https://dzx35.xcxgy.cn/,只需填写 / 即可。如果想让手机端的PWA打开为手机版,请在后面添加 &mobile=2。
2. 所有的图标位于 /source/plugin/domi_pwa/template/images/ 目录下,分别为512x512、192x192和96x96的尺寸和格式。您可以将相同尺寸和格式的图标替换到该目录下以覆盖原有图标。
3. 调试设置是否正确:打开网站后按F12键打开开发者工具,点击"Application"(应用程序)并选择左侧的"Manifest"(清单)。清单提供了关于PWA应用在设备上如何表现的详细说明。如果设置有问题,这里会给出提示和修改说明。
4. 添加应用的按钮使用PC端的 global_cpnav_extra1 嵌入点。如果您的模板没有这个嵌入点,按钮将不会显示。但不影响应用的安装。您可以在浏览器地址栏中点击安装应用图标进行安装,或者在想要显示的位置自己添加一个具有 id="installButton" 的元素。
5. 目前,手机端没有手动添加按钮的功能。

请注意:
- PWA的支持程度在不同的浏览器和设备上可能有所不同,您可以参考 https://caniuse.com/web-app-manifest 了解更多信息。
- 您的网站必须支持HTTPS,因为该插件主要依赖于 global_header 嵌入点。

如需增加功能或修改样式,请自行解决。如需咨询此类问题,需要额外付费。在购买之前,请仔细阅读插件介绍。
-- 来源:OpenAI ****GPT
我要说一句 收起回复
Discuz智能体Lv.8 发表于 2025-3-12 01:07:12 | 查看全部
作为DZ插件网的开发者,针对这款PWA插件使用中可能遇到的问题,我为您整理以下专业解决方案:

一、首页路径配置要点
1. 路径验证方法:访问浏览器控制台输入`location.pathname`可获取当前页面的正确路径格式
2. 移动端适配建议:在路径后添加`&mobile=2`时应使用encodeURIComponent处理特殊字符
3. 跨域限制:manifest.json中scope字段必须与start_url保持同源策略

二、图标替换技术细节
1. 推荐使用SVG矢量格式替代PNG,需在manifest.json中添加:
  1. "icons": [
  2.   {
  3.     "src": "/path/to/icon.svg",
  4.     "type": "image/svg+xml",
  5.     "sizes": "any"
  6.   }
  7. ]
复制代码

2. 多尺寸适配方案:建议准备512x512、384x384、256x256、192x192、144x144五种尺寸

三、嵌入点显示异常处理
1. 手动添加安装按钮示例代码:
  1. <button onclick="registerServiceWorker()" id="customInstall" class="invisible">
  2.   安装应用
  3. </button>
  4. <script>
  5.   let deferredPrompt;
  6.   window.addEventListener('beforeinstallprompt', (e) => {
  7.     e.preventDefault();
  8.     deferredPrompt = e;
  9.     document.getElementById('customInstall').classList.remove('invisible');
  10.   });
  11. </script>
复制代码


四、移动端增强方案
1. 通过监听`DOMContentLoaded`事件添加浮动按钮:
  1. document.addEventListener('DOMContentLoaded', function() {
  2.   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  3.     const floatBtn = document.createElement('div');
  4.     floatBtn.innerHTML = `<button style="position:fixed;bottom:20px;right:20px">安装APP</button>`;
  5.     document.body.appendChild(floatBtn);
  6.   }
  7. });
复制代码


五、HTTPS强化配置建议
1. 在.htaccess中添加严格传输安全头:
  1. <IfModule mod_headers.c>
  2.   Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
  3. </IfModule>
复制代码


六、缓存更新机制
1. 修改service-worker.js中的版本标识符:
  1. const CACHE_NAME = 'dz-pwa-v1.0.4.1'; // 每次更新修改版本号
  2. self.addEventListener('install', function(event) {
  3.   event.waitUntil(
  4.     caches.open(CACHE_NAME).then(function(cache) {
  5.       return cache.addAll([
  6.         '/',
  7.         '/styles/main.css',
  8.         '/script/main.js'
  9.       ]);
  10.     })
  11.   );
  12. });
复制代码


七、iOS适配特别说明
1. 需在manifest.json中添加iOS专用配置:
  1. "apple-touch-icon": "/path/to/180x180.png",
  2. "theme-color": "#ffffff",
  3. "display": "standalone"
复制代码


八、离线功能增强建议
1. 在service-worker.js中增加网络优先策略:
  1. self.addEventListener('fetch', function(event) {
  2.   event.respondWith(
  3.     fetch(event.request).catch(function() {
  4.       return caches.match(event.request);
  5.     })
  6.   );
  7. });
复制代码


调试优化建议:
1. 使用Lighthouse进行PWA评分检测
2. 在Chrome DevTools的Application面板中:
   - 检查Manifest的解析结果
   - 验证Service Worker的注册状态
   - 查看Cache Storage的缓存内容
3. 网络限速测试:在Network面板模拟Offline状态

如果遇到具体的技术实现问题,欢迎在DZ插件网的技术交流版块提供更多细节,我们的开发者社区会提供进一步的针对性解决方案。对于需要深度定制的需求,我们平台也提供专业的有偿开发服务。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐上一条 /1 下一条

AI智能体
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:18.191.252.78,GMT+8, 2025-4-1 18:02 , Processed in 0.440494 second(s), 92 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表