Recent

Author Topic: HowTo: Make installable PWA Desktop and Android app  (Read 2740 times)

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
HowTo: Make installable PWA Desktop and Android app
« on: July 03, 2020, 11:26:09 am »
Simple steps how to create PWA Desktop and Android app with pas2js:

1. You will need mainifest.json
2. install worker
3. respond on install process
4. App must be on https.

manifest.json:
Code: Text  [Select][+][-]
  1. {
  2.   "name": "Your App Name",
  3.   "short_name": "App name on startup screen",
  4.   "description": "App description",
  5.   "icons": [
  6.     {
  7.       "src": "/manifest/icon128.png",
  8.       "sizes": "128x128",
  9.       "type": "image/png"
  10.     },
  11.     {
  12.       "src": "/manifest/icon256.png",
  13.       "sizes": "256x256",
  14.       "type": "image/png"
  15.     },
  16.     {
  17.       "src": "/manifest/icon512.png",
  18.       "sizes": "512x512",
  19.       "type": "image/png"
  20.     }
  21.     ],
  22.     "start_url": "/default-url-of-your-app",
  23.     "display": "standalone",
  24.     "orientation": "portrait",
  25.     "theme_color": "#ffffff",
  26.     "background_color": "#47B972",
  27.     "scope": "/"    
  28. }
 
install-worker.js:
Code: Javascript  [Select][+][-]
  1. self.addEventListener('install', (event) => {
  2.     self.skipWaiting();
  3.   });
  4.  
  5.   self.addEventListener('activate', (event) => {
  6.     return self.clients.claim();
  7.   });
  8.  
  9.   self.addEventListener('fetch', function(event) {    
  10.     event.respondWith(fetch(event.request));
  11.   });
  12.  
  13.  

And in app creation:

Code: Pascal  [Select][+][-]
  1. constructor TYourApp.Create;
  2. begin
  3.   IsMobile := ContainsStr(window.navigator.userAgent, ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini']); // detect mobile
  4.   if isFeature('serviceWorker', window.navigator) then begin
  5.     window.navigator.serviceWorker.register('/install-worker.js'); // pwa install support
  6.     writeln('service worker supported');
  7.   end else Writeln('serviceWorker not supported!');
  8.   window.addEventListener('beforeinstallprompt', @JSOnInstallPrompt); // for install  
  9. end;
  10.  
  11. function TYourApp.JSOnInstallPrompt(E: TJSBeforeInstallPromptEvent): Boolean;
  12. begin
  13.   Result := True;
  14. end;
  15.  

Now you can install app on android phone (when your app is first time used in your chrome browser, install dialog appears. Or you can hit "Place on home screen" from menu. In desktop Chrome or Edge (chrome bassed) you can install your app on desktop.

I'm using browser user agent to detect mobile app.
« Last Edit: July 03, 2020, 11:38:01 am by ps »
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

mr-highball

  • Full Member
  • ***
  • Posts: 233
    • Highball Github
Re: HowTo: Make installable PWA Desktop and Android app
« Reply #1 on: July 03, 2020, 04:57:50 pm »
Thanks @ps, will definitely give this a try!

 

TinyPortal © 2005-2018