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

Developing and Deploying Progressive Web Apps(PWA) with Firebase

Developing and Deploying Progressive Web Apps(PWA) with Firebase

“A PWA is just a regular web app which attended the best university and mastered user experience🎓”

Esinniobiwa Quareeb

March 16, 2019
Tweet

More Decks by Esinniobiwa Quareeb

Other Decks in Programming

Transcript

  1. Esinniobiwa Quareeb https://esinniobiwaquareeb.com PrayEatCodeFunLove || Libra ♎ || Known to

    preach Technologies && writes some Code || Love2Chat @iamdevesin esinniobiwaquareeb Cofounder/Lead Developer at CodeSquad LLC (AI Researcher & Deep Learning)
  2. In 2017, progressive web apps started being supported by the

    Chrome browser “A PWA is just a regular web app which attended the best university and mastered user experience”
  3. Today, progressive web apps are fully supported by Chrome and

    Opera. Firefox supports nearly all of their features. Microsoft Edge is working on them. The Samsung Internet browser has been making great strides this past year and has shown a strong commitment to progressive web apps, as demonstrated by Samsung’s leadership in some of the key standardization work. Apple has finally jumped on the mobile web train: service workers, a key component for supporting progressive web apps, are available in Safari 11.1 for iOS 11.3 and macOS 10.13.4.
  4. •What is PWA •What makes up PWA •Why and How?

    •Native Apps vs PWA •Concepts and Technologies •Let’s write some codes PWA
  5. Properties of PWA works offline and perform well on low

    quality network Loads in seconds, with smooth interactions inside the app. Runs on desktop and mobile, or anywhere you find a browser. Immersive app experience with full access to native features. Easily discovered through a simple web search. A fraction of the size of a traditional app store app. Always up-to-date with the latest content served instantly. Allows users to “keep” apps they find useful on their home screen. Source: Ionic Framework
  6. “Progressive web applications (PWAs) are web applications that load like

    regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.”
  7. Did you know? As at 2018, there are 12million mobile

    apps developers 65% of users install 0 apps a month 84% of users spend time in 5 apps 95% for tablets! Web sites have 4.5x greater reach https://www.pwastats.com/
  8. Roughly 70% to 80% of all time spent in mobile

    apps goes to four categories: Entertainment (like YouTube); Social media (like Facebook); Instant messaging (like Whatsapp); Games (like Fortnite). If your app concept doesn’t fall into one of those categories, is it worth all that work to place your app in the app store? While it is recognized that those aren’t the only kinds of apps that succeed, it would be a risky and expensive gamble to make, especially if your client’s business is brand new. Even then, there are so many cases of well-known entities that have opted not to compete in app stores, despite having a large enough audience or customer base to do so
  9. Bottom line: if you can give users a tangible link

    to your app, you can drastically reduce the friction often caused by having one that only exists in the app store. Plus, I think the searchability aspect is an important one to consider when you think about how people use your app. Instead of opening a data-hogging application on their device, they’ll open their search browser and type or speak their query. It’s what we’re all trained to do as consumers. Have a question? Need something? Want help choosing a restaurant? Go to Google. If your website or app provides an answer to those kinds of questions, you don’t want it hidden away in app stores. You also don’t want to give them a mobile website that offers an option to “Download the App”. You’re only creating extra work for them. A PWA enables you to place your app directly in search results and to get your users the instant answers they require.
  10. Things you need • Chrome Browser 45 or above. •

    A Text Editor. • Basic knowledge of HTML, CSS, Javascript and DevTools. • Node (for build process & deployment).
  11. HOW DO I BUILD A PWA? •Service worker •Application manifest

    •Push notifications •CacheStorage API • Technologies
  12. • Site should be in HTTPS. • Should have a

    registered service worker. • Should contain a name, short_name to display in banner and homescreen. • Icon should be PNG image and at least 144px in dimension. • Add to homescreen banner will show when user should visits your site at least twice with some time intervals in between. Criteria of PWA
  13. { "short_name": "ForPost", "name": “Forloop Post”, "description": “Forloop Unilorin PWA”,

    "start_url": "/#", "scope": "/", "display": "fullscreen", "icons": [ { "src": “images/192x192.png", "type": "image/png", "sizes": "192x192" }, { "src": "images/512x512.png", "type": "image/png", "sizes": "512x512" } ], "theme_color": "#db5945", "background_color": "#db5945" } manifest.json <link rel="manifest" href="/manifest.json"> How To
  14. Service Worker A service worker is a script that your

    browser runs in the background, separate from the web page, enabling features that do not require a web page or user interaction.
  15. var cacheId = “pwatest"; var cachedResources = [ "/index.html", "/#",

    "/manifest.json", "/styles/style.css" "/images/32.png", "/images/192.png", “/images/512.png”, “service-worker.js" ]; self.addEventListener("install", (event) => { console.log("Service worker installed"); event.waitUntil( caches.open(cacheId).then((cache) => { console.log("Caching all resources"); return cache.addAll(cachedResources); }) ); }); self.addEventListener("fetch", (event) => { console.log("Fetch request for:", event.request.url); event.respondWith( caches.open(cacheId).then((cache) => { return cache.match(event.request).then((response) => { return response || fetch(event.request); }); }) ); }); service-worker.js
  16. <script> $(document).ready(() => { if ("serviceWorker" in navigator) { navigator.serviceWorker.register(“/service-worker.js”)

    .then(function(registration) { console.log("Service Worker registered with scope:", registration.scope); }).catch(function(err) { console.log("Service worker registration failed:", err); }); } }) </script> index.html Register service worker
  17. Take a look at lighthouse Lighthouse is an open-source, automated

    tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
  18. Let’s evaluate our page so far with lighthouse Lighthouse analyzes

    web apps and web pages, collecting modern performance metrics and insights on developer best practices.
  19. BEST PRACTICE AND ACCESSIBILITY SCORE IN PROGRESSIVE WEB APPS If

    we look at the e-commerce URLs that scored over 80% for PWA, we see an average of 75% in both best practice and accessibility score. Here are some of the recommendations for avoiding performance pitfalls in PWAs: • Use of HTTP/2 • No using front-end JavaScript libraries with known security vulnerabilities (older versions) • App’s `short_name` must be less than 12 characters to ensure that it’s not truncated on homescreen. • No logging errors that can come from network request failures and other browser concerns. • Avoids Application Cache or WebSQL DB because both are deprecated • Avoids requesting the geolocation permission on page load. That’s because users are mistrustful of or confused by sites that request their location without context. • Displays images with correct aspect ratio
  20. Future of PWA my bold prediction PWA is built on

    web technologies.. and it doesn’t look like web technologies is going anywhere anytime soon, so is PWA
  21. ?