Introduction to PWA by step by step

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
July 02, 2018

Introduction to PWA by step by step

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

July 02, 2018
Tweet

Transcript

  1. Introduction to PWA by step by step 6/28 ʲαϙʔλʔζColabษڧձʳ k-kuwahara

    @kuwahara_jsri clown0082
  2. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Home: ‘૔ෑ,

    ޿ౡ’, Interest: ‘όεέ, কع, ೔ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
  3. Communities collaborator translator staff

  4. github.com/k-kuwahara github.com/k-kuwahara

  5. Let’s start the today’s talk of PWA !!

  6. Table of Contents • Lightly looking back on history •

    What is PWA? • What can we do specifically about PWA? • Step to make PWA
  7. Lightly looking back on history

  8. 1991.8.6 HTML1 was born

  9. image by: http://virtuallyfun.com/wordpress/category/win32s/

  10. The era of browser war Each company developed and added

    its own function to their browser.
  11. mobile phones around this time ...

  12. The goalden age of feature phone • Low performance •

    Screen is small • Physical button • Less information • Not a web
  13. 2007.1.9 iPhone release !!

  14. To smart phone heyday • Performance improvement • Touch panel

    • Operability is much improved • Install apps freely image by: https://ja.wikipedia.org/wiki/IPhone
  15. The web became easier to see. But, still web first…

  16. None
  17. None
  18. Responsive

  19. >

  20. Rushed into the era of mobile first

  21. What is PWA?

  22. Mobile first is good, but UX has room for improvement.

  23. ⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps) For more

    mobile first and UX
  24. –Pete LePage “Progressive Web Apps are experiences that combine the

    best of the web and the best of apps.”
  25. What can we do specifically about PWA?

  26. • Progressive • Responsive • Connectivity independent • App-like •

    Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Features of PWA
  27. PWA example APP

  28. PWA example

  29. ⚠Caution⚠ I will not touch about “push notifications”.

  30. Step to make PWA

  31. Advance preparation • Using Google Chrome • Sample application https://github.com/k-kuwahara/pwa-sample

    note: This application assumes using “Firebase”. Therefore, the “public” directory is the content to be deployed.
  32. 1. Served over HTTPS

  33. Why does PWA require HTTPS?

  34. 1. Served over HTTPS • A secure web is here

    to stay https://blog.chromium.org/2018/02/a-secure-web-is- here-to-stay.html • Prefer Secure Origins For Powerful New Features http://www.chromium.org/Home/chromium-security/ prefer-secure-origins-for-powerful-new-features • HTTPS required https://developers.google.com/web/fundamentals/ primers/service-workers/#https
  35. APP 2. Add to home screen 1. Create manifest.json 2.

    Import manifest.json to index.html 3. Create icons for home screen 4. Create JavaScript file of Service Worker
  36. 2-1. Create manifest.json { "name": "PWA sample of supporterzcolab 439",

    "short_name": "PWA sample”, "icons": [ { "src": "img/launcher-icon-48x48.png", "type": "image/png", "sizes": "48x48" }, . . . { "src": "img/launcher-icon-512x512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/?utm_source=homescreen", "display": "standalone", "theme_color": "#ff0044", "background_color": "#f2f2f5" } Please check the meaning of each item.
  37. 2-2. Import manifest.json to index.html index.html (in <head> tag) <link

    rel="manifest" href="/manifest.json">
  38. 2-3. Create icons for home screen { "name": "PWA sample

    of supporterzcolab 439", "short_name": "PWA sample”, "icons": [ { "src": "img/launcher-icon-48x48.png", "type": "image/png", "sizes": "48x48" }, . . . { "src": "img/launcher-icon-512x512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/?utm_source=homescreen", "display": "standalone", "theme_color": "#ff0044", "background_color": "#f2f2f5" } Prepare icons of size for each device.
  39. 2-3. Create icons for home screen It is correct if

    it is displayed like this.
  40. 2-4. Create JavaScript file of Service Worker sw.js self.addEventListener(‘fetch’, (e)

    => { // empty }) index.html (in <head> tag) <script src=“/sw.js”></script>
  41. Setting complete. Let's check it !!

  42. Click this link

  43. 3. Offline experience 1. Make all pages HTTPS 2. Edit

    Service Worker file
  44. 3-1. Make all pages HTTPS Everything omitted because same as

    “1.”
  45. 3-2. Edit Service Worker file 1 const CACHE_NAME = 'my-site-cache-v1';

    2 const urlsToCache = [ 3 '/', 4 '/index.html', 5 '/bundle.js' 6 ]; cache key name. ※ If you will change Service Worker jobs, change this name. Target file list to cache.
  46. 3-2. Edit Service Worker file 8 self.addEventListener('install', (e) => {

    9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 })
  47. 3-2. Edit Service Worker file 8 self.addEventListener('install', (e) => {

    9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 }) 1. Create cache and open the cache with key name CACHE_NAME
  48. 3-2. Edit Service Worker file 8 self.addEventListener('install', (e) => {

    9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 }) 2. Register the specified file list in the cache
  49. 3-2. Edit Service Worker file 18 self.addEventListener('fetch', (e) => {

    19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 })
  50. 3-2. Edit Service Worker file 18 self.addEventListener('fetch', (e) => {

    19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) Look for resources that match the available cache for the resource at the requested URL, This events is poffline’s processing.
  51. 3-2. Edit Service Worker file 18 self.addEventListener('fetch', (e) => {

    19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) If it matches, it responds the resource from the cache.
  52. 3-2. Edit Service Worker file 18 self.addEventListener('fetch', (e) => {

    19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) If they do not match, acquire resources from the network.
  53. 3-2. Edit Service Worker file You can also delete the

    old cache by using “activate” events. https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/ Using_Service_Workers#Deleting_old_caches
  54. Setting complete. Let's check it !!

  55. Click this checkbox, and reload page.

  56. Final directory structure app/ ├ fin-products/ │ └ public/ ├

    index.html ├ manifest.json ├ sw.js └ img/ Sample of finished product
  57. How to make it PWA? Using Lighthouse (implemented in chrome)

  58. How to make it PWA? See “Progressive Web App Checklist”.

    https://developers.google.com/web/progressive-web-apps/checklist
  59. How to make it PWA? Check the implementation status of

    the function By Can I use
  60. Let’s play with PWA !!