PWA 是什么?
PWA 全称 Progressive Web App,即渐进式 WEB 应用。
- 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏;
- 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能;
- 实现了消息推送。
这篇教程主要针对前两个功能。
本博客曾经采用 WordPress 搭建,故这里一并阐述如何使 WordPress 下的网站支持 PWA。
WordPress 下使网站支持 PWA
Manifest 添加至主屏幕
在主题根目录 vi header.php
,在 <head>
和 </head>
之间添加:
1
| <link rel="manifest" href="/manifest.json" />
|
在站点根目录 vi manifest.json
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| { "name": "应用名", "short_name": "应用短名", "description": "应用描述", "display": "standalone", "start_url": "/", "theme_color": "Hex 主题色", "background_color": "Hex 背景色", "icons": [ { "src": "icon/appicon.png", "sizes": "512x512" } ] }
|
"name":
必填,显示应用名称;
"short_name":
可选,在 APP Launcher 和新标签页显示。如果没有设置,则使用 "name":
的值;
"background_color":
在启动 WEB 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
mkdir icon
,cd icon
,放入文件应用图标 appicon.png。
这时由于没有启用 Service Worker,Manifest 也没有作用。
下面将帮助你启用 Service Worker。
在主题根目录 vi footer.php
,在 <footer>
和 </footer>
之间添加:
1 2 3 4 5 6 7 8 9 10 11 12
| <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function (err) { console.log('ServiceWorker registration failed: ', err); }); } </script>
|
在站点根目录 vi service-worker.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13
| self.addEventListener('install', event => { console.log('install',event); event.waitUntil(self.skipWaiting()); });
self.addEventListener('activate', event => { console.log('activate',event) event.waitUntil(self.clients.claim()); });
self.addEventListener('fetch', event => { console.log('fetch',event) });
|
完成。去浏览器清除缓存,你试试地址栏右边是不是多了个安装应用的按钮呢?
你也可以浏览器里按 f12 打开开发者工具,到 Application 栏进行调试。如果用的安卓手机,推荐 Kiwi Browser,菜单里也有开发者工具。
Service Worker 缓存
Service Worker 高级在于它能离线缓存和动态缓存。
vi service-worker.js # 上次编辑的文件
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| var OFFLINE_PREFIX = "offline-"; var CACHE_NAME = "main_v1.0.0";
var cacheName = "helloWorld";
self.addEventListener("install", (event) => {
event.waitUntil( caches.open(cacheName).then((cache) => cache.addAll([ "/index.php", ]) ) ); console.log("install", event); event.waitUntil(self.skipWaiting()); });
self.addEventListener("fetch", function (event) { console.log("fetch", event); event.respondWith( caches.match(event.request).then(function (response) { if (response) { return response; } var requestToCache = event.request.clone(); return fetch(requestToCache).then(function (response) { if (!response || response.status !== 200) { return response; } var responseToCache = response.clone(); caches.open(cacheName).then(function (cache) { cache.put(requestToCache, responseToCache); }); return response; }); }) ); });
self.addEventListener("activate", (event) => { console.log("activate", event); event.waitUntil(self.clients.claim()); var mainCache = [CACHE_NAME]; event.waitUntil( caches.keys().then(function (cacheNames) { return Promise.all( cacheNames.map(function (cacheName) { if ( mainCache.indexOf(cacheName) === -1 && cacheName.indexOf(OFFLINE_PREFIX) === -1 ) { console.info("SW: deleting " + cacheName); return caches.delete(cacheName); } }) ); }) ); return self.clients.claim(); });
|
至此,WordPress 下的 PWA 已经启用完毕。剩下唯一可能要自定义的,是上方的第 15 行。
hexo-theme-butterfly 下使网站支持 PWA
要为 hexo-theme-butterfly 配置 PWA,你需要如下步骤:
- 打开 hexo 工作目录;
- 运行
npm install hexo-offline --save
或者 yarn add hexo-offline
;
- 在根目录
vi hexo-offline.config.cjs
,并增加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| module.exports = { globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'], globDirectory: 'public', swDest: 'public/service-worker.js', maximumFileSizeToCacheInBytes: 10485760, skipWaiting: true, clientsClaim: true,
manifestTransforms: [removeIndex] }
async function removeIndex(manifestEntries) { const manifest = manifestEntries.map(entry => { entry.url = entry.url.replace(/(^|\/)index\.html$/, '/'); return entry; }); return { manifest }; }
|
-
由于本博客使用的配置有简化,很多地方有注释,你可以根据自身情况删去注释符号,或者根据官方文档完善你的配置。
-
vi _config.butterfly.yml
:
1 2 3 4 5 6 7
| pwa: enable: true manifest: /pwa/manifest.json
|
cd source
,mkdir pwa
,cd pwa
,vi manifest.json
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| { "name": "应用名", "short_name": "应用简称", "description": "应用描述", "theme_color": "Hex 主题色", "background_color": "Hex 背景色", "display": "standalone", "scope": "/", "start_url": "/", "id": "/", "icons": [{ "src": "/pwa/512.png", "sizes": "512x512", "type": "image/png" }] }
|
注意,manifest.json 与 Hexo 插件 hexo-tag-hint 有冲突(原因是 hexo-tag-hint 会在所有文件头部引用相应 css),要使用 PWA,务必先 npm remove hexo-tag-hint
。
另外,此处的 manifest.json 与 WordPress 的 manifest.json 略有差别,因为框架不同,我写它的时间不同。
随后,把应用图标 512.png 放入 pwa 文件夹里。
你也可以通过 Web App Manifest 快速创建 manifest.json(Web App Manifest 要求至少包含一个 512*512 像素的图标)。
- f12 调试,或者安装 Chrome 插件 Lighthouse 进行检查。
至此,hexo-theme-butterfly 下的 PWA 已经启用完毕。