離線WebApp之序章
PWA(Progressive Web App) 的概念相信很多人都不陌生，但真正去應用 PWA 的網站確是少之又少，而應用了 PWA 並不等於就是離線WebApp，很多網站雖然用了PWA，但也僅僅是為了加快網站打開速度，並沒有完整的實現一個離線WebApp 離線WebApp，顧名思義，即使斷網也能夠正常使用的網頁，會有點難以想象，可以親自體驗一下：https://geek4.wuchen.org
Nickname 找到Web
@pwa
Contributes19
Followers0
Contributes
@pwa
Stories List
什麼是PWA?
web是一個很神奇的平台，擁有跨設備和跨操作系統的兼容性，擁有以用户為中心的權限模型。它規範是由w3c和whatwg兩個組織共同定製，它的實現則是交給各個瀏覽器廠商。再加上其固有的可連接性，用户可以隨時隨地搜索到，或者分享一個網頁給任何人。不管何時訪問網頁，都是最新的。WebApp只需要一套代碼，就可以觸達任何人，任何地方，任何設備。 原生App因為可靠而且豐富的功能而著稱。它們會一直待在你的設備
Nickname 找到Web
PWA的業務價值
漸進式WebApp，在很多公司的發展藍圖上，緊跟現代瀏覽器的腳步，以適應用户預期。像所有新的概念和技術功能一樣，它們會產生問題：這是不是我的客户需要的？它會如何提升我的業務？技術可行性怎麼樣？ 為了制定一些數字化的戰略，需要幾個利益相關者參與：產品經理、CTO，UX調研人員。產品經理關心每一個功能的業務價值，CTO關心技術的可行性和可靠性，UX調研人員關心功能是否可以解決客户問題。 這篇文章旨在
Nickname 找到Web
微軟如何使Edge成為PWA的最佳瀏覽器
相關閲讀：微軟解析新Edge瀏覽器的多進程體系結構 近年來，由於網絡巨頭和移動開發人員的推動，漸進式Web應用已成為一種增長趨勢，因為它們允許將類似原生的體驗帶入任何平台。 在最致力於這項新技術的公司中，有Microsoft，它通過PWABuilder等項目幫助Web開發人員擁抱了這一新技術。隨着第一個基於Chromium的微軟Edge版本的推出，以及最近在Build 2020上的宣佈，該公司通
Nickname 杭州程序員張張
使用Workbox創建PWA應用
前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽
Nickname 悖論BeilunYang
2020 年 Chrome 開發者峯會的亮點
2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘
Nickname 瘋狂的技術宅
ServiceWorker 使用
MDN 文檔 ServiceWorker 參考文章 Working with the JavaScript Cache API 代碼地址 目標 斷網情況下正常打開頁面，加載本地緩存數據 調試 chrome 控制枱 Application Service Workers 創建 serviceWorker 新建 sw.js 文件，初始化監聽事件： //sw.js // 版本號 con
Nickname chenwl
Vuepress實現圖片漸進式加載
又名給vuepress寫一個插件😊 最終的效果如下 思路 最近在看pwa時，在MDN上看見一段有趣的關於實現漸進式圖片加載的snippet，大意如下： img src="thumbnail.png" data-src="origin.png"/img var imgToLoad=document.qureySelectorAll('img[data-src]') imgToLoad.forEac
Nickname huaiyuG
webpack配置使用PWA
pwa離線應用緩存使用APP在實際應用中很多會用到 重要插件：workbox-webpack-plugin 下載安裝 在webpack.config.js文件配置引入使用 plugins中添加 new WorkboxWebpackPlugin.GenrateSW({clientClaim: true, skipWaiting: true}) 使用，在入口文件引入service-worker //
Nickname 萬年打野易大師
如何構建可控,可靠,可擴展的 PWA 應用
概述 PWA （Progressive Web App）指的是使用指定技術和標準模式來開發的 Web 應用，讓 Web 應用具有原生應用的特性和體驗。比如我們覺得本地應用使用便捷，響應速度更加快等。 PWA 由 Google 於 2016 年提出，於 2017 年正式技術落地，並在 2018 年迎來重大突破，全球頂級的瀏覽器廠商，Google、Microsoft、Apple 已經全數宣佈支持 PW
Nickname JerryC
ServiceWorker 緩存與 HTTP 緩存
雖然 ServiceWorker 和 PWA 正在成為現代 Web 應用程序的標準，但瀏覽器資源緩存變得比以往任何時候都複雜。 本文涵蓋了瀏覽器緩存的重點內容，具體包括： ServiceWorker 緩存與 HTTP 緩存的優先級？ 主流瀏覽器實現的 MemoryCache 和 DiskCache 在哪一層？ MemoryCache、DiskCache、ServiceWorker 緩
Nickname JerryC
天人合一物我相融，站點升級漸進式Web應用PWA(Progressive Web Apps)實踐
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_216 PWA（Progressive web apps，漸進式 Web 應用）使用現代的 Web API 以及傳統的漸進式增強策略來創建跨平台 Web 應用程序，説白了，PWA可以讓我們的站點以原生APP的形式運行，但相比於安裝原生APP應用，訪問PWA顯然更加容易和迅速，還可以通過鏈接來分享PWA應用。 有許多知名的網絡平台已
Nickname 劉悦的技術博客
PWA 圖標顯示問題，兼顧 macOS、Windows、iPad
首先看macOS任務欄的圖標規律： 會發現第三個：YouTube Music（PWA版本）的圖標很不對勁，不是因為它是圓形，其他都是方形。而是它很大，寬高明顯大過其他圖標。在我對比了VSC和YouTube Music的圖標圖片之後發現了區別所在： 上面看不明顯的話，這麼對比看就明顯了： 解釋下，圖3是圖2在控制枱（F12）資源那裏顯示的圖片，之所以看這個是因為可
Nickname 林水溶
vue項目引入pwa使網頁應用可安裝
最近在使用vue項目時看到一個這樣的效果，如圖： 現在其實有很多網站都支持把網頁安裝到電腦或手機（IOS Safari支持較好），如下圖安裝後的效果： 這些都是網頁應用。 接下來介紹一下如何讓你的vue2項目變得可以安裝。 添加cli-plugin-pwa 給現有的vue項目添加，使用下面命令： vue add pwa 執行完之後會自動在package.json添加"@vue/c
Nickname 來了老弟
vue項目部署後提示用户有新版本
你可能在瀏覽器見到過上面這種UI，這是在vue項目重新build在服務端部署後，瀏覽器刷新頁面彈出的提示，這時如果用户點擊更新就會重載頁面，清除之前的緩存獲取最新內容。 這是怎樣發生的呢？你可能會想到下面的方式： 服務端編譯重新部署維護一個版本號，客户端通過輪詢檢測和本地存儲的是否相同，發現更新的版本就彈框提示（缺點 耗電。尤其是在移動端） 通過在html中做版本標記... websoc
Nickname 來了老弟
面向邊緣場景的PWA實踐
背景 隨着5G技術的發展，物聯網邊緣側主要應用於數據傳輸量大、安全要求高以及數據實時處理等行業與應用場景中。其中，邊緣計算是一種分佈式計算模式，其將計算資源和數據處理能力推向接近數據源的邊緣設備，以減少延遲並提高響應速度。 對前端領域而言，面對邊緣場景下的應用開發也發生了相應的變化，其通常需要考慮邊緣側與終端側的實現方式，並且還需考慮相較於傳統 B/S 架構下的部署方案。本文旨在通過工業互聯網場
Nickname 維李設論
PWA 離線方案研究報告 | 京東雲技術團隊
本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用户的資源可以直接從本地加載，來忽略全國或者全球網絡質量對頁面加載速度造成影響。當然，如果頁面上所需的資源，除了資源文件外並不需要任何的網絡請求，那它除了不支持安裝到桌面，已經算是一個離線應用了。 什麼是PWA PWA（Progressive Web App）是一種結合了網頁和原生應用程序功能的新型應用程序開
Nickname 京東雲開發者
對於企業軟件系統而言，唯一重要的架構設計是什麼
相對於系統軟件而言，企業軟件往往是面向應用場景、業務邏輯。雖然很多工程師、架構師會面帶嚴峻表情的告訴你，軟件項目所要保障的高可用性、魯棒性、可擴展性、高併發性、低延遲性、安全性、可測試性、靈活性，是如何如何的重要，彷彿一套只有幾個部門三五十人用的軟件系統，其架構也得是多麼科學、嚴謹、隆重的經歷一系列的設計、論證、測試，姿勢拉好、儀式感滿滿。 但現實中，多少企業的軟件系統是由代碼屎山堆成，多少IT運
Nickname 陳小西
關於 PWA url 參數 ngsw-bypass=true
"ngsw-bypass-true" 這個參數是與 Angular Service Worker (ngsw) 相關的一個選項，用於控制在 Service Worker 中是否繞過緩存，直接請求網絡資源。在 Angular 應用中，Service Worker 主要負責緩存應用的靜態資源，以提高應用的性能和用户體驗。 首先，讓我們瞭解一下 Angular Service Worker 的基本概念。
Nickname 註銷
PWA 架構下文件 hash 的重要作用介紹
在PWA（Progressive Web App）體系架構下，文件 hash 起着非常關鍵的作用，它主要用於緩存管理、版本控制以及確保 Web 應用程序的可靠性。在前端開發中，文件 hash 是文件的唯一標識符，通常是文件內容的哈希值，例如 MD5 或 SHA-256。以下是文件 hash 在 PWA 中的幾個關鍵作用： 1. 緩存管理： 文件 hash 在 PWA 中用於實現緩存策略，確保在更新
Nickname 註銷
PWA離線優先策略：提升用户體驗的關鍵步驟
Progressive Web Apps (PWA) 的離線優先策略是通過Service Worker和Cache API實現的，它允許在沒有網絡連接時仍然可以訪問網站的部分或全部內容。 1. 創建Service Worker註冊文件（service-worker.js）： self.addEventListener('install', (event) = { event.waitUntil
Nickname 天涯學館
PWA實踐
PWA基礎 PWA應用是什麼樣子的？ 在主屏幕、應用啓動器、啓動板或開始菜單上都有**圖標**。 當您在設備上搜索應用時，此圖標會顯示。 會在一個獨立的窗口中打開，該窗口完全**獨立**於瀏覽器的界面。 可以與操作系統進行更高級別的集成，例如網址處理或標題欄自定義。 **離線**時也能使用。 應用內自定義安裝 需要滿足的條件 安裝相關API兼容性表格 不兼容系統的交互處理？： 點擊安裝按鈕 -
Nickname 有李
PWA離線應用調研
1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存
Nickname PatWu16
PWA離線應用實踐
上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/
Nickname PatWu16