ZIM Explore! 74. Making a Mobile PWA with the Canvas and ZIMjs
Here we make a Mobile PWA (Progressive Web App) in five minutes with ZIM and the ZIM PWA tool. We are converting our Zapps to PWA for the new ZIM Store at https://zimjs.com/store - there is a link at the top there to Mobile with ZIM that includes a link to the mobile tool. Wow! This used to take us hours if not days!
00:00 start
00:25 ZIM free apps in STORE https://zimjs.com/store
00:55 testing https://zimjs.com/robots
01:40 PWA app = Progressive Web Application for mobile device
01:44 ZIM MOBILE https://zimjs.com/mobile.html
02:12 ZIM ZAPPS tool to create PWA app from a ZIM app https://zimjs.com/mobilezapps
03:00 a PWA app opens the website fullscreen and the address bar of the url not visible !
04:00 indox.html file changing to a PWA file with popup 'this is a PWA app + icon'
05:16 PWA installs the website on Apple iOS or Android as app, and is offline also possible to use
07:00 select an index.html file at https://zimjs.com/zapps/tool.html tool
07:38 all images should be load into the tool, here is shown how you can grab the filles
09:22 upload an icon for the app when you install it on your mobile device
10:22 files ZIM.js
10:50 ZIM.min.js
11:18 ZIP files.zip
12:18 folder with all files and zapp.html (not index.html)
13:00 manifest.json
13:22 serviceworker.js file
13:57 zapp.html
14:40 end of zapp file
14:57 automatically wrapping by ZIM https://zimjs.com/mobilezapps
15:37 little yellow pane "this is a PWA app the can be installed on mobile device as app" message
16:00 finial step copy over the files
17:12 copy all Zapp code into index.html file
18:12 trying out the Zapp on the website https://zimjs.com/store to open https://zimjs.com/robots
19:08 ending more on https://forum.zimjs.com or https://zimjs.com/discord