Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to PWA by step by step

kkeeth
July 02, 2018

Introduction to PWA by step by step

kkeeth

July 02, 2018
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Home: ‘૔ෑ,

    ޿ౡ’, Interest: ‘όεέ, কع, ೔ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
  2. Table of Contents • Lightly looking back on history •

    What is PWA? • What can we do specifically about PWA? • Step to make PWA
  3. The era of browser war Each company developed and added

    its own function to their browser.
  4. The goalden age of feature phone • Low performance •

    Screen is small • Physical button • Less information • Not a web
  5. To smart phone heyday • Performance improvement • Touch panel

    • Operability is much improved • Install apps freely image by: https://ja.wikipedia.org/wiki/IPhone
  6. >

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

    Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Features of PWA
  8. 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.
  9. 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
  10. 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
  11. 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.
  12. 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.
  13. 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>
  14. 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.
  15. 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 })
  16. 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
  17. 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
  18. 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 })
  19. 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.
  20. 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.
  21. 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.
  22. 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
  23. Final directory structure app/ ├ fin-products/ │ └ public/ ├

    index.html ├ manifest.json ├ sw.js └ img/ Sample of finished product
  24. How to make it PWA? See “Progressive Web App Checklist”.

    https://developers.google.com/web/progressive-web-apps/checklist