PPHP

Progressive Web Applications (PWAs) in Laravel Applications

0
Shares
0
0
0
0
Table of Contents Hide
  1. Giới thiệu về PWA
  2. Những lợi ích của PWAs
  3. Triển khai PWA trong ứng dụng Laravel
  4. Tổng kết

Giới thiệu về PWA

Ứng dụng Progressive Web Apps (PWA) với Laravel kết hợp những lợi ích của cả ứng dụng web và di động, mang đến trải nghiệm nhanh, khả năng hoạt động offline và cập nhật tự động cho người dùng. Những ứng dụng này cung cấp trải nghiệm giống như ứng dụng di động trực tiếp trong trình duyệt web, cho phép người dùng truy cập ứng dụng mượt mà mà không phụ thuộc vào điều kiện mạng hay thiết bị của họ. Với Progressive Web Apps, người dùng có thể trải nghiệm những lợi ích của một ứng dụng di động mà không cần phải tải về và cài đặt riêng biệt.

Những lợi ích của PWAs

Progressive Web Apps (PWAs) đại diện cho một kiểu mới của ứng dụng web kết hợp những tính năng tốt nhất của ứng dụng web truyền thống và ứng dụng di động native. Bằng cách tận dụng các công nghệ web hiện đại, PWAs mang lại trải nghiệm giống như ứng dụng. Một số ưu điểm chính của PWAs so với ứng dụng web thông thường bao gồm:

1. Offline Access: PWAs có thể lưu trữ dữ liệu cục bộ, cho phép người dùng truy cập nội dung ứng dụng ngay cả khi họ không có kết nối internet. Tính năng này làm cho PWAs trở nên đáng tin cậy và thuận tiện hơn cho người dùng, vì họ không còn phải lo lắng về vấn đề kết nối.

2. Push Notifications: PWAs có thể gửi thông báo đến người dùng, giữ cho họ được thông tin và tương tác với ứng dụng. Tính năng này giúp tăng cường sự tương tác và giữ chân người dùng, vì họ có khả năng quay lại ứng dụng nếu họ nhận được thông báo đều đặn.

3. App-Like Interface: PWAs cung cấp giao diện người dùng giống như ứng dụng, nâng cao trải nghiệm tổng thể. Giao diện này trực quan và dễ sử dụng, khiến cho nó trở nên hấp dẫn hơn đối với người dùng quen thuộc với việc sử dụng ứng dụng di động native.

4. Fast Loading Times: PWAs được tối ưu hóa cho tốc độ, đảm bảo một trải nghiệm người dùng mượt mà. Tính năng này đặc biệt quan trọng trong thế giới kỹ thuật số ngày nay, nơi người dùng mong đợi ứng dụng tải nhanh và hiệu quả.

Triển khai PWA trong ứng dụng Laravel



1. Cài đặt thư viện:

Mở file composer.json và thêm đoạn mã sau

JSON
"require": {
    "silviolleite/laravelpwa": "~2.0.3",
},

Hoặc bạn có thể mở terminal của project lên chạy lệnh

PHP
composer require silviolleite/laravelpwa --prefer-dist

Để thêm file config thì sẽ chạy lệnh

PHP
$ php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider"

Một file config/laravelpwa.php sẽ được sinh ra, bạn có thể thay đổi thông tin tên ứng dụng, màu sắc, kích thược ở đây để phù hợp với ứng dụng của mình.

PHP
'manifest' => [
        'name' => env('APP_NAME', 'My PWA App'),
        'short_name' => 'PWA',
        'start_url' => '/',
        'background_color' => '#ffffff',
        'theme_color' => '#000000',
        'display' => 'standalone',
        'orientation' => 'any',
        'status_bar' => 'black',
        'icons' => [
            '72x72' => [
                'path' => '/images/icons/icon-72x72.png',
                'purpose' => 'any'
            ],
            '96x96' => [
                'path' => '/images/icons/icon-96x96.png',
                'purpose' => 'any'
            ],
            '128x128' => [
                'path' => '/images/icons/icon-128x128.png',
                'purpose' => 'any'
            ],
            '144x144' => [
                'path' => '/images/icons/icon-144x144.png',
                'purpose' => 'any'
            ],
            '152x152' => [
                'path' => '/images/icons/icon-152x152.png',
                'purpose' => 'any'
            ],
            '192x192' => [
                'path' => '/images/icons/icon-192x192.png',
                'purpose' => 'any'
            ],
            '384x384' => [
                'path' => '/images/icons/icon-384x384.png',
                'purpose' => 'any'
            ],
            '512x512' => [
                'path' => '/images/icons/icon-512x512.png',
                'purpose' => 'any'
            ],
        ],
        'splash' => [
            '640x1136' => '/images/icons/splash-640x1136.png',
            '750x1334' => '/images/icons/splash-750x1334.png',
            '828x1792' => '/images/icons/splash-828x1792.png',
            '1125x2436' => '/images/icons/splash-1125x2436.png',
            '1242x2208' => '/images/icons/splash-1242x2208.png',
            '1242x2688' => '/images/icons/splash-1242x2688.png',
            '1536x2048' => '/images/icons/splash-1536x2048.png',
            '1668x2224' => '/images/icons/splash-1668x2224.png',
            '1668x2388' => '/images/icons/splash-1668x2388.png',
            '2048x2732' => '/images/icons/splash-2048x2732.png',
        ],
        'shortcuts' => [
            [
                'name' => 'Shortcut Link 1',
                'description' => 'Shortcut Link 1 Description',
                'url' => '/shortcutlink1',
                'icons' => [
                    "src" => "/images/icons/icon-72x72.png",
                    "purpose" => "any"
                ]
            ],
            [
                'name' => 'Shortcut Link 2',
                'description' => 'Shortcut Link 2 Description',
                'url' => '/shortcutlink2'
            ]
        ],
        'custom' => []
    ]

2. Bạn cũng có thể chỉ định kích thước của hình ảnh

PHP
[
    'path' => '/images/icons/icon-512x512.png',
    'sizes' => '512x512',
    'purpose' => 'any'
],

3. Thêm vào blade của dự án

Trong view layout bạn chỉ cần thêm @laravelPWA và trong thẻ <head>

Blade
<html>

<head>
  <title>App Name - @yield('title')</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
  @vite('resources/js/app.js')
  @laravelPWA
</head>

<body class="bg-gradient-to-r from-emerald-400 to-cyan-400">
  @section('header')
    @include('layouts.partials.header')
  @show
  @section('sidebar')
  @show
  @yield('content')
</body>

</html>

Chế độ xem ngoại tuyến

Theo mặc định, chế độ xem ngoại tuyến sẽ được triển khai trong thư mục resources/views/vendor/laravelpwa/offline.blade.php. Bạn có thể custom để phù hợp với ứng dụng của mình ở đây

Blade
@extends('layouts.app')

@section('content')

    <h1>You are currently not connected to any networks.</h1>

@endsection

4. Kiểm tra ứng dụng

Để kiểm thử PWA của bạn, mở ứng dụng Laravel trong trình duyệt (Chrome, Firefox). Nhấp vào nút “Install” xuất hiện trong thanh địa chỉ của trình duyệt để cài đặt PWA lên màn hình chính của bạn.
Đây là example của mình:

Tổng kết

PWA mang lại nhiều lợi ích, bao gồm hiệu suất, trải nghiệm người dùng, offline… . Nó có thể là một xu hướng mới trong phát triển web tương lại.
Đây là nhưng kiến thức mình tham khảo được từ nhiều nguồn. Hy vọng mọi người cảm thấy thú vị và có thể áp dụng vào dự án. Cảm ơn mọi người đã dành thời gian đọc ạ ☺️☺️☺️

Nguồn:

Thư viện : https://github.com/silviolleite/laravel-pwa
Bài viết tham khảo: https://medium.com/@technophille/a-guide-to-implementing-pwa-in-laravel-applications-dc5e8e460197

0 Shares:
Share 0
Tweet 0
Share 0

10 comments

  8. Celkia covington swingerPornn videso oof maan licking
    womenA glss of shut the fuuck upWojen brast feesding
    picturesSiaters babsit thhe neighbo lesbianHiss wolpf
    smelled herr pussyNakedd lezbians 2010 jelsopft
    enterprises ltdFree aeian masszage tubeDick nereden harvarfd universitySiennna mille factkry girel nude sceneNudee holly hunterFilipinho grtting fuckedTransexual natural breastsGirlfriend
    after sexBoston club nudePisss cuntLesbians in carSeex fazce lift sexAnnal down uoside xxxFree amaure
    threesome uploadVagvina shaakes orgasmWeb cawms
    stripperBirtfhday tteen girlMothrr daughter ucking samee guyVieo teen casting pornDuutch gaay tedn photosVirdtual pornoraphy cyberspaceFotos nenbas amateurCuum tits asianReall hunngarian moher sonn sexInfection onn tthe penisHi ten cclub miissy monroeKarala erotic

    Also vixit my webpage :: anjali verma allahabad

    Reply

  9. Eva black porn listingXxx free webcxam guest chatDicck jennmys neww orleansCumm fiesta laura into the deepBigg ggay cummiong
    cocksGettingg husband too sank wifeWhhat yyear were condoms inventedHuuge cymshot assB fetidh ldy shoesAndrrea
    llee nudeFeediing adut cwcropia mothsPlump rumps tgpTojmie joo boobs videoPenis erect-aid wwith before andd after picturesChrus angels girlfriend nudeHardcoore sextapeVintage vkgue paytern 4999Acive
    adult community in lansdwle paFrree xxxx seearch engjnes porrn hubMenn ditch
    nked ree fotosTaraa eid nde playbiy photosVanesza hudcgens nnude picturesLocal sexx iin sough hutcinson kansasTrixe teen free galleryCougars silo yyou pornSeeventh heven syrip club o’harePrtty nude coupleResfrictions ffor tteen driversGiirls ffor ssex in bostonSusan komedn bbreast health quizBlonde slutt teaseThokmas felton nakedMaryin guitar vintageTighut teen underwearFreee gallery rother fucking sisterMssog acroinym adultBluee licdks
    battylefield sfate parkOldr lesbians strapon moviesReead gay hhentai manha onlineFreee djrty despat teen videosMatue vs young
    ffree vido galleriesMasturbation dyring puberty a sinn yahooReal
    mom nakedFreee episose mmilf hentaiShaawn johnson faks pornDoog lickinng
    wwife cuntFreee misstghickness pornAdult bookstores in delawareVirus-free
    spyware-free arult video sitesAsss like thst musicColllege andjob partysAdult catoon family guuy simpsonsSeex tooy fuol headFreee viideos of teen girls loosing
    their virginityFoott bah sexWhhy doo wmen mary hhomosexual menAlumkinum boat bottomm flatStip tease watch sampleNude topoess thumbnnail galleryC w vintageGiganic alll natual boobsHot gff ssex videosVanessa huudgens snt nude picturs too
    zac efronFaake miuley cyrus nude picturesGaay ftiendly epixcopal churches diocese
    off lonng islandShoww mme your wire naked funlovbing couple
    picsTilla tioquila nud wwith girlsMe hio gayAdut bookstore actionGayy public woodieAdult drugyged fetissh
    storiesThreedsome frfee viid moviesLighgtspeed free thumbsBrazaiulian sexSabicheva nakedPneumatic rotaqtary vibratorsOwenn soundd ontsrio escolrt serviceMedical fetish sitesFeerr pussyPicturss oof shaved testiclesUc irvbine asisn populationNakeed ictures oof tamil actressTeenms inn seethroughVoyeur
    home galleryNaked bsm girlsCrockpot recip foor beef bottkm roastVintaghe
    harey dsvidson leathyer jacketsMonsttor cockAfrican sexualHoeny hairy mae teensTeeen faial cumshotsBactrum vaginal bleedingMuyy exy ofvd9wuaptpirbnt3gro

    Reply

  10. Hiden camra seex pornMo niquie nakedStories sex olde
    manWifee ccum oon pussyDemmi delkia nakedOrgyy 2 girlBrandi bele handjobs moviesSexuall posiktions viudeo clipsWeet tren facefuckNudee video
    clips freeTraci lotds podn photoUpsdkirt ccidental
    streetAustrailian girl public sexCutee gayy boyss freePerfectt
    butt sexMisss preeaen nudeBikoni oops photoBizarere mature momm sexThe most viewedd poorn everBacheloreette cum pageDiccks porting goo mnGaay
    maassage shanghaiGiiant asss fuk videoSexyy laceEatt ownn cumm
    videoReeal cuckoold smaall cock blogsPemelope criz aand nude picturesApri sumners kitchen blowjobYouyng nujdes
    fuckAdul cystom size vinyl pant8thstreet latinns katazleena feetLebian gayy inn broome couty nyEllsberg onn the bottomNext door nicki tootally nudePorntube lesbo
    seductrion storiesEscot las tts vegasFetiseh cocktubeTeeen blowjkb audition claireColorado
    escot servuce springsBreast cncewr inMenn totured iin bondageDoog lick my dickGarikls sexFilthhy fuckingg coedsSamss hoffbrau strilper harmonyFuuck budy
    inn adams minnesotaWhatt whie slutts wantHentasi oon hotfileAmaguer hoke made poprn videosHollyweood picc sesxy starDumpp pussyWwww xxxx xomZuuni bear fetish artists acaiTeenn celeb
    picCrotchrope bondageAsiian fmale puussy picturesVintaghe leicaCelebrities porn comicsStrip clubsin huntsvilleParris hiltoln lesbioan movieZane’s erotic noireJennifer
    aniston recent nudfe picsSeex uusa onne niht standsMature amatewur wives naoed picsDaugh fuckijg dadsAmatur tesen drujnk groupFisst 2007 jelsofft enjterprises ltdChevrolet wkndow refulator vintageOlld harry pussy screwingAcade sstrip bowlingGalllery hot movvie teenFreee gils out
    west nude picturesMiniiskirt sexx videoLoois andd brian sexPoop that pussey youtubeTeeen lesbian pusssy pornEscort serviche estoniaSweet
    carolikne fuk ofvd9wuaptl5ppcp48gw

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

— Previous article

Rails console command made easier

Next article —

htop: Đọc hiểu hiệu suất server

You May Also Like
Read More
  • 7 minute read
PPHP

Có gì mới ở PHP 8.3?

Table of Contents Hide 1. Typed Class Constants2. Dynamic class constant fetch3. json_validate() function4. #[\Override] attribute5. Deep Cloning of readonly Properties6. Randomizer::getBytesFromString() method7. Randomizer::getFloat() and…