Tweet
Tweet

Slide 1

Slide 1 text

Progressive Web Apps: The future of mobile web/apps By Vineet Talwar @vineetsktalwar

Slide 2

Slide 2 text

#wcbuc @vineetsktalwar

Slide 3

Slide 3 text

Ever fancied a native mobile app of your WordPress website? @vineetsktalwar

Slide 4

Slide 4 text

But how? • Time and costs? Maintenance? • Multiple mobile platforms? • Developers? • Platform specific technologies? @vineetsktalwar

Slide 5

Slide 5 text

The answer is!! Progressive Web Apps (PWA) @vineetsktalwar

Slide 6

Slide 6 text

What if I told you... @vineetsktalwar

Slide 7

Slide 7 text

Installable WordPress website Wait.. What ? @vineetsktalwar

Slide 8

Slide 8 text

@vineetsktalwar Reliable Fast Engaging

Slide 9

Slide 9 text

Lets talk about • HTTPS @vineetsktalwar Source: Medium

Slide 10

Slide 10 text

Push notifications • Google Firebase • OneSignal • SendPulse @vineetsktalwar

Slide 11

Slide 11 text

Lets talk about 1. Service Workers 2. Web App Manifest (Installable Website) @vineetsktalwar

Slide 12

Slide 12 text

@vineetsktalwar Source: https://www.blog.google/

Slide 13

Slide 13 text

Go offline!! @vineetsktalwar

Slide 14

Slide 14 text

@vineetsktalwar • Twitter • Instagram • Google Maps • Uber • Tinder Who else is doing it?

Slide 15

Slide 15 text

@vineetsktalwar Source: http://programmersvalley. blogspot.com Browser support?

Slide 16

Slide 16 text

What about WordPress core support ? Feature plugin https://github.com/xwp/pwa-wp @vineetsktalwar

Slide 17

Slide 17 text

Own theme with all standard PWA features. Plugin: Progressive WordPress – Nico Martin https://wordpress.org/plugins/progressive-wp/ @vineetsktalwar But, How do I Build one?

Slide 18

Slide 18 text

What about a native app? @vineetsktalwar

Slide 19

Slide 19 text

PWA Builder https://github.com/pwa-builder/ManifoldJS or Cordova @vineetsktalwar

Slide 20

Slide 20 text

npm install -g pwabuilder pwabuilder @vineetsktalwar

Slide 21

Slide 21 text

@vineetsktalwar 1. Sign 2. Test 3. Publish What next ?

Slide 22

Slide 22 text

@vineetsktalwar 1. Lighthouse test 2. Your browser Simulator 3. Android studio or Xcode Device Emulator 4. AWS Device Farm 5. Real Device Testing

Slide 23

Slide 23 text

@vineetsktalwar Source: knowyourmeme.com Possible Issues ?

Slide 24

Slide 24 text

@vineetsktalwar Source: me.me Xcode

Slide 25

Slide 25 text

@vineetsktalwar Android Studio

Slide 26

Slide 26 text

Questions? @vineetsktalwar

Slide 27

Slide 27 text

Thank You Email : [email protected] @vineetsktalwar