Welcome to Centmin Mod Community
Become a Member

WebPerf Any tutorial for making a progressive web app?

Discussion in 'Web Development & Web Performance' started by modder, Apr 17, 2020.

  1. modder

    modder Member

    45
    5
    8
    Dec 6, 2019
    Ratings:
    +8
    Local Time:
    6:48 AM
    I noticed this website is pwa capable. How do you exactly make it?

    [​IMG]


    [​IMG]
     
  2. rdan

    rdan Well-Known Member

    5,018
    1,219
    113
    May 25, 2014
    Ratings:
    +1,847
    Local Time:
    6:48 AM
    Mainline
    10.2
  3. eva2000

    eva2000 Administrator Staff Member

    45,974
    10,444
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +16,206
    Local Time:
    8:48 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
  4. modder

    modder Member

    45
    5
    8
    Dec 6, 2019
    Ratings:
    +8
    Local Time:
    6:48 AM
  5. eva2000

    eva2000 Administrator Staff Member

    45,974
    10,444
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +16,206
    Local Time:
    8:48 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Yeah took me longer to understand as I don't know Javascript so relied on pure pattern recognition in online examples and trial and error and alot of reading. But Workbox helps. If you know Javascript probably would be alot easier to figure out.
     
  6. Jon Snow

    Jon Snow Active Member

    602
    97
    28
    Jun 30, 2017
    Ratings:
    +154
    Local Time:
    6:48 PM
    Nginx 1.13.9
    MariaDB 10.1.31
    So what does this do? It builds an app for your site and you can put it on the app store for users to download?

    First time hearing about PWA.
     
  7. eva2000

    eva2000 Administrator Staff Member

    45,974
    10,444
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +16,206
    Local Time:
    8:48 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Google-fu ;) PWA skip the need for app stores :)
     
  8. modder

    modder Member

    45
    5
    8
    Dec 6, 2019
    Ratings:
    +8
    Local Time:
    6:48 AM
    I really like the feeling of centminmod pwa, so smooth and fast..

    But it's just for Android right? Nothing can be done for iOS?
     
  9. eva2000

    eva2000 Administrator Staff Member

    45,974
    10,444
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +16,206
    Local Time:
    8:48 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    last I looked iOS doesn't support PWA ?
     
  10. Kintaro

    Kintaro Member

    79
    5
    8
    Dec 2, 2016
    Italy
    Ratings:
    +19
    Local Time:
    11:48 PM
    1.15.x
    MariaDB 10
  11. cryptoevo.de

    cryptoevo.de New Member

    2
    0
    1
    May 3, 2020
    Ratings:
    +0
    Local Time:
    11:48 PM
    Current Version
    Current Version
    I tried the PWABuilder now, I made a basic Manifest half was generated already, and then i chose for basic testing as Service Worker :
    Now i got a serviceworker-sw.zip with to files, pwabuilder-sw.js and pwabuilder-sw-register.js.
    Just throwing those to into my root is enough?

    Is workbox necessary, or only for optimisation?

    PS.: You made it also for registered user as default, and a own setting/checkbox in user panel for disabling/enabling PWA, have you thought to make a commercial/non commercial public release of that?
     
  12. eva2000

    eva2000 Administrator Staff Member

    45,974
    10,444
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +16,206
    Local Time:
    8:48 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Read the pwabuilder site documentation ;)

    Workbox is an alternate way of doing it but looks like pwabuilder site now uses Workbox as underlying tool anyway so should be same thing.

    Nope, no plans to release it as no time to provide support for it and well I haven't tested it for XF 2.1 yet anyway.
     
  13. wmtech

    wmtech Active Member

    124
    37
    28
    Jul 22, 2017
    Ratings:
    +97
    Local Time:
    11:48 PM
    Creating a PWA with pwabuilder is very easy and absolutely uncomplicated. Everyone can do it. So you don't need a tutorial.

    Workbox is slightly more complicated, so I won't recommend it for non technical admins.

    Even if you want a switch to allow your users to disable PWA, this could be done very easily with a custom user field and a template modification in Xenforo. But you don't need it, because why should anyone want to disable PWA anyway?

    And if you are a website visitor, who knows what to do, you can control the PWA of any web site also very easily with the developer tools of most browsers.

    So -as a site owner- just use pwabuilder and you are done. ;-)
     
  14. HenryChinask

    HenryChinask New Member

    2
    0
    1
    Jan 11, 2021
    Ukraine
    Ratings:
    +0
    Local Time:
    12:48 AM
    1.19
    10.5