Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Intro to Progressive Web Apps (PWA)
Sofia Jonsson
Sofia Jonsson

Posted on • Edited on

     

Intro to Progressive Web Apps (PWA)

This last week I encountered a job application that asked me for my favorite trend in technology. Naturally, I went and googled top tech trends in 2019 and came across a pretty interesting list. What really caught my attention was Progressive Web Applications or PWA's. This was super interesting to me since I've recently been working on expanding my React Native knowledge for a mobile app project and this seems like a happy modern medium instead of building a pure native app. Sure, there are situations when you need a mobile application, but more often than not I'm clicking the dismiss popup in my browser. Ain't nobody got time to download an app just to delete it later.

So, this week I want to go over PWA's and why I think they're so cool and why you might want to use one!

What is PWA?

This application type was unveiled by Google back in 2015. It's got web and native app traits and lands somewhere in the middle taking the best from both approaches. It was initially only for Android users, but due to the iOS 11.3 update in March of 2018, iPhone users get to join in on the fun.
Alt Text

Features

  • Responsiveness: Building responsive applications is another trend for 2019 as there is a high need to provide an excellent user experience for all types of screens and platforms
  • Progressive updates: Sure, it's in the name. But more importantly, it needs to be progressive so that all types of users can interact with their application. This strategy is the core of the PWA and as a result, the most critical content is pushed to the forefront
  • Offline Use: This is HUGE. This means that users can use this app despite their browser. This type of application can work with a bad internet connection or even offline
  • Keeps it Fresh: Due to service workers, new updates are downloaded while the app is open and in use
  • Secure: Are only served through HTTPS to protect the privacy and security of its app's users
  • Discoverable: Is indexed in search engines and receives better ranks
  • Installable and linkable: No need for users to install PWA's through app stores. This is great for the developer's as well as they do not need to wait for approval from Play Market or App Store. The application can be sent via a link on the web and can be saved on a home screen instead.
  • Push Notifications: As opposed to web applications, PWA has access to sending push notifications and pop up and alert you about friend requests, recent news, new messages, etc.

Alt Text
Basically: it takes far less time to load and is fast to use. It's easier to share, doesn't require a download which is great for users. It's much faster to build and therefore cheaper and you don't have to wait for approval to launch on the market or store. Compared to a website it offers superior UX, works more securely offline and is impressively lightweight.

Good Examples

Here are some examples of large companies that have implemented PWA's.

  • Twitter: Launched PWA in 2017. Since then Twitter has cut average load time down by a third, decreased bounce rate by a fifth and increased their pages per session metric over 65%!
  • Forbes: Also launched PWA in 2017 with the goal of increasing user engagement and provide a fast personalized experience. It's PWA loads in 0.8 seconds and increased session per user metric by 43% and engagement by 100%
  • Tinder: Built using React and Redux. PWA is 90% smaller than the previous native app and loads in less than half the time of the native app.etc..

Lot's of stats here but as a general consensus, their PWA's operate on a fraction of their previous load time and have increased user engagement exponentially!

Frameworks

There are a few different options for frameworks when building out a PWA. Angular JS and Polymer which are both JavaScript based. There are also other Progressive web app tools such as React and Lighthouse, Dev Tools, and Workbox which are all valid options for building a robust progressive web app.

What's going on Under the Hood?

I will be diving into this topic in my next blog post to really get into the different elements that are used in web dev to make up the PWA.
Alt Text
Next week I will be covering:

  • App Shell
  • Service Workers
  • Manifest Files
  • Push notifications
  • Installation banners
  • Different Caching strategies

Stay Tuned

Top comments(8)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bayuangora profile image
Bayu Angora
★★★★★
  • Location
    https://angora.id
  • Joined

I installed PWA on my Hugo website. And offline mode is only works for page that visited (cached) before. Is there a way to make offline mode works to whole page, even without visiting page by page before?

CollapseExpand
 
talk2sohail profile image
Sohail
Talks about Software design, programming, systems, obserability
  • Email
  • Location
    Kolkata, India
  • Education
    Techno India SaltLake
  • Work
    Senior Engineer @QuEST Global
  • Joined

Hey..
I was resonating at the same idea you just mentioned..

I think it is possible through service workers..as it sits between the client and the server .
We can fetch things(not yet visited) in sw and therefore be able to cache it.
Hope it helps.
I am still working on a PWA.

CollapseExpand
 
s1hofmann profile image
Simon Hofmann
I'm a developer (no backend / frontend / fullstack foo, just a developer) working with JS, Java and various other interesting things.I'm currently working on https://github.com/nut-tree/nut.js
  • Location
    Munich
  • Education
    M.Sc. Computer Science
  • Work
    Software developer
  • Joined

It’s possible to do pre-caching with ServiceWorkers, so all your pages would be cached before the SW is installed. You can either build your own strategies, or take a look atworkbox, which comes with many „common“ caching patterns.

CollapseExpand
 
msamgan profile image
Mohammed Samgan Khan
Love to code with a DRY KISS

hi Sofia,
Nice article BTW. Me too is a great fan of PWA. I wrote a step by step article on how to create a PWA. Here is thelink, if someone is looking for the Implementation part.

CollapseExpand
 
ponickkhan profile image
Md.Rafiuzzaman Khan 🇧🇩
  • Location
    Dhaka,Bangladesh
  • Work
    Software Engineer at Strativ AB
  • Joined

Dev.to no PWA? I have downloaded the app but i still use it in browser

CollapseExpand
 
sami_hd profile image
Sami
I ♥ </>
  • Work
    Student at Uni
  • Joined

It's pwa for me

CollapseExpand
 
andyst81 profile image
andyst81
Learning to use a few different programming tools at the moment.
  • Location
    Thailand
  • Work
    Recruitment Manager at Bangkok
  • Joined

Thanks for this article Sofia. I enjoyed it and will be looking out for the next one.

CollapseExpand
 
rogierzeebregts profile image
Rogier Zeebregts
Developer from holland, for about 12 years now, with a passion for Javascript and React, but above all, MUSIC! Vinyl collector and dj.
  • Location
    Netherlands
  • Work
    Senior full-stack developer
  • Joined

I'm using Nuxt Js to build PWA's, and I love it. It's easy to use and provides easy to use, integrated Service Workers and packs a lot of (optional) packages/plugins.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Software Developer
  • Education
    Bachelor's in Business Administration, Software Engineering at Flatiron School
  • Joined

More fromSofia Jonsson

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp