为hugo主题添加PWA支持
无论是在手机还是在电脑,都很喜欢将经常用的网站添加到桌面,苹果手机的是添加到主屏幕,将网站单独当应用使用。网页如果支持PWA,添加到主屏幕后,它就是一个应用。它的缓存机制,能提高访问速度,提供访问体验。如下图:
图 2 让网页支持PWA其实很简单,只需3步骤,前提是网页支持https访问。
1、创建manifest.json 内容如下:比如我的manifest.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "theme_color": "#4c8953", "background_color": "#ffffff", "display": "fullscreen", "scope": "/", "start_url": "/", "name": "拾点灵犀", "short_name": "拾点灵犀", "description": "刹那的火花,却也是永恒。", "icons": [{ "src": "https://life97.top/icon.png", "type": "image/png", "sizes": "150x150" }] } 2、创建serviceWorker 内容如下:
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 (()=> { var cacheName = 'top'; var offlineUrl = '/offline.